Uma launch screen decente com React Native

Recentemente, desenvolvendo o trabalho final de um curso de React Native, me deparei com uma tela branca muito suspeita ao rodar meu app no iOS.

Ora, ao executar nosso projeto em desenvolvimento, é comum vermos uma imagem como esta: uma tela branca e a mensagem de download.

Afinal, existe a necessidade de carregar os arquivos JS atualizados a cada execução. O que está acontecendo é: o app nativo é lançado e a primeira imagem que vemos é a view definida como Launch Screen File, lá no Xcode.

No nosso app, que foi construído com a versão 0.59.2 do React Native, utilizamos a lib React Navigation e iniciamos o fluxo com uma splash screen, que é exibida enquanto carregamos algumas informações. Ela é igual à launch nativa, mas a transição entre as duas fica clara pela piscada da tela branca.

Antes da apresentação do trabalho, resolvi gerar uma versão do app com configuração de release, para ver tudo rodando bonitinho. Trinta horas de build depois, me deparo com este comportamento:

Odioso, assombroso, certo? Certo. A mensagem de download sumiu, como era esperado, mas e essa piscada entre a launch screen e a primeira tela do app? 😕

Procurando ajuda na grande rede, me deparei com este artigo, já um pouco antigo e, obviamente, incompatível com a versão mais recente com a qual estamos trabalhando.

Abrindo o AppDelegate do nosso app, me deparei com este código rude, escrito na linguagem mais horripilante com que já trabalhei — Objective-C!

Não é convidativo, mas se dermos uma olhada ali na linha 10, vemos que é criada uma view com cor branca de fundo. Culpado.

Com base no artigo que citei antes, mexendo e testando, cheguei a esta versão, que espero ser útil, ao menos por algum tempo, para copiar e colar e sair funcionando:

Ou seja, em vez de criar aquela tela branca e inútil, criamos uma nova instância da launch screen e usamos ela pra segurar as pontas enquanto as telas do app não são carregadas. Boa sorte para compreender isso a partir do código acima.

No final, ficou assim:

Sucesso, nem dá pra notar a transição.

Se você for um leitor do futuro e, a chance é grande, a solução fornecida neste artigo não funcionar mais, avise aí e tentarei atualizar o exemplo.