rn-navigation

React Native — Navegação

Objetivo

Prover navegação tipada, previsível e escalável entre telas.

Quando utilizar

• Adicionar/registrar uma tela, stack, tab ou drawer.
• Passar e ler parâmetros de rota com segurança de tipos.
• Configurar deep linking ou fluxos autenticado vs público.

Conhecimentos necessários

• Biblioteca de navegação do projeto (ex.: React Navigation) e seus navigators.
• Tipagem da lista de parâmetros de rota (ParamList).
• Gate de autenticação (rotas públicas vs privadas).
• Deep linking e configuração de linking.

Fluxo de execução

1. Defina a chave da rota e seus params no tipo central de rotas (ParamList).
2. Crie a tela e, se houver padrão, uma factory/registro consistente.
3. Registre a tela no navigator correto (público vs privado).
4. Navegue com params tipados; leia params com hook tipado.
5. Atualize o mapeamento de deep link se a rota for endereçável.

Boas práticas

• Nome de rota único e centralizado; sem strings mágicas espalhadas.
• Params serializáveis e mínimos (passe IDs, não objetos grandes).
• Telas finas: lógica no hook de tela, não no componente de rota.
• Padronize wrappers/headers via factory reutilizável.

Armadilhas comuns

• Rota registrada com nome divergente do tipo → erro só em runtime.
• Passar objetos não serializáveis nos params.
• Lógica de navegação acoplada a regra de negócio.
• Deep link sem tratar o estado não autenticado.

Critérios de sucesso

• Navegar para rota/params inexistentes não compila.
• Telas registradas e alcançáveis; deep links funcionam.
• Sem duplicação de definição de rota.