Combinar uma Splash Screen com uma Navegação por Abas (Tab Navigation)

Combinar uma Splash Screen com uma Navegação por Abas (Tab Navigation) é uma das arquiteturas mais comuns e eficazes no desenvolvimento mobile com React Native. Essa estrutura permite que o aplicativo carregue recursos essenciais enquanto oferece uma identidade visual imediata, direcionando o usuário para o painel principal de forma fluida.

Abaixo, detalhamos como essa integração funciona e como implementá-la corretamente.

📚 – Código base

1. A Lógica da Navegação Aninhada (Nested Navigation)

O segredo para essa combinação reside no conceito de Navegação Aninhada. Em vez de tentar colocar a Splash Screen dentro das abas, nós criamos um Stack Navigator (Navegador de Pilha) principal que envolve todo o aplicativo.

O Fluxo de Telas

• Pilha Principal (Stack):
  1. Tela 1 (Splash): A primeira a ser renderizada. Ela não possui abas e serve apenas para o carregamento inicial.
  2. Tela 2 (Home/Main): Esta “tela” não é um componente simples, mas sim um Tab Navigator inteiro.

2. Estrutura do Código

Para implementar essa arquitetura, dividimos o código em duas partes principais: o Navegador de Abas e o Navegador de Pilha que o contém.

O Navegador de Abas (TabNavigator)

Este componente define as seções principais do app (Início, Perfil, Configurações). Ele é isolado para manter o código limpo.

function TabNavigator() {
  return (
    <Tab.Navigator screenOptions={/* configurações de ícones */}>
      <Tab.Screen name="Início" component={TelaInicio} />
      <Tab.Screen name="Perfil" component={TelaPerfil} />
      <Tab.Screen name="Configurações" component={TelaConfig} />
    </Tab.Navigator>
  );
}

O Navegador Raiz (App.js)

Aqui, a Splash Screen é definida como a rota inicial. Quando o tempo de exibição da Splash termina, o app navega para o TabNavigator.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Splash" component={TelaSplash} />
        <Stack.Screen name="Home" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. A Transição Crítica: navigation.replace

Um erro comum é usar navigation.navigate('Home') para sair da Splash Screen. O método correto é o .replace().

• Por que usar replace? Ao usar o Maps, a Splash Screen continua na memória (na “pilha” abaixo da Home). Se o usuário apertar o botão “Voltar” no Android, ele retornará para a Splash.
• O Comportamento ideal: O replace substitui a Splash pela Home na pilha. Assim, ao tentar voltar, o aplicativo entende que não há telas anteriores e fecha, proporcionando uma experiência nativa profissional.

4. Benefícios desta Arquitetura

• Identidade Visual: A Splash Screen reforça a marca (como o logo do SENAI) enquanto o sistema operacional prepara o ambiente do React Native.
• Separação de Preocupações: O desenvolvedor pode gerenciar a lógica de autenticação ou carregamento de API na Splash sem poluir os componentes das abas.
• Performance: Carregar o TabNavigator apenas após a Splash garante que os ícones e componentes pesados das abas não atrasem a primeira pintura visual do app.

5. Erros Comuns e Como Evitá-los