Template de rotas React Native com native stack, bottom-tabs e drawer navigator ⚛

Sempre que pensava em iniciar um novo projeto React Native me lembrava da chatice de configurar a parte de rotas e já ficava com preguiça, as vezes até com medo me perguntando: como posso fazer um projeto que tenha native stack, bottom-tabs e drawer navigator assim como o twitter?

Exemplo:

Obs.: site utilizado para editar o vídeo - veed.io

Por isso, resolvi desenvolver um projeto template que contemplasse as rotas de autenticação (auth.routes.tsx) e rotas do aplicativo (app.routes.tsx), para que quando eu fosse iniciar um novo projeto, pudesse criar a partir deste pré-configurado.

Dessa forma, optei por utilizar o expo e React Navigation e desenvolvi no modelo mais simples que consegui. Basicamente estruturei da seguinte forma:

• src
  • context
    • AuthContext - responsável pela função de login e alteração do state de user para as rotas
  • routes
    • app.routes - rotas após logado, com drawer > bottom-tabs > native stack
    • auth.routes - deslogado, com native stack entre signIn e signUp screens
    • index - renderização condicional entre <AppRoutes /> e <AuthRoutes />
  • screens
    • Details - acesso através de botão na Home - native stack
    • Home - bottom-tabs
    • Profile - drawer
    • Settings - bottom-tabs
    • SignIn - native stack
    • SignUp - native stack

Ou seja:

• auth.routes utilizando native stack entre as telas SignIn e SignUp
• app.routes com o drawer entre as telas do bottom-tabs e Profile, que por sua vez, dentro do bottom-tabs possui navegação entre a Settings e native stack, que possui as telas Home e Details.

Obs.: esses bugs de cores ao abrir o drawer ocorrem somente no gif pois tive que redimensionar

Conclusão

Acredito que esse template possa facilitar a vida de todos, dessa forma deixo aqui o link do repo routes-template para que possam ter acesso e sugerir melhorias.

Se você achou este projeto útil, por favor considere dar uma estrela no GitHub. ⭐️ Isso significaria muito para mim e me motivaria a continuar melhorando. Obrigado!