Au 03 - Mobile - React Native - Implementando funcionalidade de navegação - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos começar a falar aqui sobre a navegação no aplicativo né com Como usar o react navigation Por que a gente usa ele e os problemas que ele resolve e nós vamos também est criando aqui já um pouco da interface baseado do que a gente tem lá no nosso XD planejado né e por mais que essa aplicação ela é uma aplicação bem simples é assim a gente em teoria a gente não precisaria de usar navegação nesse app mas eu vou est trazendo para cá pra gente entender

um pouco usar um pouco criar um exemplo aqui com o stack naveg ator que é o mais simples de todos pra gente começar a se familiarizar com isso e entender também como que a gente pode usar o react naveg com typescript no nosso aplicativo Tá certo então vindo aqui pro vs code Aqui tá o projeto que a gente fez na aula passada eu não alterei nada eu só adicionei aqui alguns ícones tá que a gente vai estar usando nessa aula e olhando aqui no XD basicamente O que que a gente vai fazer hoje essa parte

superior do app tá que seria ali o cabeçalho né onde o steack naveg ator eh atua entre aspas né que é basicamente onde nós temos o botão de voltar por mais que aqui a gente tá com o botão de voltar eh na aplicaç a gente não vai precisar né então a gente não vai nem adicionar ele mas o cabeçalho em si a gente vai criar para tá trabalhando e também o botom né esse essa parte inferior our aqui que a gente vai criar essa componente também e vai usar ela para trabalhar em cima dessa ideia

da navegação Tá certo então a gente pode vir aqui no vs code na verdade vamos aqui no Browser né porque no Browser já deixei aberto aqui eu vou minimizar o app por enquanto tá E no Browser eh como eu falei na aula passada né no o Expo em si prando a gente fala de navegação o próprio Expo recomenda a gente usar o react navigation né e eu tô aqui na biblioteca na documentação deles né só pesquisei o react navigation entrei na documentação aqui no iniciando né no getting started nós temos aqui a questão que ele

ensina a gente fazer a instalação né os pré-requisitos que é o react Native né e react Native Expo typescript caso a gente esteja usando E também algumas outras bibliotecas né no caso do Expo que ele ele guia a gente eh a tá fazendo essa instalação tanto no no Expo tem o guia para expo tem o guia também para react n cer com o b react Native enfim tem todo o tutorial aqui a gente vai estar fazendo isso tá então a gente vai instalar usar aqui o npm né para instalar o o react navigation né barra

Native o pacote principal deles né o Core ali então vamos aqui no vs code eu vou abrir aqui o terminal vou parar aqui o projeto né que tá rodando vou matar esse terminal Abrir outro e colar aqui né npm instal recation barn se a gente volta aqui e quando a gente tá mexendo com Expo né noss temos que instalar também o react Native screens e o react Native Safe era context que são bibliotecas que o nosso react navigation depende delas ele usa elas para tá e funcionando tá então a gente vai ter que instalar elas

também aqui ele já instalou o react navigation tá vou colar aqui para ele instalar o o pro Expo né instalar o react Native screens e o Safe area context tá então aqui tem o guia para o be rect Native Project que não é o nosso caso e aqui embaixo ele fala que nós temos que colocar a nossa aplicação inteira em volta desse navigation container navigation coner é uma tag que a gente importa da própria biblioteca né do react navigation que ele vai basicamente vai permitir que tudo que está dentro deste contêiner que vai ser a

nossa aplicação inteira tem acesso às funções de navegação então independente da tela que eu estou da componente que eu estou eu vou ter a possibilidade de pra outra tela quando eu clicar no botão enfim independente eu vou conseguir Navegar Porque toda a minha aplicação vai est em volta do navigation container né vai est e cercada vai est dentro do navigation container tá então nós vamos copiar isso aqui também o Import dele né E a gente vai fazer isso no nosso no arquivo we tsx que Como disse na aula passada ele é o ponto de partida

né É daqui que que a nossa aplicação inicia Então já vou colocar aqui né o navigation container então nós temos aqui nós estamos exportando uma função app né a componente do nosso app aqui tem essa View com esse texto e o status bar a gente vamos vamos começar a limpar isso aqui né a gente não vai precisar disso aqui então eu posso tirar esse estilo ao invés de ter a viio a gente vai ter o navigation container tá a tag abre aqui e fecha né esse texto a gente não vai precisar e aqui nós vamos

colocar um componente que eu vou chamar ela de routes que é basicamente as rotas que o nosso app vai ter então sei lá o nosso web lembrando um pouco do Web né ah vai ter a rota de produto vai ter a rota de detalhe vai ter a rota a gente pode pensar em tela né tela de produto tela de detalhe tela de de enfim todas as telas a gente vai fazer essa configuração em uma componente e importar essa componente aqui dentro do navigation container então aqui a gente já começa em Estrutura também pensar na estrutura

do app tá que basicamente o que que eu vou fazer aqui eu vou criar uma pasta na raiz chamada src que é onde vai ficar o código fonte aí o Source né da do aplicativo então tudo que for do aplicativo vai est ali dentro de src exceto os assets né que já tem uma pastinha aqui fora então dentro de src eu vou criar um arquivo chamado routes.tsx certo que é onde a gente vai vai fazer essa configuração dessas rotas tá então ele já instalou aqui no terminal vou rodar aqui o npm start e nesse arquivo

Rad tsx eu vou criar uma componente tá então no react né a gente essa ideia de componente né no no no curso de web a gente abordou isso de uma forma mais lenta mas a ideia da componente é meio que eu vou ter uma função no caso aqui do do tsx né quando a gente fala de jsx eh que é o JavaScript e XML né a junção dos dois tsx é porque a gente tá usando typescript mas é são basicamente funções que Retornam elementos visuais Então a gente vai estar sempre criando uma função que retorna

um componente visual algo visual e e isso é uma componente né então o nosso App tsx ele é uma função a função app que retorna esse navigation container com rout com esse status bar então isso aqui é uma componente né retorna essas tags né Essas tags lemra demais o HTML né então A ideia é essa né E também toda componente a gente costuma chamar e iniciar ela com a letra maiúscula o nome da função mesmo para questão de organização né Eu acredito que se a gente até fazer com letra minúscula o próprio react a própria

biblioteca vai reclamar porque é é meio que convenção saca então aqui no arquivo tsx eu vou criar uma função chamada route aqui eu já vou criar uma errow function né Essa função essa função vai retornar eu vou retornar aqui uma View Tá o que que é essa View a gente importa ela aqui do react Native o que que é a view é meio que um contêiner né é meio que algo e é uma tag que Vai disponibilizar algo para ser visualizado puxando do HTML a gente pode pensar na div né é uma tag que tipo

assim ela não tem Impacto nenhum visual eh a menos que a gente aplique estilos né mas é basicamente uma um contêiner que vai ter algo dentro tá algo visível então a componente routes né Eh eu vou exportar ela aqui depois que eu declar a função né aqui no final vou dar um Export default route tá então isso aqui é meio que o padrão meio que a a a a estrutura né básica de um componente é isso função retorna a algo visual e no final é exportada aqui a gente usa o Export default também para meio

que centralizar esses exports né fazer meio que algo ter um padrão na aplicação né Sempre todas as componentes começam com letr maiúsculas e eh tem a gente usa o Export default Beleza então eu vou salvar essa componente R assim só para mim conseguir importar ela aqui no arquivo app tsx então aqui em app tsx se eu clico aqui pressiono control e espaço ele já me sugere o Import aqui de dessa componente que eu acabei de criar né dessa função tá então a gente pode ver que aqui eu tô não tô usando mais esses imports aqui

ST sheet text View eu vou apagar para manter o mais clean possível então nós já temos aqui a componente routes né então dentro aqui dessa componente routes é onde a gente vai tá fazendo a criação aí do nosso stack Navigator E se a gente dar uma olhada aqui na documentação do react navigation a gente eu já deixei até a aba aberta aqui né Don Native stack Navigator aqui nós estamos em deixa eu fechar aqui ó esse menu lateral api reference né as referências da api aqui tem navigators e dentro Aqui tá o Native stack ou

seja tem até um GIF aqui não aqui não tem é no stack né de como esse Navigator se comporta né tipo Nós temos duas rotas aí né duas páginas duas telas e de acordo eu clico ele navega né Essa animação é tudo a biblioteca que gerencia tá E é basicamente isso né esse cabeçalho aqui com o botãozinho de voltar ali é tudo também a biblioteca que cria e que a gente vai estar trabalhando em cima disso tá então tem o stack Navigator e tem o Native stack a diferença deles é bem pouca mas o o

o Native stch Navigator ele é um pouco mais ele é mais compatível com a parte Nativa né com Android com IOS com web então a gente costuma usar ele ao invés do stack em si Tá mas e para usar ele aqui também tem o exemplo né de como que fica essa configuração desse navegador E também o que que a gente precisa instalar para usar né então lá a gente instalou o Core né meio que o as componentes as funcionalidades principais da do react navigation quando a gente fez aquele instal anterior e agora eu vou instalar

o navegador em que eu vou usar tá que é o Native stack Então aqui tem o npm insty reation bar Native stack eu posso copiar isso aqui aqui no vs code eu vou parar de novo aqui o processo vou fechar matar esse terminal né Abrir outro e colar esse instal aqui do react navigation Native stack E se a gente volta aqui enquanto ele instala a gente pode dar uma olhada como que é feito essa configuração né então ele importa uma função né Create stack Navigator da bi tecla e meio que executa ela tipo meio que

instancia essa executa essa função e armazena o retorno dela aqui numa função numa variável né atribui na variável stack e a partir dessa variável ele declara né Tipo ele tem a função my stack que aqui seria o nosso rout tá E aqui ele retorna um stack Navigator tá stack P naveg ator e dentro tem stack P screen né um stack Point screen para para cada tela né que seria cada rota dessa aplicação Então vai ter a tela home a tela notification a tela profile e a tela settings tá nesse exemplo dele aqui no nosso não

vai não vai ter por exemplo aqui a gente vai ter só duas telas bem simples só pra gente conseguir navegar de um para outro né a gente vai trabalhar de verdade em uma por isso que eu falei que a gente meio que não precisa não precisaria estar falando sobre isso né mas enfim eu vou copiar aqui esse Import essas duas primeiras linhas aqui né Vamos aqui no nosso código ele já rodou a instalação rodou V dar aqui um npm start então para ele já ir carregando o Expo e vou colar esses imports aqui certo então

a nossa componente rout ao invés de retornar uma View a gente vai retornar o stack ponto naveg beleza e dentro do stack navegate nós teríamos stack p screen e Aqui nós temos a gente olha na documentação nós declaramos um nome para essa Rota e a componente referente a essa rota Então esse nome ele tem que ser único tá então nós ter nós teríamos aqui o name products e a componente a componente de produto né que a gente não criou ainda então eu vou criar eu vou eu vou vamos criar essa componente de produto pra gente

ver isso aqui funcionando e aí depois a gente volta alterando para conseguir ver melhor a parte da navegação tá então aqui dentro de src eu vou criar uma pasta aqui chamada screens que é referente às nossas telas né as telas que a gente vai ter no projeto e que nesse caso aqui eu vou criar outra pasta chamada products products isso que vai tá o nosso a nossa tela de produto né onde a gente vai criar a componente da tela de produto então aqui dentro Eu vou ter um arquivo vou chamar isso aqui de index.tsx né

o tsx novamente é o o j o nosso jsx né a função que retorna algo visual Então vou criar aqui né const produ com P maiúsculo né é uma função essa função retorna vamos retornar uma View certo e dentro dessa View eu vou colocar aqui a tag text Beleza então nós temos né a componente que tem um View dentro da View um texto né a tag text que eu importei também no react que é um né um texto que vai ser exibido e aqui no final eu vou exportar né Beleza até aqui tudo tranquilo né

então eu vou importar aqui ó no meu stack screen eu vou importar a componente products certo e Salv isso aqui com isso aqui eu vou abrir aqui o meu emulador n eu dei o npm Start eu vou pressionar aqui a tecla a né para ele abrir no Android e com Android tá desconectado vou apertei R aqui no terminal para ele recarregar recarregou o app aqui no emulador vai fazer o build aqui e aqui nós temos né um Hello from products apareceu aqui um cabeçalho com o nome products né esse nome aqui é o nome que

eu passei no stack screen então a gente pode personalizar muito esse cabeç né inclusive tirar ele tá então a gente tem bastante flexibilidade aqui no que fazer né Por exemplo a gente pode passar aqui o options e esse propriedade options aqui ele é um objeto né Eu só Minimizar aqui o app enquanto a gente escreve isso e ele ele é um objeto por isso esses dois par de Chaves né O primeiro é da anotação aqui do do jsx O segundo é do objeto em si então aqui dentro tem muita coisa muita propriedade que a gente

pode passar então sei lá eu quero passar o title o título dessa tela não vai ser products vai ser Hello from header só pra gente ver mudando lá n mudou ali o título para Hello from header e sei lá eu não quero mostrar mais o o título né então aqui vai ter o header sh a gente pode passar false E aí para essa tela né para essa rota eu não vou ter cabeçal pode ver que ele suiu texto Ficou ali por em cima né na verdade por baixo da nossa status bar então ele realmente o

cabeç não tá presente né eu vou deixar o mais simples aqui pra gente prosseguindo certo então aqui dentro de products vamos fazer o seguinte eu vou criar aqui dois botões dois só um Vamos criar um um Button né aqui no react Native nós temos aqui a componente Button que eu importei aqui de react Native que é né um botão e nesse botão a gente tem que passar um título para ele né então eu vou chamar isso aqui de navegate se a gente volta aqui no app ó lá apareceu um botão com o título navegate aqui

consegue clicar nele né no nosso botão então quando eu clicar nesse botão vou querer fazer alguma coisa Que coisa é essa né Tipo o o no evento de clique né É bom a gente pensar em evento no evento de clicar eu vou executar uma função então aqui em buton eu tenho aqui a propriedade onpress na verdade não é Click é o clique é no web aqui é press onde eu pressionar o botão eu vou executar uma função então aqui no botão eu tenho aqui o atributo onepress e eu posso passar uma função que vai ser

executada essa função eu posso dar por exemplo o conso log Hello from console enfim se eu clico aqui navegate ó lá no console ó hello from console né se eu clico várias vezes ele printa várias vezes tá então quando eu pressionar nesse botão eu vou querer Navegar para outra tela para outra componente Tá então vamos fazer o seguinte para manter as coisas simples aqui e visto que a gente não vai ter uma uma segunda tela né uma segunda rota eu vou fazer o seguinte eu vou duplicar essa tela de products eu vou chamar isso aqui

de products 2 is isso é ridículo mas é um exemplo tá products 2 e a componente não vai ser a componente product eu vou fazer uma coisa aqui que é errado no react navigation que é declarar a componente em Line né O que ele chama aqui de inline component que novamente a componente é a função isso aqui é até interessante porque a gente consegue ver a flexibilidade que a gente tem aqui dentro do react né consegue fazer muita coisa aí eh a mesma coisa de formas diferentes isso que eu tô fazendo agora causa bastante problema

de performance mas eu tô fazendo só pra gente conseguir ter um exemplo ou seja essa rota products 2 ela a componente dela é novamente a componente é uma função que retorna a algo visual então aqui eu vou eu já declarei a função né nesse caso aqui é uma função anônima ela não tem nome eu só vou e aqui eu só vou retornar um text tá e vou falar aqui Hello from products 2 Tá eu vou importar aqui o text importou isso importou o text e só pra gente ter para onde Navegar Tá e agora que

eu tenho essas duas componentes registradas né a a products e a products 2 e nós temos um porém aqui que entra até no typescript eu não vou falar da questão do typescript relacionada a isso agora mas quando eu tenho uma tela registrada uma rota registrada ou ou seja uma componente que foi registrada Ou seja a componente products e essa componente anônima aqui elas recebem um dois parâmetros a mais que esses parâmetros são do react navigation tá o react navigation envia esses parâmetros a mais para essas componentes usarem então aqui em products né na componente eu

posso falar que essa função recebe aqui como parâmetro um objeto e dentro desse objeto vai ter a função chamada navigation tá Então na verdade aqui dentro vai ter um route e um navigation a gente não vai entrar muito a fundo nisso mas o rout a gente pode pensar que ele é um um objeto que define a rota que eu estou presente com detalhes da Rota que eu estou presente e naveg é uma função que eu uso para navegar né então se de produto eu quiser Navegar para product 2 eu posso usar o navigation e dar

lá navigation navegate enfim tem tem todo um an tipagem aqui tá e pra gente pegar essa tipagem né para entender melhor o que que tem dentro desse naveg O que que tem dentro desse rout a gente vai ter que voltar aqui na documentação para entender um pouco como funciona a tipagem das rotas que a gente tá trabalhando no react navigation tá então eu já deixei também a aba separada onde a gente fala um pouco aqui sobre typescript no react navigation que tá aqui em guides né se a gente olha aqui ó no menu lateral esquerdo

tem a opção que guides aqui vai ter muita coisa e tem aqui ó Type checking w typ script que é onde ele fala um pouco sobre como é feita essa tipagem é como a gente cria e e tipa as componentes de forma que a gente tem acesso à aquelas propriedades com a tipagem correta então resumindo aqui né eu não vou est passando em detalhes aqui na na documentação do react navigation porque vocês conseguiram perceber que já ela é muito extensa tá então eu já vou ir criando a a coisa da forma que deveria Beleza então

primeiramente o que que ele cria aqui ele cria um Type esse Type ele descreve o os parâmetros que a nossas rotas poderiam receber e eu não falei de parâmetro ainda mas o que o que a gente consegue fazer é basicamente eu quero navegar pra rota x e eu quero enviar o parâmetro X Y né Então nesse exemplo aqui ó desse Type ele tem a rota profile Ou seja a componente uma tela de perfil e quando ele navega para ela ele tem que passar um user ID um objeto com user ID que é um string tá

então esse tipo aqui tá descrevendo isso e a gente vai criar algo parecido pro nosso pra nossa componente né pro nosso navegador então eu vou até copiar isso aqui tá dessa forma que ele fez aqui e nós vamos fazer isso a gente pode fazer isso aqui no nosso arquivo de rout tá então Aqui nós temos a componente aqui em cima da componente eu posso criar aqui esse Type né aqui na verdade a gente não tem a tela profile o o nome da screen né É products então aqui seria products e de parâmetro que eu enviaria

no momento a gente não tem nenhum né até porque a gente tá criando o navegador ainda então isso aqui seria undefined eu não eu não vou enviar nada né e a com esse Type criado vamos voltar lá pra gente dar uma olhada ele tem esse Type e quando ele cria aqui ó create stack Navigator ele tipa a criação desse stack Navigator com esse Type que a gente acabou de criar tá então esse typ aqui V criar ele aqui antes de criar n de executar o Create Create Native ST Navigator né lá no exemplo ele tá

usando createch mas não tem diferença aqui dentro eu vou passar o root stack param list que é esse tipo que eu acabei de criar com isso aqui feito é interessante a gente tá fazendo isso tudo no mesmo arquivo também deixa eu fechar aqui o terminal mas quando a aplicação cresce né esse tipo aqui que descreve as rotas ele vai ser movido para outro lugar né para não ficar ocupando todo esse espaço aqui mas olha só quando eu criei esse quando eu passei essa tipagem pro Create Native Tech naveg ele já reclamou aqui da Rota da

tela products 2 porque esse esse nome né Essa rota não tá descrita no meu tipo então para ele parar de reclamar aqui ó eu teria que criar um products 2 Olha lá você já assumiu o erro então é até interessante a gente ter essa tipagem né novamente a importância do typescript né é a gente forçar meio que forçar realmente um tipo correto seguir um padrão eh ou de nome ou de tipo de dado ou enfim até facilitar o trabalho porque a gente vai conseguir ver o que tipo é tal coisa sem precisar Executar a aplicação

tá então voltando aqui a gente tem esse Type aqui que vai descrever essas nossas rotas E com isso aqui feito vamos voltar aqui né Aqui tem um exemplo dele usando definindo um Navigator aqui a gente não vai a gente não vai a gente já fez o Navigator nosso a gente não vai entrar muito a fundo nso agora mas o o ponto que eu quero chegar é aqui ó tip as telas né então a gente criou esse esse tipo Global aqui antes para chegar aqui na tela e conseguir fazer a tipagem da tela que eu estou

trabalhando que seria se resumiria a esse Type aqui que ele cria esse probs Native stack screen props Passa esse tipo que a gente acabou de criar e uma segunda string é aqui vai ficar confuso então eu vou copiar essa linha tá e vou abrir aqui a nossa tela né a tela de produtos Beleza vou colar aqui esse props então Native STX scen props né tá dando um erro aqui porque eu tenho que importar isso aqui a gente importa Minimizar aqui o app isso aqui a gente importa do próprio react navigation e dentro olha aqui ó

o nosso root stack param list que é o tipo que a gente a gente acabou de criar que descreve o nosso navegador então eu vou ter que exportar ele então aqui eu vou dar uma Export nesse meu Type né nesse hottech param list para mim conseguir importar ele lá na tela de de produto né então eu vou importar ele aqui e uma vez que eu importo ele essa segunda string aqui é basicamente onde eu vou falar qual tela que eu tô tipan né Qual tela que a gente tá agora se eu dou aqui um contra

espaço ele já me sugere né essa tela aqui é a tela de produto tá product então eu falo aqui entre aspas eu passo aqui a string product que é o mesmo nome da da tela que eu acabei de criar né da Rota que eu criei e aqui eu tenho um tipo definido esse tipo baseado nesse meu hottech param list tá pronto para ser passado pra minha tela né então a tela products ela vai receber um objeto tá um objeto como um objeto de de propriedades né E esse objeto é do tipo props que eu acabei

de criar então já assumi o erro né não tem mais erro aqui e aqui se a gente agora a gente pode usar Tipo se eu dou um rout ponto ó lá ó tem um Key um name param e pef ou seja o nome da Rota aqui a chave relacionada a essa rota a essa página né a essa tela né página a gente pensa mais no web os parâmetros Lembra que eu falei que os parâmetros são undefined mas se eu tivesse aqui sei lá um user ID alguma coisa ele estaria tipado aqui também tá esse pef

também tem tem aqui também aqui seria o o o caminho a gente pensa no pef como se fosse no web Mas enfim não não Vamos Bagunçar muito não e dentro do navigation olha aqui ó navigation que é esse segundo parâmetro se eu dou navigation ponto nós temos várias funções tá várias funções e a que a gente vai est usando aqui é o navigate ou seja navigation ponto navegate eu posso Navegar para outra tela tá E aqui quando eu passo eu tenho que passar né Qual a tela que eu vou navegar E como que ele sabe

qual tela que eu posso Navegar do nosso ro por causa do nosso rtech param list então aqui vai ter products e products 2 né então como eu tô em produto eu vou navegar aqui para products 2 só pra gente conseguir ver ele navegando e eu vou navegar quando eu pressionar o meu botão navegate então ao invés de dar um conso log eu vou executar aqui o navigation navegate pra tela product 2 então eu salvo isso aqui tudo vamos ver aqui no terminal Vou reiniciar aqui o app o app tá aí carregado ele tá dando esse

erro aqui porque eu estou criando uma aqui no rout né eu tô criando uma componente inline n componente a função anônima isso aqui tá errado tá a gente vou fazer o seguinte vamos criar uma outra componente tá uma outra tela Então vou criar aqui uma pasta né vou chamar isso aqui de details eu vou copiar esse meu index só pra gente não perder muito tempo aqui digitando esse index de de produto e vou colar Cadê o meu paste aqui em details vou só trocar o nome da componente né ao invés de products vai ser details

vou exportar componente de Tails aqui no meu hottech par eu vou ajustar né porque agora não é não é mais product2 é details né vou ter a tela de produto e a tela de detalhe então ele vai reclamar aqui porque o nome que eu passei é product 2 não existe product 2 né existe details e a componente ao invés de ser essa função contexto essa função anônima né vai ser a componente de teus que eu acabei de criar e vamos aqui de teus só pra gente corrigir aqui porque ele tá reclamando lá ó ele tá

reclamando aqui do nome de teus porque dentro da componente dentro da tela de detalhes eu tô falando aqui no início que essa tela é a tela de produto né o tipo aqui né com o nosso nch screen prop estô falando que esse tipo é product mas essa tela não é tela de produto ela é a tela de de teus tá parou de dar erro aqui no routes Vou salvar eh e aqui ao invés de Navegar para product 2 vou navegar de volta para produto então aqui é Hello from details e lá na outra tela vai

ser Hello from products né daqui eu vou navegar para details então vai ficar um vai e volta né detalhes eu navego para para produto de produto eu navego para detalhes tá vamos salvar isso aqui tudo e deve ter bagunçado a cabeça de vocês completamente aí agora né com esse vai vem mas resumindo eu criei uma outra pasta de teus uma outra componente chamada de teos que ela é bem parecida com a que a gente tinha de produto só que muda a tipagem né mudamos os tipos aqui e dá de detalhe eu navego para produto e

de produto eu navego para detalhe então olhando aqui no no nosso emulador tá eu tô aqui ó na tela de produto vou clicar em navegate vou PR de Tails e olha lá ó já tem a opção de voltar o o botãozinho de de voltar né no nosso cabeçalho mas se eu clico em navegate eu volto para products clico de novo em navegate vou para detalhes eu posso clicar aqui cima e voltar on em detalhes eu vou voltar para produto navegate enfim tá indo e vindo né então a gente conseguiu fazer esse fluxo aqui de navegar

de ir e vir né de uma componente para outra e eu tô pensando eu acho que vai ficar mais interessante até a gente parar essa aula por aqui né a gente ficou aqui só no teórico mesmo e na próxima aula a gente vai fazer o visual Acho que até interessante a gente separar essa parte de estilização da parte de regra porque a aula vai ficar a aula a próxima aula né vai até porque essa aula não vai ficar se a gente for fazer isso ela vai ficar com quase Du horas né então vamos cortar aqui

vamos parar aqui e na próxima aula a gente vai tá fazendo toda a parte visual né só voltando aqui pro XD pra gente ver realmente o que a gente vai fazer é criar esse cabeçalho e criar Esse borom naveg aqui esse esse esse menu inferior tá com essas duas opções e a gente vai falar dos ícones também tá como que tá trabalhando com ícones aqui na no react Native Então vai ser basicamente ícones e estilização Tá certo então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário

logo abaixo e é isso aí muito obrigado e até a próxima [Música]