React Navigation 5.x — Organização de Rotas e Nested Routes (Aninhamento de Rotas)
Com o passar dos anos o React Native vem se consolidando cada vez mais como um Framework para desenvolvimento de aplicativos móveis. E quase ao mesmo tempo que seu próprio core é atualizado, as bibliotecas, que tornam esse mundo mais interessante, também são. E para este caso, a biblioteca de navegação React Navigation vem sofrido diversas alterações desde seu lançamento.
Uma das coisas que mais me incomodam durante o desenvolvimento é a desorganização e a falta de estruturação do projeto, o que se aplica também as pastas do projeto. Eu acredito que um código bem organização, modularizado na medida do possível é um grande impulsionador na qualidade e tempo do desenvolvimento.
Neste artigo mostrarei, utilizando o React Native 0.60+ e React Navigation 5.x, como eu organizo, estruturo e faço meus aninhamentos de rotas.
Vale lembrar que existem milhões de jeitos de se chegar a um mesmo resultado e estarei mostrando o que funcionou para mim e tornou o meu entendimento e aprendizagem sobre RN 5.x mais fácil.
Bom chega de papo e mãos à obra! 😬
Como seguiremos:
- Criar o projeto do zero com npx ( React Native CLI) e utilizando o template Typescript do RN.
- Organizar arquivos iniciais e fazer o nosso “Hello World” da primeira tela.
- Instalar as bibliotecas do React Navigation 5.x. Vamos utilizar neste artigo a Stack e Drawer navigators.
- Organizar nossa estrutura inicial de pastas e rotas.
- Criar nossas Nested Routes!
1. Criando o Projeto
Para iniciarmos nossa aventura, vamos rodar o comando abaixo:
npx react-native init RNNestedRoutes --template react-native-template-typescript
Tudo o que precisamos é esperar e assim que concluir todo o processo podemos entrar na pasta do projeto e abrir no nosso editor de texto preferido (VS Code 🤫🤧 coof coof).
cd RNNestedRoutes && code .
Por via das dúvidas vamos rodar o projeto para sabermos se está buildando certinho.
yarn ios
No caso do android, certifique-se de estar com o emulador aberto.
Se tudo der certo você chegará na mesma tela que eu e terá a mesma estrutura inicial que a minha:
Caso queira saber mais clique aqui.
2. Organizar arquivos iniciais
Neste ponto nós seguiremos algumas etapas:
- Apagar arquivo App.tsx.
- Criar uma pasta na root do projeto chamada “src”.
- Dentro da pasta src, vamos criar o arquivo index.tsx.
Você terá este resultado:
Arquivo index.tsx:
- Alterar o arquivo index.js da root para (estaremos apontando para a pasta “src”):
E chegaremos neste resultado:
3. Instalar as bibliotecas do React Navigation
Vamos seguir neste passo todo o Getting Started da própria documentação do React Navigation (clique aqui).
1- Instalar o React Navigation
yarn add @react-navigation/native
2- Instalar as demais dependências exigidas
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3- Instalar a Stack Navigator
yarn add @react-navigation/stack
4- Instalar o Drawer Navigator
yarn add @react-navigation/drawer
5- No caso do Mac, vamos rodar o comando abaixo:
cd ios && pod install && cd ..
Agora, vamos voltar no arquivo index.js da root e adicionar a linha de comando especificada na documentação.
Recomendo parar o Metro Bundler e rodar novamente o “yarn ios” ou “yarn android”.
Até aqui o que esperamos é que tenhamos ainda o mesmo resultado do passo 2.
4. Organizar nossa estrutura
Tentaremos seguir a estrutura que desenhei acima. Teremos um root navigator, uma das rotas será para o fluxo de login/cadastro e outro interno para o fluxo de home/perfil.
Bom, vamos lá…
Dentro de src, criaremos um arquivo routes.tsx, uma pasta routes e outra screens.
- Dentro das pastas routes e screens, criaremos mais duas pastas public e private.
- Na pasta routes também criaremos um arquivo chamado _rootNavigator.tsx.
Como imagem abaixo:
Vou aproveitar essa seção também para já deixar criadas as pastas das telas propriamente ditas. Vou criar dentro de src->screens->public as pastas de LogIn e Register e dentro de src->screens->public as pastas de Profile e Home. Todas com um index.tsx dentro, sem styles.ts, por exemplo, já que esse não é o objetivo deste artigo.
Também criaremos dois arquivos na pasta routes. Um chamado publicNavigator.tsx, dentro da pasta public e outro privateNavigator.tsx dentro da pasta private.
À primeira vista parece muito confuso e com uma complexibilidade desnecessária, porém lembre-se que estamos pensando, além de organização, escalabilidade. Imagine uma app com 5, 10, 20, 50 telas!!!
5. Criar nossas Nested Routes
Agora vamos para o que interessa!!!
Primeiramente, colocarei em cada screen somente uma View com um Text dentro escrito o nome da Tela. Algo parecido com o que já fizemos…
Exemplo da nossa Dashboard:
Agora tendo pelo menos algo para mostrarmos em tela, vamos acessar o arquivo _rootNavigator.tsx e criaremos nossa primeira stack!
Você pode perceber que existem algumas coisas “faltando”, mas não se preocupe, se tudo ocorrer bem até o final, perceberá que todas as peças vão se encaixando.
Vamos criar também, respectivamente, o publicNavigator e o privateNavigator.
Dentro do publicNavigator.tsx da public:
Dentro do privateNavigator.tsx da private (lembrando que a private é um Drawer):
Com tudo isto feito, vamos até o arquivo routes.tsx da src e importamos nosso rootNavigator dentro do NavigationContainer.
E o Grand Finale para sabermos se está tudo se conversando é alterar o arquivo index.tsx da src, importando nossas Routes.
Nosso resultado:
Vamos colocar alguns botões para navegarmos e testar essa parada ae?
Bom, esperam que tenham gostado! Aproveitem!
Link do repositório: https://github.com/adonaipinheiro/RNNestedRoutes
Se te ajudou, deixe uma estrela ⭐️
Obs.: Faço essa divisão pois acredito que tudo tem seu devido lugar… Imagine que mais para frente, no arquivo index.tsx da src nós colocaríamos um Redux da vida…
Até!
