Como Criar uma Tela de Splash no React Native (Com Exemplos de Código)

Primeiras impressões são cruciais em aplicativos móveis. Quando um usuário inicia seu aplicativo React Native, uma tela de splash é a primeira coisa que ele vê. Uma tela de splash exibe o logotipo ou a marca do seu aplicativo enquanto ele inicializa, dando ao seu app uma sensação mais polida ao evitar uma tela em branco e garantindo aos usuários que o aplicativo está carregando.

O que é uma Tela de Splash no React Native?

Uma tela de splash é a tela inicial que aparece quando seu aplicativo é iniciado. No React Native, a tela de splash geralmente mostra o nome, logotipo ou outros elementos de marca do seu aplicativo em um fundo simples. Ela permanece visível enquanto o código nativo carrega e prepara o aplicativo React Native. Os principais objetivos de uma tela de splash são:

• Marca: Torna a marca do seu aplicativo imediatamente visível
• Experiência do Usuário: Evita que o usuário veja uma tela em branco ou sem resposta durante a inicialização do aplicativo
• Percepção de velocidade: Uma tela de splash dá a impressão de que algo está acontecendo, fazendo o tempo de carregamento parecer mais curto

Por que Usar uma Tela de Splash no React Native para iOS?

Todos os aplicativos móveis podem se beneficiar de telas de splash, mas no iOS elas são especialmente importantes. Na verdade, a Apple exige que os aplicativos tenham uma tela de lançamento – no iOS, a tela de splash não é apenas para exibição; é parte da experiência de usuário esperada. Aqui estão as principais razões:

• Experiência de Usuário Aprimorada: Aplicativos iOS que iniciam com uma tela de splash bem projetada parecem mais suaves e profissionais
• Marca do Aplicativo: A tela de splash exibe o logotipo, slogan ou arte do seu aplicativo
• Gerenciamento de Tempos de Carregamento: O iOS exibirá a tela de lançamento até que o aplicativo esteja pronto, mascarando quaisquer atrasos durante a inicialização

Configurando uma Tela de Splash no React Native (Específico para iOS)

Etapa 1: Criar uma Imagem para a Tela de Splash

Primeiro, você precisa de uma imagem para sua tela de splash:

• Tamanho: Use uma imagem de alta resolução (pelo menos 2000 x 2000 pixels) que fique boa em todas as telas de dispositivos
• Formato: PNG é o formato mais comumente usado para telas de splash
• Orientação e Área Segura: Mantenha o conteúdo importante em direção ao centro da imagem

Dica Profissional: Ferramentas como App Icon Generator (appicon.co) podem ajudar a criar imagens com tamanhos corretos para várias telas iOS.

Etapa 2: Adicionar a Tela de Splash no Xcode

1. Abra o projeto iOS no Xcode: Navegue até a pasta ios e abra o arquivo .xcworkspace ou .xcodeproj.
2. Adicione recursos de imagem: No Xcode, encontre Images.xcassets, crie um New Image Set chamado ""Splash"" e adicione sua imagem de splash.
3. Edite o storyboard da Tela de Lançamento: Abra LaunchScreen.storyboard, exclua quaisquer elementos padrão e adicione uma Image View. Defina a imagem para sua imagem de splash, redimensione ou restrinja-a e defina o Modo de Conteúdo (Aspect Fit ou Aspect Fill).
4. Defina a área segura (se necessário): Se necessário, desative ""Use Safe Area"" para permitir que a imagem se estenda sob áreas de barra de status/notch.

Etapa 3: Modificar Info.plist para Configurações de Exibição Adequadas

1. Abra Info.plist e procure a chave ""UILaunchStoryboardName"".
2. Certifique-se de que seu valor seja o nome do seu storyboard (por exemplo, ""LaunchScreen"").
3. Verifique se o arquivo LaunchScreen está incluído no target do aplicativo.

Agora execute seu aplicativo em um simulador ou dispositivo iOS para ver sua tela de splash aparecer brevemente na inicialização.

Usando uma Biblioteca para uma Tela de Splash

Usar uma biblioteca pode simplificar o processo e fornecer controle adicional. Duas bibliotecas populares são:

• react-native-splash-screen – Amplamente utilizada tanto para iOS quanto para Android
• expo-splash-screen – Para fluxo de trabalho gerenciado pelo Expo

Vamos usar o react-native-splash-screen:

1. Instale a biblioteca:

   npm install react-native-splash-screen --save
   

   ou

   yarn add react-native-splash-screen
   

2. iOS: Instale os pods:

   cd ios
   pod install
   cd ..
   

3. Configure o código nativo do iOS:

   • Modifique o AppDelegate.m:

     #import ""RNSplashScreen.h""  // adicione este import
     

     No método application:didFinishLaunchingWithOptions:, adicione:

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... código existente de inicialização do React Native ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // mostrar a tela de splash
         return YES;
     }
     

   • Verifique o Info.plist: Certifique-se de que UILaunchStoryboardName ainda esteja definido para o seu storyboard LaunchScreen.

4. Configure o código nativo do Android (se necessário):

   • Importe SplashScreen no MainActivity
   • Chame SplashScreen.show(this) antes de super.onCreate
   • Adicione um layout launch_screen.xml
   • Atualize o AndroidManifest

5. Oculte a tela de splash no seu código React Native:

   // App.js (ou index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // importe a biblioteca
   
   const App = () => {
     useEffect(() => {
       // Oculte a tela de splash quando o aplicativo estiver pronto
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* Seus componentes de UI do aplicativo começam aqui */}
         <Text>Olá, Aplicativo Principal!</Text>
       </View>
     );
   };
   
   export default App;
   

Gerenciando o Tempo e as Transições da Tela de Splash

• Mantenha Breve: Uma tela de splash deve ser visível apenas pelo tempo necessário (idealmente 1-3 segundos)
• Oculte Quando Pronto: Chame SplashScreen.hide() assim que o conteúdo principal do seu aplicativo estiver pronto para exibição
• Combine a Transição: Use a mesma cor de fundo na tela inicial do seu aplicativo que na tela de splash
• Animações Suaves: Considere adicionar uma animação sutil ao ocultar a tela de splash
• Duração Consistente: Alguns aplicativos mostram o splash por um tempo mínimo (por exemplo, 2 segundos) mesmo se o aplicativo carregar mais rápido

Problemas Comuns e Dicas de Depuração

• Tela de splash não aparece: Verifique UILaunchStoryboardName no Info.plist, confirme se o arquivo LaunchScreen está no target do aplicativo e confirme se os recursos de imagem estão incluídos
• Imagem está esticada ou cortada: Revise as configurações do Modo de Conteúdo, verifique as restrições e confirme se você forneceu os tamanhos de imagem corretos
• Tela de splash pisca e depois aparece uma tela em branco: Oculte o splash apenas quando sua UI estiver pronta e combine as cores de fundo
• Tela de splash fica presa: Certifique-se de que SplashScreen.hide() está sendo chamado e verifique se há erros iniciais
• Proporção incorreta no iPad: Use restrições em vez de tamanhos fixos, defina os dispositivos do storyboard como Universal e forneça imagens de alta resolução
• Alterações não refletem: Limpe a compilação, reinstale o aplicativo e certifique-se de que está editando os arquivos corretos

Conclusão

Adicionar uma tela de splash ao seu aplicativo React Native é um pequeno passo que proporciona uma experiência mais profissional e amigável ao usuário. Ao configurar uma tela de splash manualmente no Xcode ou usar bibliotecas como react-native-splash-screen, você pode integrar uma tela de splash que exibe sua marca e mantém os usuários engajados durante a inicialização.

Lembre-se de considerar o tempo e garantir transições suaves entre a tela de splash e a primeira tela do seu aplicativo. Com a implementação adequada, sua tela de splash melhorará a qualidade percebida do seu aplicativo desde o momento em que é iniciado.

Perguntas Frequentes