Ha Tres Principais Modelos De Navegação Disponível Em React Native

Navigation em React Native: o que realmente funciona na prática

Acho que muita gente começa com React Native achando que navegação é coisa simples. Depois de ter passado por uns três projetos e uns dois refatoramentos porque a primeira escolha estava travando tudo, posso dizer que não é. O ecossistema mudou muito nos últimos anos. Antigamente, a discussão era bem mais acalorada. Hoje, se resume praticamente a três modelos principais, cada um com seu preço a pagar. Vou listar sem rodeios. O React Navigation é o padrão da indústria agora. O React Native Router Flux é uma opção que ainda aparece em codebases legados. E existe o modelo nativo embutido, o Navigator, que foi descontinuado e só aparece em tutoriais desatualizados da internet. Se você está começando um projeto novo em 2024 ou depois, a decisão praticamente não existe: React Navigation. Mas entenda por quê antes de pular direto. É a biblioteca mais usada, sem margem para dúvida. Ela oferece stack, tab, drawer e modal navigators, tudo integrado com hooks do React. A instalação é direta — um comando de npm ou yarn e você já tem o core funcionando. A configuração inicial leva talvez dez minutos se o ambiente estiver limpo, mas se você tiver libs nativas conflitantes ou versões do Kotlin diferentes no projeto Android, pode levar umas duas horas resolviendo avisos do Gradle.

O que poucas pessoas contam é que o React Navigation tem um problema real de performance em listas grandes quando usado dentro de tabs. Eu descobri isso num projeto onde tínhamos quatro abas, cada uma com uma FlatList de mais de duzentos itens. A transição entre abas travava o main thread por quase meio segundo em dispositivos de entrada. A solução que funcionou foi usar nested navigation — basicamente, cada tab carrega seu próprio stack navigator com screen própria, e não simplesmente renderizar tudo no mesmo nível. Isso isola o unmount e o remount das listas quando a aba troca. O custo é uma configuração um pouco mais verbosa, mas resolve o gargalo. Outro ponto que os tutoriais não destacam: o dangerZone do React Navigation para animações customizadas. Você pode substituir as transições padrão usando a API de shared element transitions ou criando animações com Reanimated. Isso é útil se seu design pede algo diferente do slide padrão do Android ou do push do iOS. Não é difícil, mas exige que você entenda como o navigator gerencia o contexto de cada screen. Se não fizer isso direito, você vê screens sobrepondo errado em back buttons ou animations rodando em loop infinito em certos cenários de navegação profunda. Dentro do React Navigation, existem os stack navigator, tab navigator e drawer navigator como componentes. Eles não são modelos independentes — são peças do mesmo quebra-cabeça. Mas o ponto importante é que você pode combinar eles. Um stack dentro de uma tab que contém outro stack. Isso é comum em apps comerciais reais. Apps como iFood e Spotify fazem isso o tempo todo. O risco é que a profundidade da navegação fica difícil de debugar. Use o DevTools do React Navigation abertamente. A tela de debugging mostra o estado completo do navigator em tempo real, e isso economiza horas em bugs de navegação.

React Native Router Flux

Esse era popular antes do React Navigation dominar. Ele funciona com uma abordagem baseada em actions e reducers, parecida com Redux em alguns aspectos. A configuração inicial é mais rápida porque você define as rotas num único arquivo centralizado, o que facilita a visualização geral do app. O problema principal é que o projeto praticamente parou de receber atualizações significativas. O último release relevante foi em 2020 ou 2021, e isso significa que ele não acompanha mudanças do React Native moderno como o novo architecture com TurboModules e Fabric. Se você herdou um código usando Router Flux, o trabalho de migração é real. Não é algo de um dia. Envolve reescrever as chamadas de action por hooks do React Navigation, ajustar o gerenciador de estado se necessário, e testar cada transição porque o comportamento de back button e de stack pop pode diferir sutilmente. Vale a pena fazer essa migração? Sim, se o app ainda vai receber manutenção ativa. Se for um projeto interno que ninguém mais vai mexer, deixe como está. Uma característica técnica que as pessoas costumam ignorar: o Router Flux usa seu próprio sistema de routing baseado em keys de string. Isso significa que você referencia telas por nomes, não por componentes diretamente. É prático no início, mas vira dor de cabeça quando o app cresce e você precisa passar params complexos entre telas. O React Navigation lida com params de forma mais tipada e integrada ao ecossistema TypeScript, o que reduz erros de runtime.

Navigator nativo (descontinuado)

O Navigator que vinha embutido no React Native foi removido oficialmente. Ainda aparece em dezenas de artigos e vídeos no YouTube, e é comum encontrar pessoas seguindo esses tutoriais e se perdendo porque o código simplesmente não funciona nas versões atuais. Se você ver referências a Navigator importado do core do React Native, ignore. Isso não existe mais desde meados de 2019. Existem duas alternativas que permaneceram como herdeiras indiretas. A primeira é o React Navigation, que naturalmente absorveu a maioria dos usuários. A segunda é o Native Base ou soluções que embrulham componentes nativos de navegação diretamente, mas essas são nichos bem específicos e raramente valem a pena para apps gerais. Há um detalhe importante sobre a versão mais recente do React Navigation que quase ninguém menciona: a compatibilidade com Expo. Se você estiver usando Expo, o processo é ainda mais simplificado. A Expo já vem com a maioria das dependências pré-configuradas. A desvantagem é que isso limita você ao build managed a menos que faça um eject. Projetos que precisam de modificações nativas profundas no Android ou iOS podem sentir essa restrição. Nesse caso, use o SDK bare do Expo ou migre para um projeto sem Expo desde o início.

Problema prático que encontrei e como resolvi

Num projeto recente, eu precisei implementar navegação profunda com parâmetros dinâmicos vindo de uma notificação push. O problema foi que o React Navigation, por padrão, não reseta o stack quando uma notificação abre uma tela específica. Eu simplesmente tinha um stack acumulando telas que nunca eram limpas, e o botão de voltar comportava-se de forma errática após abrir via notificação. A solução foi criar um navigation container customizado que, ao detectar a deep link, limpava o histórico antes de empilhar a nova tela. O código ficou em torno de trinta linhas adicionais, mas fez toda a diferença na experiência do usuário. Também enfrentei um problema com SSR e Next.js. O React Navigation não foi feito para funcionar em server-side rendering. Se você tentar usar ele num projeto que mistura React Native com web, vai precisar de um wrapper condicional que carrega o navigator apenas no client. Isso adiciona complexidade desnecessária se seu app é nativo puro. Neste caso, considere se realmente precisa de SSR ou se pode manter o app 100% nativo.

Quando evitar React Navigation

Não dá pra falar só dos pontos positivos. O React Navigation tem limitações reais. A principal é o overhead de memória em dispositivos com pouca RAM. Cada screen adicionada ao stack mantém seu estado na memória até ser destruída explicitamente. Em apps com dezenas de telas, isso pode consumir bastante. A workaround é usar o unmountOnBlur ou o lazy loading de screens, que adia o carregamento até que a tela seja realmente acessada. Outro problema: a curva de aprendizado para casos avançados. Começar é fácil. Implementar navegação com stacks aninhados, shared elements, e deep linking configurado corretamente exige tempo. Se o prazo do projeto é curto e a navegação é simples — talvez cinco ou seis telas lineares — considerar uma solução mais minimalista, como o Native Stack com configuração enxuta, pode ser mais eficiente do que configurar tudo no React Navigation. Se o seu app exige animações de transição extremamente customizadas que o React Navigation não oferece nativamente, aí sim vale a pena avaliar se compensa integrar bibliotecas de animação como o React Native Reanimated junto com o navigation. Isso aumenta a complexidade, mas é viável. Caso contrário, fique com o padrão.

Resumo objetivo

Os três modelos de navegação disponíveis em React Native se reduzem, na prática, ao React Navigation como escolha principal, ao Router Flux como opção legada que ainda aparece em projetos antigos, e ao Navigator nativo que já não existe mais e deve ser ignorado. A escolha recomendada para qualquer projeto novo é React Navigation. O tempo gasto aprendendo a biblioteca se paga rapidamente pela estabilidade e pela comunidade ativa. Os problemas de performance são reais mas contornáveis com nested navigation e lazy loading. O investimento inicial de configuration leva cerca de meia hora em um ambiente limpo, e esse tempo se recupera na primeira semana de desenvolvimento por evitar bugs de navegação que aparecem tarde demais. Documentação oficial do React Navigation: https://reactnavigation.org/docs/getting-started Se estiver usando Expo, a documentação de navegação fica em: https://docs.expo.dev/navigation/introduction/