Melhorando a navegação do seu app com Stack, Tab e Drawer Navigator

[GRATUITO] TESTE SEUS CONHECIMENTOS EM REACT rseat.in/9WfBnanPK
Faça parte da maior comunidade dev da América Latina no DISCORD: / discord
A navegação é uma das partes mais importantes da experiência do usuário dentro do seu app. Além de ser intuitiva e sem etapas desnecessárias, ela também pode ser estilosa e prática.
Hoje já existem diversas ferramentas e muitos estilos de navegação disponíveis por ai. O segredo é saber como implementar todas elas juntas sem exagerar (claro) e sem complicar a usabilidade do seu app.
No vídeo de hoje, você vai ver como aplicar stack, bottom tab e drawer navigator dentro da sua aplicação móvel com React Native. E o melhor: totalmente na prática.
E aí, bora codar?
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[@jakenistertm9502]

Tentei uns 15 videos pra fazer esse bendito Drawer mode e somente o SEU deu certo, tirou onda, me salvou mto

[@marcosmarchetti262]

Rodrigo....Show de bola...Estou começando a entrar na programação do react-native...Parabéns pelo conteudo.

[@cassiojosejesus]

Pohhh! Video excelente, pois uma vez tentei fazer isso e apanhei bastante. Inclusive sou aluno do Ignite e fiz esta pergunta também lá. Parabéns mais uma vez Rodrigo!!!

[@samueloliveira4465]

Séria interessante um vídeo sobre estrategias de monetização. Tenho muitas dúvidas de como coloca anuncio em um aplicativo, sobre como liberar determinada funcionalidade somente para quem tem a assinatura. Entre outras estrategias.

[@marciodejesus5433]

Tbm acho que seria uma boa ideia tbm estou precisando

[@samueloliveira4465]

@@lucasemanuel5391 E eu para fazer autenticação com o Google kkkkkk E vou precisar disso que mencionei no primeiro comentário tbm, já imagino o sofrimento, mas é um desafio né, assim evoluímos.

[@marked75]

Eu fiz algo do gênero com um state em context (ex, premium)quando a pessoa compra mudei o state para true e esse state controla os acessos. Depois é guardado no dispositivo com secure store da expo

[@samueloliveira4465]

@@marked75 Entendi, obrigado pela sugestão.

[@thomascosta947]

up

[@NeinhoxD]

Cara monstro, parece tão fácil.

[@oliveirasfamily]

Rodrigão é um mostrooo, valeu de mais!!

[@hullkke9783]

que coincidência tava com esse problema esta semana,mais video que sera salvo na minha lista

[@PabloDoebber]

Caraca esse "pulo do gato" foi top d+! Obrigado pela aula

[@softwarerepair2697]

Muito obg pelas informações irmão 👌🙌🙏

[@devGuxtavo]

Muito obrigado pelo vídeo mano, bem explicado passo a passo Deus te abençoe!!

[@nicolasmoises2720]

Rodrigo! Parece que tu leu minha mente kkkkkkk monstro demais

[@agcunha]

Obrigado pela aula. Muito top!

[@velhoguidsd]

Excelente, vou usar.

[@carreiradeTIC-ii2ou]

Baita aula, aprendi demais!

[@juliocezarreginatojunior2560]

Cara, muito obrigado! Seu vídeo me ajudou muito, estou começando aprendendo do zero. Poderia criar um curso na Udemy fazendo alguns projetos completos com o Expo, os que tem lá são muito rasos.

[@vuc__vuc]

qnd eu comecei a usar o react native o nested navigator com stack e bottom tabs era mo bugadao kk hj em dia ta td rodando mo liso

[@jposava]

Nem ferrando, eu tava vendo um video agr de vcs de 8 meses atras sobre expo router pra implementar no meu app, e acabou de chega a notificação desse video kkkkkkkkkkkkkk

[@VoceBR97]

Famoso analyses

[@thomascosta947]

Excelente conteúdo

[@junioroga]

Rodrigão, poderia fazer uma segunda parte do vídeo com tamagui, fazendo as configurações web com o webpack e rodando em ambas as plataformas. Seria bacana para todos que pensam utilizar o tamagui na proposta de web + mobile.

[@hugog1972]

Muchas gracias por el video. Excelente explicación ¡¡¡ Saludos.-

[@filipeleonelbatista]

Recentemente desenvolvi um app e tive problemas ao usar modal com o tab navigation, então pra adiantar o processo eu tive que simular uma tab mas no stack navigation.

[@vilmarMartins]

vlw Rodrigão!

[@alaelciolucas174]

Fala mais um pouco sobre a biblioteca routes para navegação!!

[@vinicussilvasouza7956]

Muito top

[@descomplicandogame4727]

show, meu happy hour de hoje a noite

[@GuilhermeBuchman]

Gostei muito do vídeo. Como faço para sempre manter o TabNavigator aparecendo utilizando varias telas no Stack? Ex. 5 telas no stack e 2 apenas no tab.

[@Vinicius-rq9is]

tenho a mesma dúvida

[@pauloanselmojr2622]

estou com essa duvida também, quero manter a tab fixa em baixo mesmo navegando dentro das stacks do drawer

[@gabrieltechio9801]

Mesmo problema... Alguém conseguiu resolver?

[@Arttturslv]

Também tô tentando fazer isso, mas não consegui

[@alaelciolucas6838]

Olá,Rodrigo pode criar colocar components dentro do drawer? Obrigado!!!

[@olimpioadolfo7498]

Opamuito bom conteudo. Podemos ter esse metodo aplicado com Expo router?

[@alexsandroeuzebiodasilva6872]

Rodrigo quando colocar o drawer e o fundo escuro fica branco e nao estou conseguindo colocar a mesma cor do fundo, como resolver?

[@alefo]

Quer dizer que para cada item do meu, se eu quiser que tenha icone, vou precisar todo o stack route do pra implementar uma rota ?? é isso ?

[@liasello1]

Tenho uma dúvida: se a navegação do meu App for toda pelo tab e uso para outras telas o Stack é possível deixar o tab sobreposto ao Stack?

[@cyraxtradebr]

ola, tem como usar o stack fora do drawer ? tipo tenho um TouchableOpacity e quando clicar nele quero ir para outra pagina

[@rcodev]

alguém me diz por favor como eu crio um projeto expo com a pasta android já inclusa assim como tinha essa opção ao criar antes. não estou conseguindo

[@doasalah]

Rodrigo como faço pra conseguir programar pra native no wsl?

[@vitorvinicius2951]

Qual o tema que você está usando no vscode? Alguém sabe dizer?🥺

[@tblima26]

Eu nunca acerto os ícones, posso fazer a instalação que for... Como faço pra colocar itens sem ter dor de cabeça?

[@annakarolinafranz5946]

esse emulador é o android studio, ou tem outro?

[@ninjabr123u3]

ela funciona para a CLI?

[@filipeleonelbatista]

Essas legendas na tela me atrapalham muito, uma sugestão é usar essas techs para gerar legentas em um arquivo de texto e subir junto do video no youtube pra usar as CCs do proprio yt onde o usuário pode escolher posicionamento cores e tudo mais para a legenda.

[@reinaldodev]

achei super interessante, mas não entendi como fazer as outras rotas serem navegadas pela drawer, pois só está chamando a início, e quando renderiza as outras, só manda pra home. Teria que criar componentes separados da tab routes?

[@gabrieltechio9801]

Estou com o mesmo problema... Conseguiu resolver?

[@user-xg8mt1xe6m]

conseguiu resolver? queria saber como corrigir isso também

[@arozendojr]

Como faz teste de tela navigation ?

[@rafael_mugnol]

Pq não utilizou o expo-router? Como está a maturidade do expo-router em relação ao React Navigation? Estou decidindo que biblioteca de navegação utilizar em um projeto novo.

[@samuelmatos8875]

React Navigation ainda é mais robusto e seguro em relação à bugs. Até aonde me lembro, a ultima vez que ele comentou sobre, disse mais ou menos assim: "Use expo Router para projetos pessoais, e não algo que vai para produção ainda" Espero ter ajudado!

[@user-xg8mt1xe6m]

Muito interessante! Mas no caso eu gostaria de renderizar meu tabBar quando navego para dentro das stacks também, basicamente deixando ela "fixa" nas telas, como poderia fazer? Vi que essa era a duvida de mais um possoal ali em baixo.

[@Arttturslv]

Conseguiu?

[@feosant]

Gente, alguém me ajuda por favor? Estou tentando rodar qualquer projeto de react native pelas minhas IDEs mas elas não reconhecem nenhum android instalad, mesmo tendo lá inserido. Já removi o Android Studio do meu mac 2x e reconfigurei mas o problema segue o mesmo. Tá complicado demais!!!

[@mirellesousa5557]

oi, estou fazendo meu tcc e estava fazendo o menu a partir deste video, porém começou a dar um erro que não consegui achar uma soluçao ERROS: Error: [Reanimated] `valueUnpacker` is not a worklet, js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes basicamente, tenho a tela de Login que ao clicar em um botão dentro desta tela, na teoria, ela abriria a tela de menu que teria o drawer e o tab e a partir disso ela abriria todas as outras telas Mas este erro está me impossibilitando de continuar, alguém pode me ajudar?

[@davidgoncalves3465]

Estou criando um App que tem uma tela stack navigation para fazer de login e quero quando fizer login entrar dentro do tab navigation. Só que tenho que passar variáveis como por exemplo o email do utilizador para dentro do tab. Como posso fazer?

[@EnzoCriniti]

Basta usar context, pesquise contexto em react native!

[@davidgoncalves3465]

@@EnzoCriniti obrigado

[@joaoalvescs]

Se utilizar os três tipos de rotas na mesma aplicação afeta o desempenho?

[@oguiduart_]

não atrapalha o desempenho do app, porém não é uma boa experiencia para o usuário, é mais facil padronizar um só, porém se precisar outro por ter mt informação na tela, é tranquilo

[@joaoalvescs]

@@oguiduart_ muito obrigado mesmo! dúvida sanada 👍🏻

[@Matheus_1582]

Eu queria ver o Rodrigão criando um projeto com angular. E asdcionando o Capacitor para criar um App. Pra começar.. npm init @angular E quando for adscionar o capacitor.. npx -p @angular/cli ng add @capacitor/angular