Como funciona a navegação no React Native na prática
A navegação é um dos primeiros problemas que qualquer desenvolvedor enfrenta ao montar um app em React Native. Na maioria dos projetos, a escolha da biblioteca errada gera refatoração no meio do caminho. Vou explicar os três principais modelos de navegação disponível em react native e o que realmente acontece quando você tenta usar cada um deles em produção.
ha tres principais modelos de navegação disponível em react native
O ecossistema se consolidou em torno do React Navigation. As outras opções existem, mas não vencem a curva de manutenção e suporte da comunidade. Dentro dele, existem três estruturas fundamentais. O primeiro é o Stack Navigator. Ele funciona como uma pilha de telas. Você empurra uma tela nova e ela fica acima da anterior. O botão de voltar apenas remove o topo da pilha. Parece simples porque é simples. A implementação básica leva cerca de dez minutos se você já tiver o projeto configurado.
Eu tive um problema específico com o stack em um app de fintech que desenvolvi. O cliente precisava de animações de transição personalizadas entre telas, e a configuração padrão do Stack Navigator aplicava a animação para ambas as direções. Quando você navega para frente e para trás, a animação invertida parecia um bug visual para o usuário final. A solução foi sobrescrever a configuração do screenOptions usando a prop presentation 'transparentModal' para telas específicas e desativar a animação de volta via gesture handler. Isso adicionou cerca de duas horas de trabalho que não estavam documentadas no guia oficial. O segundo modelo é o Tab Navigator. Ele cria uma barra de navegação fixa, geralmente na parte inferior do app em mobile. Cada aba representa um contexto diferente dentro do mesmo nível hierárquico. Diferente do stack, as abas não se empilham. Elas coexistem. O estado de cada aba é mantido quando você troca, o que significa que filtros, scroll position e dados carregados permanecem intactos.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Aqui existe uma armadilha que quase ninguém menciona nos tutoriais iniciais. Quando você usa tabs com stacks aninhados dentro de cada aba, o foco da tela ativa não se limpa automaticamente. Eu percebi isso quando o usuário voltava da tela de detalhes de um produto para a lista filtrada, e o teclado continuava aberto, cobrindo metade da interface. A correção foi adicionar um useEffect dentro do componente da aba que chama Keyboard.dismiss() sempre que o tab ganha foco, usando o evento focus do useFocusEffect do React Navigation. Resolveu em cinco minutos, mas o problema levou uma tarde inteira para diagnosticar. O terceiro é o Drawer Navigator. Ele oferece um painel lateral que desliza da esquerda ou da direita. É o padrão para apps que precisam de acesso rápido a múltiplos contexts sem expor tudo na interface principal. O drawer também mantém estado, então se o usuário selecionar um filtro dentro do menu, o filtro permanece ativo ao navegar entre telas principais.
O drawer tem um problema de performance que aparece em dispositivos mais antigos. A renderização inicial de todas as telas dentro do drawer, mesmo as ocultas, pode pesar em listas com muitas linhas. A solução mais comum é combinar o drawer com lazy loading nas abas internas ou usar a prop detachInactiveScreens, que passa a renderização das telas inativas para fora do árvore principal após o primeiro render. Isso cortou o tempo de início do meu app de cerca de quatro segundos para pouco mais de um segundo em um Samsung Galaxy A10, que é o dispositivo de menor custo ainda presente em muitos portfólios de teste. Uma combinação muito usada em produção mistura os três. Tab no nível inferior, stack dentro de cada aba para navegação hierárquica, e drawer para menus laterais. Isso funciona bem até o app crescer. Quando você tem mais de doze telas, a configuração do stack aninhado começa a gerar conflitos de roteamento, especialmente se precisar navegar diretamente para uma tela específica sem passar pelas telas intermediárias. A solução nesse caso é usar navigation.dispatch com navigation actions ou criar um helper de navegação global que centralize os navegações profundas.
Outro detalhe importante que vale mencionar é a diferença entre navegação imperativa e declarativa. A API antiga de navigation prop funcionava de forma imperativa. A versão atual do React Navigation prioriza o enfoque declarativo com hooks como useNavigation e useRoute. Migrar um projeto legado para a abordagem moderna costuma exigir refatoração de aproximadamente trinta a quarenta por cento dos componentes que fazem chamadas diretas ao navigation object. Vale o esforço porque a versão mais recente resolve vários edge cases de memory leak que apareciam na versão cinco. Se você está começando um projeto novo hoje, a recomendação é instalar o react-navigation/native, react-navigation/stack, react-navigation/bottom-tabs e react-navigation/drawer. Configure o NavigationContainer na raiz do app antes de qualquer outro componente. Passe o theme object no construtor se quiser customizar cores globais, porque redefinir depois exige alterar cada screenOptions individualmente.
O documento oficial fica em navigation.reactnavigation.org. A documentação é completa mas não cobre os casos que aparecem só na prática, como o problema do teclado nas tabs que eu mencionei antes. Para resolver isso, vale a pena consultar também issues no repositório oficial do GitHub, onde desenvolvedores compartilham workarounds que ainda não chegaram à documentação formal.
