Criar aplicativo com React Native IA profissional do zero - AULA 02 🔥

fala Turma seja muito bem-vindo a nossa segunda aula aqui do nosso app gerador de dietas e agora a gente vai pra parte do mobile então na nossa primeira aula se você caiu de paraquedas se você não fez a primeira aula vou deixar o link em algum lugar aqui embaixo ou na descrição para você fazer a primeira aula por quê Porque lá a gente faz toda a parte do backend onde a gente cria o nosso backend comunica com uma ia do Gemini e a gente também faz a parte de geração de uma dieta com base usando

né a ia E aí a gente utiliza essa nossa API e aqui dentro de um aplicativo a gente vai utilizar essa api essa nossa api com a ia para poder gerar Então a gente vai pedir os dados do usuário e depois vamos gerar a dieta aqui beleza então faz lá a primeira aula e também faz a aula de configuração com react Native que é como criar um emulador se você quer rodar com o emulador ou Como criar o seu primeiro aplicativo com Expo por quê Porque a gente não vai passar a parte de configuração a

aula tá aqui embaixo Aqui como a gente falou lá na primeira aula então bora lá primeiro passo aqui então nessa aula a gente vai criar desde o zero Agora toda a parte do react n um typescript desde o Zero Onde a gente vai passo a passo criando agora o aplicativo e unindo também depois com a nossa api que é usar a nossa api que comunica com lá a ia e devolve pra gente né com base nos dados do usuário a dieta gerada e a gente vai consumir e mostrar aqui então vai ficar sensacional Então já

curte aí compartilha com seus amigos e bora começar que o projeto tá cara incrível então a gente já vê aqui que eu vou ter aqui Quatro páginas tá a gente vai ter a nossa página aqui de gerar dieta que é uma página inicial de boas-vindas ali bas basicamente né e o cara vai clicar depois ele vai pra nossa primeira parte do formulário onde ele vai preencher o nome onde ele vai preencher o peso atual a altura a idade depois a gente avança né Pega os dados que o usuário digitou guarda em algum local ali pra

gente poder usar depois avança pra segunda parte na segunda parte a gente vai falar olha me manda qual que é o seu sexo me manda qual que é o seu nível de atividade né moderado que pratica muito exercício e depois manda também qual que é o seu objetivo emagrecer hipertrofia definição a gente vai definir lá depois E aí a gente vai clicar em gerar dieta vamos comunicar com o nosso api com o nosso serviço que comunica com a nossa ia e devolve pra gente então com base nessas informações a dieta para ele e aí a

gente vai montar aqui na tela como a gente quiser né então a tela a gente vai montar dessa forma aqui que vai ficar bem legal vai poder compartilhar no WhatsApp com seus amigos então vai ficar sensacional bora começar então pra gente fazer isso aqui primeiro vamos criar um um emulador aqui ó deixa eu até abrir o meu Android Studio vou vir aqui ó primeiro é importante vou dar uma repassada rápida tá dentro se você vai usar um emulador é importante que você tenha aqui ó no SDK Manager você tenha esse cara aqui ó o Android

aqui ó Android 14 tá vendo que ele tá aqui ó p34 ele tem que tá com status ou com update Quer dizer então que você já tem instalado só pode atualizar se ele tiver com esse status not installed aqui ó tá vendo se ele tiar essa versão 14 com not install você clica para marcar e vai em apply para instalar Beleza depois disso ó é importante que você crie um emulador Então vamos criar o nosso emulador se você não vai rodar com o emulador porque a gente vai usar o Expo você pode rodar direto no

seu celular igual a gente já mostrou na aula de configuração aí você pode né estando na mesma wi-fi rodar no seu celular sem precisar tá com cabo no meu caso eu vou usar emulador tá então o que eu vou fazer aqui ó deixa eu só deletar uns que eu tenho aqui até deletar aqui e eu vou criar então ó no maizinho vou criar um novo emulador eu vou usar aqui tá é o Pixel 3 com a Google Play vou dar aqui um next e eu vou selecionar aqui no recomendados tá essa versão ó Upside Down

cake versão 34 E aí tem aqui ó ó Android 14 entre parênteses Google Play vou dar aqui um next vou dar aqui um finish E aí ó eu vou abrir ele né então vou rodar o meu emulador Zinho aí vamos aguardar ele rodar vou puxar aqui pro lado né como é a primeira vez que eu acabei de criar o emulador Vai demorar um pouquinho para abrir Então deixa ele abrir E aí eu volto agora que o meu emulador já abriu vou fechar aqui e deixar ele aberto pra gente poder começar o próximo passo Vamos criar

então o nosso aplicativo aí com react Native e usando o Expo então agora vou vir aqui dentro da nossa pasta tá aqui eu tenho o nosso backend deixa ele ali no cantinho eu vou abrir o CMD aqui dentro ó vou abrir o CMD aqui dentro não tô dentro ó da pasta do backend só tô aqui dentro da pasta então aonde que você quer criar não cria dentro de pastas com assentos com caracteres especiais tá então abre aí o CMD Onde você quer criar E aí a gente vai rodar o comando deixa eu até copiar aqui

e a gente vai rodar o nosso comando aqui npx Create TR Expo tro app @ latest E aí espaço o nome do projeto eu vou chamar aqui de mobile né que é a parte front end aí que é o nosso aplicativo Vamos dar um enter ele vai criar toda a estrutura todos os arquivos que a gente precisa para poder então rodar aí o nosso aplicativo Então vamos aguardar um pouquinho e aí eu volto Maravilha criado aqui ó o nosso projeto tá agora se a gente olhar dentro aqui ó ele criou a nossa pastinha mobile tem

toda a estrutura do reaction Native Vamos abrir dentro do vs code então vou abrir aqui ó vou dar aqui um CD mobile Então agora eu acessei a pasta do nosso aplicativo E aí eu vou dar aquele code espaço ponto né ou abre aí dentro do seu vs code deixa eu abrir aqui que abriu do lado puxar aqui pra gente poder ver melhor e vamos lá então Então vamos lá por enquanto né o react Native com o Expo ele tá vindo uma estrutura que ele já vem com alguns arquivos e bibliotecas instaladas Primeiro vamos dar um

reset nisso aqui ou seja apagar as coisas desnecessárias E aí a gente vai entender o que que é cada coisa aqui pra gente poder começar então para isso dentro do nosso package P Jon que é onde tem as dependências onde tem as configurações onde tem também os scripts pra gente poder rodar pra gente poder é um lining ou testes então aqui no nosso caso ele vem com um script chamado reset pra gente tirar alguma as coisas que a gente não vai usar então eu vou pegar aqui e vou dar um npm Run espaço reset tro

Project tá E lembrando tem que tá o CMD dentro da pasta do projeto que você criou Então vou dar um enter aqui ele já deu reset maravilha se eu Minimizar aqui agora deixa eu fechar essa pastinha deixa eu fechar aqui pra gente poder entender vamos ver o que que tem em cada coisa vamos dar uma limpada melhor dentro dessa pasta hooks aqui ó a gente não vai usar Então vou apagar ela aqui dentro aqui da nossa pasta constantes ele ele vem aqui com um arquivo chamado colors.ts que nada mais é com um arquivo por exemplo

centralizando as cores do nosso aplicativo então por exemplo color color de background de texto color de é vermelho que a gente vai usar Então nesse caso a gente vai usar isso aqui só que a gente vai renomear aqui ó Export const a gente vai colocar com c minúsculo Colors e também vai renomear esse arquivo aqui ó Opa Deixa eu tirar minha câmera renomear ele para Colors com c minúsculo Beleza então renomeia aí e eu vou apagar isso aqui ó fechar aqui deixa eu apagar isso aqui e a gente vai ter as nossas cores Então vou

copiar essas cores aqui ó e vou colar Tá então nada mais é do que eu tô falando aqui olha a cor de background é essa cor de fundo aqui a cor por exemplo White É cor branca a cor verde é essa cor verde que nada mais é do que essa corzinha Verde aqui então só pra gente né não precisa decorar o numerozinho ex decimal da cor então a gente tá falando qual que é as cores do nosso Wap porque a hora que a gente for desenvolver e depois ah Mateus Decidi mudar meu aplicativo agora o

fundo não vai ser essa cor Vai ser branco aí você vem no background muda a cor aqui em qualquer lugar que usar essa cor de background vai sofrer essa alteração porque tá tudo Centralizado aqui então a gente vai usar as cores aqui beleza então tira essas duas aqui de cima esses comentários já temos as nossas Colors salva aqui o arquivo perfeito tá que mais que a gente pode fazer dentro da pasta components ele vem com vários componentes que a gente vai recriar tudo do zero os nossos componentes Então dentro da pasta components ó pode selecionar

todos ó segurando control seleciona esses componentes aqui ó dentro da pastinha components vou dar aqui o botão bot direito Deixa eu tirar minha câmera aqui né botão direito delete vou deletar esses componentes ó dentro da components ainda tem uma pasta test vou deletar dentro aqui ó da pasta components ainda tem uma navigation vou deletar também tá então ficou a pasta components sem nada ali dentro da pasta assets aqui a gente vai ter algumas coisas como a própria fonte ele já vem com uma fonte instalada ele vem também com uma pasta images que vem com o

ícone por exemplo se você fosse publicar ele vem também com a Splash do aplicativo né aquela tela de inicial quando tá carregando e também a gente vai abrir ó essa pastinha aqui ó Revel tá então a gente vai abrir ela aqui e a gente vai colar eu vou deixar o link para vocês baixarem aí da nossa logo do aplicativo que é essa logo aqui então só você baixar a imagem deixa eu até copiar a minha aqui que eu não sei onde tá achei ela aqui e eu vou colar ela aqui ó então colei a imagem

aqui dentro show de bola fechou essa pasta então agora aqui dentro do assets são os assets né as imagens se a gente tivesse fonte se a gente tivesse qualquer outra imagem a gente pode colocar aqui beleza esse App exemple aqui a gente pode deixar ele no cantinho aqui que são exemplos caso a gente queira e dentro da pasta app que é a pasta mais importante que a gente tem aqui então a pasta app nada mais é aqui dentro que temos dois arquivos o index.tsx E também o arquivo layout.txt SX nada mais é do que a

nossa página inicial vamos rodar então o nosso aplicativo pra gente ver isso aqui funcionando então agora que a gente limpou o que precisava vamos vir dentro do nosso CMD ó dentro do CMD que eu tô dentro da pasta do aplicativo e a gente vai rodar o nosso comando npx espaço Expo espaço start rodou Esse comando aqui Dá um enter maravilha aí e aguarda ele carregar aqui então ele vai mostrar o QR Code né como a gente mostrou lá na aula de configuração se você quer rodar o seu aplicativo direto no seu celular sem ser com

emulador Baixa o aplicativo do Expo go dentro do seu celular né lá na loja da Play Store da Google da da Apple Store e aí abre a câmera e aponta pro qrcode tando na mesmo wi-fi ele vai abrir o aplicativo aí no nosso caso eu vou usar emulador então ele fala olha Mateus se você vai usar o Android aperta a tecla a do seu teclado se você tivesse no Macbook e fosse rodar no simulador de iPhone ele apertar aqui ó para IOS e aperta acho que a tecla I ele mostra aqui então vou clicar tecla

a pronto abrindo no Android ele vai baixar lá o Expo e vai instalar Então tá instalando o aplicativo aí ele vai rodar aí pra gente tá então só aguardar tá rodando aí Maravilha show de bola vou Minimizar E olha que sensacional deixa eu clicar aqui no fechar então quando a gente roda o nosso aplicativo ele já vem aqui o aplicativo com o Expo Hoje em Dia com o Expo router que nada mais é do que uma biblioteca para trabalhar com navegação de páginas então a gente já tem roteamento né o que a gente quer a

gente não quer ter mais de uma página então eu quero ter roteamento Então a nossa primeira página que é essa que tá aqui ó a cara Inicial aonde que é é o nosso app e dentro do app onde vai ter as nossas páginas as nossas rotas que a gente vai chamar aqui tá então aqui dentro ó a gente tem o nosso index.tsx que é exatamente essa cara esse cara que é a página home você percebe que eu tenho aqui ó Edit se eu vier aqui dentro e eu tirar o que tem dentro da tag de

Text e eu escrever teste algo e eu dei um control S né para salvar o arquivo ele já atualiza em tempo real e olha lá sensacional né então agora vamos começar do zero pra gente começar aqui que que a gente precisa fazer primeira coisa que eu quero é Opa se eu voltar aqui eu não quero um reader tá vendo que a nossa página por padrão ela tem esse reader Zinho aqui eu quero tirar esse cara então dentro do nosso underline layout que é quem configura a nossa rota o tipo da Rota o que que vai

ter o nome dela o nome do parâmetro que ela vai ter então Aqui começa o name index a gente pode deixar como index não tem problema e eu vou só dar um enter aqui ó tá dar um enter Zinho aqui vou dar um Tab e a gente vai passar uma propriedade ó chamada options abro duas Chaves aqui dentro e eu vou falar olha eu não quero o reader então reader sh com S maiúsculo dois pontos falso se eu salvar isso aqui ó acabou o reader da nossa página home Beleza então agora tiramos o heer que

é o que eu queria show de bola vou fechar esse arquivo e vamos começar a entender isso cara então ó dentro do arquivo index eu vou apagar todo esse nosso arquivo aqui pra gente começar então o react Native igual react ele é baseado em Componentes porque ele utiliza a biblioteca react ali dentro então tudo basicamente a gente consegue criar um componente e reutilizar o que que poderia ser um componente Mateus então por exemplo eu posso ter aqui e a gente vai ter um componente de reader tá vendo aqui ó que esse reader ele é diferente

e esse reader eu utilizo na página um aqui da do step eu utilizo nessa segunda página do step também então eu posso ter um arquivo que tem uma página que tem um layout que tem uma funcionalidade que só faz isso e eu posso utilizar ele de várias formas Então posso usar ele aqui no step um posso até personalizar ele que quando eu chamar ele eu quero que mostre esse título quando eu chamar ele aqui eu quero que mostre esse título então a gente pode personalizar os componentes também pode reutilizar da forma que a gente quiser

então bora criar o nosso primeiro componente que vai ser a nossa página de home que vai ser esse cara aqui ó Então dentro do index.tsx a gente vai começar primeiro a gente começa então cortando alguns componentes que o react Native traz pra gente poder utilizar como text como uma View a view é que uma um espaço em branco uma caixinha pensa que a gente pode colocar coisas dentro uma image que é o que a gente quer utilizar para colocar a logo então dentro do react Native eu vou importar aqui ó uma View cuidado tá que

o reaction Native ele é case sensitive Ou seja a view ela tem o v maiúsculo e tem que ser dessa forma vírgula o text ele tem que ser T maiúsculo vírgula o image tem que ser o i maiúsculo tá então vírgula vou importar também o Style sheet que a gente já vai conhecer também com s do Style e o sheet também com S maiúsculo Beleza então criamos o Import aqui e agora a gente vai criar o componente então Export default então tô exportando esse componente por padrão tá E aí o nome de componente sempre precisa

ser primeira letra maiúscula então Export default function Qual que é o nome do meu componente vou chamar ele de index aqui ou Home tanto faz porque é a primeira página abre fecha o parênteses e abre e fecha o chave primeira letra maiúscula porque ele é um componente dentro aqui então a gente vai dar um return abre e fecha o parênteses e dentro do return vai a parte visual o que que eu quero retornar o que a gente chama aqui de jsx Então qual que é a interface o que que eu quero retornar Olha eu quero

retornar uma View Então pensa que a view é se eu salvar isso aqui ó nada mais é do que uma espaço em branco na tela ó não temos nada dentro da View se a gente olhar o quê eu quero trazer uma imagem embaixo eu quero um título embaixo eu quero outro texto embaixo eu quero um botão então a gente quer a imagem aqui dentro então vírgula abre abre e fecha aqui ó image Fecha aqui nela mesma tag e para ela para renderizar uma imagem eu preciso passar algumas propriedades como o sece abro e fecho aqui

Chaves requir Então abre e fecho parênteses e aqui dentro de Aspas eu passo o caminho até a minha imagem aonde é que tá a nossa imagem tá dentro de assets image e tem a logo aqui ó Então vamos lá ponto ponto barra para descer uma pasta acessar assets barra images bar logo.png que é o nome da sua Nossa logo aqui beleza então salvamos aqui ó olha quem que já tá ali já tá Nosa imagem ali depois eu quero o quê Eu quero um título né então vou colocar aqui um text e a gente não pode

dentro do react n escrever textos fora de tag de text então por exemplo eu não posso vir aqui e escrever algum texto fora da tag de text se eu salvar isso aqui aqui ó ele vai falar olha textos ou Strings precisam ser renderizados dentro de uma tag chamada text então se eu colocar aqui agora o nosso text maiúsculo aqui com o t maiúsculo eu vou dar um enter aqui eu vou colocar o nosso dieta dieta pon ai né que esse é o nome ou ia tanto faz olha lá agora a gente pode usar Então eu

acho que é isso né é o nosso título Ah mais um texto e um botão Então vamos colocar aqui mais um texto aqui embaixo Beleza deixa eu só pegar o texto né para não ficar escrevendo texto aqui Vamos colocar aqui o nosso texto beleza e eu quero também embaixo um botão pro botão a gente vai usar aqui ó vírgula vamos importar um carinha chamado pressable Tá então vamos lá vou colocar aqui o nosso pressable aqui beleza dentro Eu quero colocar um text que vai ser o nosso gerar dieta perfeito gerar dieta Então vamos salvar isso

aqui ó olha que bacana então agora a gente pode melhorar um pouco então a gente tem o qu uma tela que dentro a gente vai montando a nossa interface no react Name com esses componentes que o react Native dá pra gente como a gente viu o text a Image é o pressable que é um botão que a gente já já vai mexer nele né mas a gente precisa melhorar a parte visual E para isso a gente pode passar propriedades de estilo Então a nossa tag de de View aqui por exemplo ela tem uma propriedade chamada

Style igual abre fech o Chaves e aí eu posso passar de duas formas primeira abre fech o Chaves e passo o estilo já em linha então por exemplo vou passar aqui a view vai ter uma col um background color tá vendo aqu elele sujeito iiu aqui para mim dois pontos abro o aspas aqui eu quero colocar Red se eu salvar isso aqui ó olha lá a nossa View que é a nossa caixinha dentro tem os itens ela tem o fundo vermelho tá mas a gente não precisa ficar passando em linha a gente pode criar um

grupo de estilo então para isso sty sheet eu posso criar fora do componente o nosso conch Styles igual a Style sheet pon Create abre o parênteses e abro Chaves aqui dentro tá cuidado ó sty o sheet é com S maiúsculo Beleza então a gente vai criar um grupo de estilo que os nossos estilos as classes basicamente vão ficar aqui então aqui dentro vou criar uma chamada por exemplo container dois pontos abre e fecha os Chaves e eu vou falar olha ela vai ter um background color e eu vou colocar aqui por exemplo Blue beleza cuidado

mais uma vez tá o background color tem que ser junto o c do background color é maiúsculo cuidado com isso aí tá então criamos um grupo de estilo ó chamado container container dois pontos abre e fecha os Chaves e aqui dentro vai toda estilização para ela então agora eu posso usar ela olha que legal vou vir aqui Vou apagar aqui ó Style abre e fecha os Chaves uma só agora Styles ponto Styles por quê Porque a gente deu o nome aqui de Styles então Styles ponto e a gente chamou de container Então essa View ó

tá recebendo o que a gente passar aqui dentro Fechado então vamos agora melhorar um pouquinho vamos acelerar um pouquinho então ao invés de usar essa cor aqui a gente não tem as nossas cores definidas lá dentro de constantes e Colors cor de fundo o branco então a gente tem aqui ó então eu posso fazer o quê eu posso importar o nosso arquivo então P abre e fecha Chaves from pon pon barra Vamos acessar a nosso pastinha chamada constantes barra Colors E aí aqui dentro de Chaves ó se eu der um control espaço eu já posso

pegar nosso Colors e Olha que bacana peguei o nosso Colors e agora eu posso usar ao invés de usar um Blue eu quero usar o nosso Colors P background se eu salvar Olha a nossa cor lá legal Mateus Só que essa área aqui ó eu não quero que ele fique aqui né então eu falo olha pega toda a tela inteira que você conseguir então eu vou vir aqui ó background color vírgula e eu vou passar uma propriedade chamada Flex 1 então o Flex 1 vai fazer ele pegar tentar expandir pra tela inteira dentro do react

Native a estilização a gente tem ativado já por padrão o flexbox então a gente não precisa igual na web daquele display Flex né aqui dentro já tem o display Flex ativado então o Flex 1 quer dizer ele vai pegar o tamanho da tela inteira e agora a gente pode começar a estilizar o restante então eu quero fazer o quê eu quero centralizar tudo que tá na tela também então vou vir aqui como a gente já tem o Flex Box ativado fala olha eu quero dar um just fy justify content Cuidado que o c é maiúsculo

eu vou passar dentro de aspas aqui Opa Subiu sem querer vou passar aqui o nosso Center e olha lá centralizou aqui verticalmente beleza eu quero dar um vírgula Aline items pra gente agora alinhar horizontalmente o centro também o i é maiúsculo ó salvei pronto temos tudo no centro agora né tá ganhando o cara então agora que mais eu quero tamanho diferente então bora começar isso aqui deixa eu tirar aqui para não atrapalhar né vou Minimizar aqui ó só para ficar maior para vocês beleza eu quero também vírgula tem um pading left ou seja um espaçamento

interno caso o texto Chegue aqui no começo ó de 16 por exemplo e um pading WR de 16 também para não garantir que não vai nenhum texto grudar aqui na borda do do nosso celular beleza depois disso O que que mais que a gente vai ter a gente vai ter aqui o nosso título tá o título se a gente olhar ele tem uma corzinha diferente então a gente tem o nosso dieta Vou apagar aqui ó deixar o dieta dentro do dieta aqui eu vou mais mais um text e aqui eu vou ter o ponto ai

pra gente conseguir ter cores diferentes tá E aí esse primeiro eu vou passar então a propriedade ó Style Styles ponto vamos chamar de title aqui embaixo a gente vai ter também o estilo vou dar aqui um Style vou colocar em linha color dois pontos nosso Colors P White cuidado aqui ó duas Chaves aqui dentro pra gente colocar um estilo em linha passar direto a gente coloca duas Chaves quando a gente quer usar o nosso grupo de estilo é Style abre uma chave só e a gente acessa o nosso arquivo aqui de Styles nosso grupo tá

perfeito aqui embaixo a gente tem a nossa descrição vou dar aqui também já um estilo para ela Style abre fecha o Chaves Styles ponto vamos chamar depois de text beleza e o nosso botão aqui também eu quero dar um estilo para ela então Style abre fecha Chaves Styles ponto vamos chamar de Button beleza E também o nosso texte aqui ó Style Styles pbon texte com T maiúsculo Beleza então a gente criou os grupos aqui mas ainda não colocou aqui embaixo Então vamos começar a criar primeiro no nosso title né Vamos aqui embaixo ó vírgula title

dois pontos abre e fecha os Chaves sempre para criar um grupo de estilo precisa ter uma vírgula E aí o nome dois pontos e abre fecha as chaves E aí aqui dentro o nosso estilo então aqui dentro o que eu quero fazer vou dar um Font size de uns 34 pra gente ver ó vamos aumentar colocar até uns 36 vírgula Font o aqui como bold então quero deixar ele beleza vírgula eu quero colocar aqui uma color Colors P Green quero acessar aquele nosso Green ó olha que legal né já ficou muito massa e a gente

já deixou o ponto ai né aqui como Branco Então olha que legal já ficou o que a gente queria Vamos criar um grupo chamado text vamos lá embaixo vírgula text dois pontos abre e fecha os Chaves o text se a gente olhar ó ele é um pouquinho mais tem mais espaço na esquerda e direita e ele é branco então vou vir aqui ó Font size vou passar para ele uns 16 cuidado aqui o Font size o s é grudado e é maiúsculo vírgula eu quero passar também color dois pontos quero mudar a cor acessar o

nosso Colors ponto eu quero usar o nosso White então se eu salvar isso aqui ó olha que legal já tá ali só que eu quero dar um espaço maior na esquerda e direita então vou falar aqui para ele ó vírgula eu vou passar uma largura então uma width de 240 para esse texto então ele tem uma largura máxima aqui ó que ele definiu dessa caixinha onde vai ter o texto de 240 e eu quero centralizar o texto ó para não ficar assim né então vírgula text align dois pontos abro aspas e vou Pass passar aqui

ó Center Então olha lá já centralizou legal né que mais eu quero distanciar um pouquinho de cima e de baixo então distanciamento externo vírgula Margin top Vou colocar aqui uns oito e vírgula Margin Bottom Vou colocar aqui uns oito também que mais que eu quero agora a gente tem o nosso botão né e o botão text Então vamos lá vírgula buton o nosso Button ele vai ter aqui um background color dois pontos Vou acessar aqui o nosso Colors P Blue Olha lá que legal eu quero que ele pegue a larginha inteira então vírgula with 100%

então vou passar dentro de aspas 100% então ele vai tentar pegar 100% da largura da tela Maravilha e vírgula eu quero passar também uma altura para ele de uns 40 para ter um tamanho do botão vírgula border radius Ou seja a redonda PR minha borda colocar uns quatro aqui ó para ficar legal e também centralizar o texto né vertical e horizontal ficar bem aqui e como a gente tem o flexbox eu posso muito bem vir aqui dar um justify content ó como Center dentro de aspas ele já centraliza no vertical e agora vírgula align items

como Center e ele é a linha horizontal Então tá tudo no centro do botão legal demais né e agora vou dar mais uma margem aqui vou dar um vírgula Margin top Vou colocar aqui uns 34 então PR distanciar bastante aqui do nosso textinho para não ficar grudado tá E falta o botãozinho dentro né o texto Dentro ó que a gente deu o estilo de buton text Então vamos lá vírgula Button text dois pontos abre e fecha o Chaves vou passar aqui uma color dois pontos Colors P White que eu quero que ele tenha a cor

branca vírgula Font size vou passar aqui um 16 e vírgula Font nosso né que é o peso da fonte aqui ó Font como P salvamos aqui agora beleza então ó sensacional agora a gente já criamos aqui a nossa tela inicial Por enquanto nada é funcional Então a gente tem aqui ó um botão que não faz nada mas a gente já começou a estilizar tá um pouquinho mais devagar vamos agora evoluindo nível né então a gente criou aqui o que que eu quero que aconteça agora qual que é o fluxo né se a gente parar para

pensar eu quero que quando eu clicar aqui ele navega a gente pra tela de formulário Então vamos criar uma nova página por enquanto a gente só tem uma né que é essa página index Então como a gente vai querer criar uma nova página essa página fica dentro da nossa pasta app então aqui dentro que é roteamento lembra então dentro da pasta app eu vou criar um New Folder vou chamar aqui por exemplo Ah vamos dar o nome de step dentro dessa pasta step que eu criei dentro ó app criei uma pastinha step E aí aqui

dentro New file vou chamar de index.tsx beleza vamos criar aqui o arquivo então então pra gente criar um novo componente Export default function vamos chamar aqui ó step com S maiúsculo abre o parênteses abre fech Chaves também E aí return abre fecha parênteses E aí o que que eu quero retornar visualmente tá para isso ó a gente pode ir lá vou até vir aqui no nosso index ó só pra gente não perder tempo vou copiar os imports que a gente vai reusar esses imports né então vamos ter o Import da view do text do image

do Style sheet do pressable e das cores também só que aqui as cores a gente pode até conferir se tá importado D certo ó ponto ponto barra ponto ponto barra Agora sim eu consigo acessar constantes e barra pego a nossa Colors Beleza agora vamos criar aqui por enquanto uma View Cuidado que o v é maiúsculo abre e fecha a nossa tag e dentro Eu quero colocar um text aqui por exemplo teste página e eu vou salvar isso aqui e agora que a gente tem uma página nova a gente tem que vir aqui dentro do nosso

layout que é a configuração das nossas páginas né onde a gente tem já a configuração da nossa index que é home eu vou até ó duplicar ó cont control c cont contr V vou duplicar Aqui para baixo e agora essa de baixo eu vou chamar ela aqui por exemplo de a gente deu o nome de step né Então tá dentro do step que é o nome da pastinha ó chamei a pasta de step e dentro arquivo index então step barra Index Esse é o nome que eu vou dar eu não quero o reader também então

vou deixar o reader falso salvamos aqui podemos fechar esse arquivo layout podemos salvar aqui o arquivo step fechar também e voltar pro noso index então quando eu clicar no nosso botão aqui a gente pode fazer de duas formas pode usar um link para poder navegar o usuário então por exemplo a gente pode vir aqui ó importar from Expo tracinho router e eu posso trazer aqui ó o carinha chamado link com l maiúsculo e aí aqui dentro eu posso colocar o nosso componente tem um um botão né vou pegar o nosso botão ó vou copiar e

vou colocar o nosso link ó link abre e fecho aqui dentro do nosso componente de link ó vou copiar o nosso botão ó vou dar um Tab aqui ó O link tá em volta tá vendo e aí para esse link eu preciso passar uma propriedade chamada href abre e fecho a aspas duplas aqui e eu passo para qual página eu quero navegar Olha eu quero navegar para o nome que a gente deu step então step Beleza e como a gente tá usando não um texto diretamente se eu tivesse um texto perfeito mas como a gente

tem um botão dentro do link eu preciso passar as propriedades para esse cara então vou falar para ele que a gente tem um as child só passar isso aqui tá que a gente tem um filho dentro que é um botão tá para ele receber as propriedades então se eu salvar isso aqui agora olha só que bacana cliquei em gerar dieta Hum maravilha né agora gente a gente já tá aqui dentro da nossa página teste página que a gente chamou né que é o nosso step então quando clica no nosso link ele navega a gente para

a nossa página que a gente chamou de step sensacional agora o próximo passo é primeiro vamos fazer a parte visual depois a parte funcional vamos começar de cima para baixo então primeiro eu preciso do quê A gente precisa desse reader aqui ó tá vendo pode ver que ele não tem esse reader né se a gente olhar a gente tirou até o reader padrão Eu quero um reader que eu vou criar com a minha estilização e não aquele padrão então a gente vai criar um um novo componente e você percebe que pô eu não vou criar

e usar só aqui eu vou usar nessa página aqui também ó finalizando né então eu posso criar um arquivo separado que vai ser só esse reader e reutilizo esse reader nas páginas que eu quiser então a gente utiliza o conceito de componentização componentização dele e reutiliza onde eu quero para facilitar a manutenção facilitar a utilização para isso vamos voltar aqui no nosso projeto vou tirar essa minha cara feia daqui né para não atrapalhar e vamos começar vou deixar deixar aqui a nossa pastinha aqui por enquanto nossa página e vou vir aqui ó como é um

componente a gente vai vir aqui dentro ó dentro da pastinha components New Folder vou chamar aqui de header dentro da pasta reader New file index.tsx E aí agora aqui dentro Vamos criar o arquivo então Export aqui como é um componente eu não preciso dar aquele Export default aqui eu posso dar apenas Export tá como não é uma página Então é só um componente então Export function o nome do componente reader com H maiúsculo a abre fecha o Chaves return abre e fecha o parênteses E aí aqui dentro vamos dar aquela Nossa View beleza ó você

pode tentar se quiser ó clica duas vezes control espaço e aqui ó reac Nate você clica aqui ó às vezes ele importa sozinho tá então vamos importar aqui já também o nosso Style sheet Vamos criar aqui também o nosso pressable que a gente vai ter aqui um botão né E vamos importar aqui também o nosso text que a gente vai ter text Então vou colocar aqui ó nosso text header aqui beleza salvamos o nosso componente agora lá dentro da nossa página step a gente pode importar ele e usar como uma tag olha só a gente

criou um componente chamado heer né então vamos importar ele vamos aqui na nossa página step Import from pon P barra ponto pon Barra acessamos no nível Ó components Barra Opa barra header não precisa dar barra no final tá não precisa pode deixar sem a barra e aí importar aqui o nome do componente ó heer e aí eu uso como uma tag Olha que sensacional então eu vou chamar ele aqui ó heer tirar esse text aqui ó chamar ele aqui ó como uma tag e fecha nela mesmo se eu salvar isso aqui agora a gente vai

ver aqui em cima que no meu caso tá em cima da status bar tá vendo aqui ó heer vamos melhorar isso aqui então vamos lá no nosso heer agora e vamos mexer na estilização pra gente criar esse cara então o que que a gente vai pensar né Pensa que como a gente tem tudo é um componente aqui dentro do reaction Native o nosso heer eu quero o quê uma View que vai ser toda essa área em volta dentro dela eu quero outra View aqui ó que dentro dessa View a gente vai ter o quê um

ícone que é um botão para voltar um texto e um iconz de de nosso carregando ali por exemplo e aqui eu quero ter outra outra View ou um text chamado vamos começar Então esse é a estrutura de layout Então eu preciso ter algo em volta dentro Eu quero ter outra área outra View e dentro eu vou ter três itens né que vão ficar um ao lado do outro e embaixo desse desses itens Eu quero ter um text vamos entender isso aqui melhor na prática Então olha só que interessante se a gente voltar aqui eu já

tenho uma área que tá em volta concorda Então agora eu vou importar aqui só pra gente já ter né a nossa biblioteca de ícones que a gente já tem no Expo então @ex bar vctor icons a gente vai usar feder aqui tá e eu vou importar e já criar aqui o nosso estilo né o nosso grupo de estilo então conch Styles igual stylesheet P Create abro o parênteses e abre o Chaves aqui dentro legal então agora criamos o grupo vou chamar aqui de container Opa container eu gosto de chamar de contêiner o item que tá

em volta Beleza então a gente já chama de contêiner aqui o que que a gente tem né o contêiner ele tem uma área ela é branca e embaixo tem uma bordinha arredondada aqui então eu vou falar aqui olha esse container vai ter um BG né um background color Colors ponto deixa eu ver a gente não importou as cores ó Colors vou dar aqui um dois cliques cont control espaço vamos ver se ele já importa ó já importou Ah Mateus não tá importando Colors vamos importar na mão importe para você aprender abre e fecha os Chaves

from abro aspas Vamos descer até a pasta de Colors ponto pon barra não é ainda ponto ponto barra acessar a pasta constantes barra ah Chegamos no Colors Colors E aí aqui dentro eu pego nossas cores ó Colors e agora a gente pode usar Colors ponto E aí vamos colocar olha a cor aqui é branca Então cadê o White vírgula e também eu quero D bordinha arredondada embaixo então vírgula border Bottom right radius ou seja embaixo na direita de 14 e border Bottom left radius cuidado ó com o minúsculo e maiúsculo tá de 14 também então

a gente arredondou a bord embaixo na direita embaixo na esquerda beleza e vírgula Margin Bottom então caso tenha alguma coisa externa esse container depois dele né eu vou dar aqui 14 de espaçamento vamos atribuir isso aqui pra gente ver então vamos na nossa View Style Styles P container se eu salvar isso aqui agora tá vendo que ele já ficou branquinho ali né Só que ainda tá na status bar e aí a gente tem duas Sacadas tá para garantir que ele não vai ficar sobre a status bar no iOS a gente pode usar um carinha pode

importar no reaction Nate um carha chamada Safe area View que ele garante uma área segura para não ficar naquele notion né Igual eu tem aqui ó por exemplo o meu tem essa áre Zinha né aqui em cima do iPhone ó lá para não ficar sobre essa área e no Android a gente pode dar um hazin para fazer também então Ó eu quero que no iOS a gente importa essa Safe area View então ao invés da View eu vou usar por volta de todo mundo uma Safe area View para garantir isso aqui no iOS para ajudar

tá E também eu vou importar aqui ó dois caras vírgula o platform com P maiúsculo e vírgula e a gente vai importar também o status bar com s e o b maiúsculo tá pode dar um enter aqui tá depois de cada vírgula você pode dar um enter Ó depois de cada vírgula Maravilha Maravilha show de bola e mais um aqui e mais um aqui então a gente pode tá não depois a vírgula aqui não tem problema para ficar melhor para vocês agora vamos usar esses caras Então olha eu quero também vírgula eu quero dar aqui

um espaçamento em cima eu poderia passar na mão poderia ó PED em top de 70 por exemplo ó ele vai dar um espaçamento de cima vai desgrudar só que pô na mão aí não não sei se 70 é muito 70 não é muito então o que que eu posso fazer posso fazer uma renderização condicional eu posso acessar o nosso platform Opa platform.os tudo maiúsculo igual igual igual se a gente tiver rodando no Android Interrogação aí eu quero pegar o tamanho da minha status bar ou seja quero pegar a altura dela né Qual que é a

altura que ela tem então eu posso acessar status bar ponto current he Isso aqui vai ser o tamanho dela E aí eu vou dar uma exclamação para garantir que vai ter algum valor aqui dentro porque tá no Android tá mais 34 Então essa propriedade vai ter o tamanho por exemplo ah status bar tem um tamanho de 10 então aqui ele vai ter 10 e eu vou colocar mais 34 para dar um espaçamento a mais ainda do tamanho beleza e também depois aqui eu vou usar o dois pontos que quer dizer o senão então se tiver

no Android ele vai aplicar esse espaçamento agora depois dois pontos quer dizer o seão se não tiver no Android quer dizer que ele tá no iOS Então vou dar só 34 de espaçamento por quê Porque a gente já tem a nosso Safe area View Então não precisa passar mais né então a já tem uma área segura salvei ó já da um espaçamento legal perfeito agora aqui dentro ó vamos começar o conteúdo de dentro agora a gente tirou aqui dentro dentro do conteúdo agora eu quero ter uma View legal que dentro vai ter a nossa área

e dentro vai ter o nosso text então primeiro vamos começar uma View que vai ser o conteúdo dentro vou até tirar um pouquinho desse espaço tá para não ficar muito grudado aqui tá vamos dar aqui um Style para ela Style Styles ponto vamos chamar de content tá e vírgula vamos dar aqui ó content abre e fecha o Chaves para ele eu vou dar um pading left ou seja um espaçamento interno de 16 vírgula só para ele não ficar grudado e vírgula pading right 16 também para não ficar na esquerda e direita grudado e vírgula pading

bottom para desgrudar um pouquinho mais lá de baixo uns 34 tá e dentro Então dessa nossa build content eu quero ter o quê primeiro eu quero ter a nossa aquela que vai ter o botão então vou abrir mais uma View que vai ter aqui dentro aquele nosso botãozinho de voltar né então vamos abrir aqui um pressable que a gente já conheceu o que é um botão dentro do botão eu não quero um texto Eu quero um ícone então a gente já importou o nosso iconz inho Então posso usar ele como uma tag ó dentro do

botão abro o nosso tag do do nosso ícone E aí eu preciso passar a propriedade name que é o nome do ícone eu vou passar aqui o Arrow left que é uma setinha pra esquerda o Size dele é o tamanho Vou colocar aqui uns 24 e o Color dele é a cor Então vou colocar # só pra gente ver tá então salvei aqui ó lá já apareceu o meu izinho tá que é um botão tá dentro do pressable e essa nossa View aqui ó eu vou dar um Style para ela abre e fecha Chaves Styles

P Row tá para simbolizar que vai ser um item ao lado do outro depois desse cara ó depois do botão ó eu quero o quê um texto e depois outro ícone Então dentro dessa vizinha aqui ó temos o botão depois do botão dentro dessa Row aqui ó dessa View que é uma Row Eu ainda quero um texto Então text que vai ser por exemplo passo um vou até dar um enter aqui ó só para ficar melhor para vocês no vídeo aí passo um e depois aqui dessa text Eu ainda quero também ou pode ser até

junto aqui dentro da tag de text eu quero colocar mais um ícone então feder aqui name eu quero usar aqui um Loader que é o nome do iconz né o Size aqui eu vou dar uns 16 e o Color eu vou colocar # que é a cor preta Vou salvar isso aqui ó olha que legal já tá aqui então a gente tem o quê olha só que interessante a gente tem uma View que é a nossa Row dentro tem um botão e dentro tem um texto isto por padrão a estilização que a gente percebe aqui

é que um item está abaixo do outro mas eu não quero né Eu quero um ao lado do outro então se esse cara aqui é a nossa Row e dentro tem os elementos eu vou usar o estilo dessa nossa View aqui que a gente chama de Row para estilizar os elementos dentro então vou lá vamos criar né o nosso estilo então vamos aqui ó vírgula Row dois pontos abre e fecha os Chaves e vou falar olha eu quero que a nossa Row tenha um Flex Direction ou seja muda a direção dos itens de dentro ao

invés de coluna que é o padrão que é um um abaixo do outro muda para mim para Row que é um ao lado do outro tá e eu quero dar um espaçamento entre os itens Então vou dar um GAP de quatro aqui ó quatro não vou dar um oito aqui ó espaçamento entre o botão e o nosso texto aqui beleza então agora a gente começou a melhorar um pouquinho mas que mais que eu quero fazer dentro do nosso content aqui ó eu vou copiar essa borda embaixo arredondada e vou passar também para garantir ó vírgula

que ele vai ter uma bordinha arredondada tá então tá vendo que tá arredondado aqui embaixo perfeito a nossa Row já tá legal só que eu quero centralizar os itens aqui vertical então vírgula align items aqui ó Center tá então cuidado sempre tá mais uma vez eu vou relembrar cuidado com o minúsculo e maiúscula Flex Direction cuidado quando tem aspas cuidado com isso com a vírgula após cada estilo a vírgula antes de cada classe então cuidado com isso aí tá centralizamos aqui agora agora vamos colocar os estilos nos demais então o nosso botão não precisa de

estilo o nosso texto ó a Eu quero um estilo para ela Style Styles P text por exemplo Vamos criar o estilo para ele então vamos lá embaixo vamos aqui vírgula text abre fech Chaves aqui depois dois pontos e aí a gente pode coloc então no Tex eu quero dar um F size de 16 se eu salvar isso aqui Maravilha acho que colar até 18 n 18 legal maravil show de bola depois aqui da nossa vi que é um a lado do outro eu quero mais alguma coisa Não quero então depois dessa vi eu quero um

texto grandão que é vamos comear n então depois dessa nossa vi ainda agora dentro do content Depois da nossa vi R que tem o nosso botão eu quero ter então um Tex que vai ser o vamos começar vou dar aqui um Style para ele Style abre fe chave Styles pon vou chamar de title aqui que ele vai ser maior né então vamos lá embaixo vírgula title abrimos E fechamos Chaves vou dar um Font size aqui de uns 30 Font weight aqui ó como B para deixar e vírgula vou dar aqui um color para ele Colors

P background PR ele ficar com a cor do background Olha que sensacional que ficou né então agora a gente já tem o nosso reader sensacional e a gente pode utilizar aqui aqui aonde a gente quiser então salvei aqui agora dentro da nossa página step e index a gente tá chamando reader e como ele é um componente eu posso usar quando quantas vezes eu quiser por exemplo eu posso copiar ele aqui ó e reusar até dentro da mesma página duas vezes ele aqui ó tá vendo que ele tá sendo chamado duas vezes então sensacional Só que

ainda Precisa melhorar né Por quê Porque a gente tá com um heer fixo que só tem aqui um botão que a gente já vai colocar ação Mas é o mesmo texto sendo que aqui eu quero um texto aqui eu quero outro texto aqui eu quero um texto diferente então eu quero algo personalizável da forma que eu quiser e não algo estático Então vamos melhorar para isso a gente pode criar componentes que esperam propriedades e a gente pode renderizar o componente com base nas propriedades Então olha só que interessante vou vir aqui no nosso reader novamente

eu vou aqui em cima criar uma interface eu vou chamar de reader props Beleza então são as propriedades do reader eu vou falar olha eu quero uma propriedade chamada step que vai ser dois pontos uma string Ou seja que tem que ser um texto Eu quero uma propriedade chamada Titon dois pontos que vai ser um texto também e eu vou passar aqui pro nosso reader abro e fecho os Chaves dois pontos heer props e vou falar aqui que eu posso pegar agora o nosso step vírgula e o nosso title o que que isso quer dizer

que quem usar o componente header precisa me passar duas propriedades igual a gente tem a propriedade estilo só que agora é uma propriedade que nós estamos criando chamada step chamada title que as duas T que ser um string ou seja as duas tem que ser um texto Então eu quero usar aonde aqui onde tem o passo um ó eu vou tir nada aqui a o texto fixo e eu vou dentro pra gente usar um JavaScript dentro da nossa interface a gente abre e fecha Chaves e eu vou usar aqui o nosso step perfeito então aqui

onde é vamos começar eu quero tirar o vamos começar abre e fecha os Chaves e eu quero passar o nosso title aqui ó perfeito Então quando você chamar esse componente e me passar essas propriedades a propriedade que você me passar o step eu vou renderizar aqui e o title eu quero renderizar aqui dentro desse text então Salvei você pode ver que até sumiu ali e lá na nossa página onde a gente usa o componente ó tá dando um errinho aqui aqui agora se eu coloco o mouse em cima para vocês entenderem isso ele fala olha

Opa tirei o mouse sem querer ele tá falando ol tá faltando sming e as properties from heer props ou seja tá faltando as propriedades step e title então agora quando eu usar esse componente eu preciso passar uma propriedade step por exemplo step 1 e preciso passar uma propriedade de title por exemplo vamos começar Se eu salvar Olha lá que legal el comporta dessa forma ah no segundo vou deixar o s do step minúsculo aqui ó vou pegar as propriedades vou passar aqui no nosso sego só pra gente ver tá quero passar step dois é que

eu quero que seja por exemplo finalizando dieta E olha que sensacional né agora a gente tem componentes que é personalizado que a gente pode reutilizar de várias formas Então vamos melhorar um pouquinho agora vamos evoluir vou deixar aqui o step esse segundo aqui eu vou tirar passo um na verdade né show de bola e agora o que que eu quero lá no nosso heer pra gente finalizar ele aqui show de bola quando eu clicar no botãozinho de voltar eu quero voltar uma página para trás Navegar pra página anterior que é o comportamento do reader aqui

então o nosso pressable ele tá aqui concorda eu quero fazer o quê eu quero apenas ter aqui um onpress Ou seja quando eu clicar nesse cara eu vou chamar uma função anônima e eu posso usar aqui um console pon log teste só pra gente ver então quando eu clicar nesse botão ele tem que chamar o que a gente passar aqui na frente ó a gente passou uma função anônima dessa forma aqui que vai fazer o quê dispara um console então se eu clicar em voltar e eu olhar o nosso console aqui do nosso aplicativo olha

o teste ó clicar várias às vezes temos um monte de teste só que eu quero navegar uma página para trás para isso a gente pode importar do nosso roteamento posso importar aqui PR Expo traço router e eu vou trazer um um carinha chamado router e eu posso usar aqui ó ao invés do console eu vou dar um router PB abre fecha parênteses então ele vai voltar uma página para trás então se eu salvar isso aqui agora cliquei voltou cliquei foi agora acabamos nosso reader né agora a gente pode ir pro próximo vamos lá então agora

que a gente acabou o nosso Reader Vou salvar aqui o arquivo vou fechar e vamos continuar vamos agora criar o nosso Style sheet aqui da nossa página de step então conche Styles igual stylesheet P Create abro parênteses e abro Chaves aqui agora vou criar aqui o nosso arquiv o nosso estilo chamado container container dois pontos abre e fecha o Chaves eu quero que ele tenha um Flex um Eu quero ter um BG né um background color que é o nosso Colors P background e eu vou atribuir a nossa View então Style Styles P container se

eu salvar isso aqui agora a gente começou a ganhar forma então em volta aqui do nosso reader na nossa página a gente tem essa View que eu falei olha pega o tamanho da tela inteira e tenha essa cor de fundo perfeito então agora bora começar a criar aí o nosso formulário então para isso primeira coisa que a gente vai fazer eu vou importar aqui uma scroll View cuidado com os maiúsculos vou dar aqui um enter aqui para quebrar depois aqui de cada vírgula quebrar aqui a linha vou dar um enter então a scroll View é

caso tenha né uma área é que passe o tamanho da tela para ter um scroll então depois aqui do Reader eu vou ter o Nossa scroll View vou passar aqui para ela um Style Styles P content vou deixar criado aqui já content no nosso content o que a gente precisa fazer é só não garantir que ele vai ficar grudado ó a nossa bordinha então aqui no nosso content vou passar apenas uma pading left de 16 e um pading right de 16 maravilha então agora dentro aqui eu quero ter os nossos Campos para isso eu vou

ter primeiro o nosso vamos chamar de Label né um text aqui chamado por exemplo de e nome né nome completo por exemplo ou só nome só nome fica mais legal e vamos dar aqui um Style para ela Styles pon vou chamar aqui de Label Vamos criar aqui também virgula Label maravilha o nosso Label nada mais é do que um texto padrão então o Font size de uns 16 o Color aqui Colors P White Opa o White vírgula E também o Font Vamos colocar aqui ele como bold né colocar o peso dela e vírgula Margin Bottom

de oito caso tenha alguma coisa embaixo Então já temos o nosso nome ali ó perfeito agora embaixo do nome eu quero o nosso input só que o nosso input que é o campo pro cara digitar você percebe que eu vou repetir aqui aqui aqui então fica repetitivo né para isso a gente pode criar também um componente separado para ficar bacana Então olha só fechar aqui um pouquinho vamos lá dentro da nossa pastinha components dentro dela New Folder vou chamar aqui de input Opa input dentro de input New file index.ts x tá E aqui vamos criar

Export pra gente não ficar perdendo tempo criando né um arquivo padrão Agora eu vou começar a recomendar para vocês uma extensão Nossa chamada sujeito programador só você pesquisar aí se você quiser usar tá Não precisa se você não quiser instala ela que ela é um snippet então aqui agora a gente pode digitar RN funk e dar um Tab que ele só cria a estrutura padrão padrão de um componente então View quero importar também o Style sheet vírgula text vírgula text input e perfeito e depois aqui ó tirar o defo Export function input com o i

maiúsculo perfeito e agora a gente pode começar a criar aqui então por volta a gente vai ter uma View dentro aqui vamos criar fora também um con Styles igual Style shit pon Create abro parênteses e abro Chaves aqui pra gente começar então aqui dentro Vamos criar Já o nosso Style aqui para View Style Styles P container e depois aqui eu quero ter um input então abro aqui o nosso text input fecho aqui ele mesmo e vou passar por enquanto uma propriedade chamada Place holder que é quando não tem nada digitado vai ser por exemplo digite

algo três pontinhos aqui beleza vou criar essa nossa contêiner aqui só para ele ficar parando de acusar um errinho ali e o nosso contêiner nada mais é do que eu vou dar uma margem botton de 16 por acaso tem um input embaixo não ficar grudado salvei aqui agora e vamos chamar ele para poder visualizar salvamos vamos lá na nossa página step index e vamos importar O componente Import from pon pon barra pon pon barra components barra input vamos trazer aqui o nosso input E aí agora a gente pode usar então depois do nosso Label a

gente vai trazer ó nosso componente Zinho de input salvamos aqui agora ó se eu clicar já tá aqui o nosso textinho ó que eu posso digitar algo beleza né só que a gente vai evoluir ainda mais então para isso eu quero um componente que seja reutilizável e também a gente pode criar validações criar um formulário legal para isso a gente vai utilizar uma biblioteca chamada react Hook form para ter validação de formul então vai ficar bem legal e bem mais performático também então vou clicar aqui em get started vamos lá no nosso projeto vou dar

um cont Crol C para parar de rodar o nosso aplicativo e a gente vai instalar ele aí então copiar aqui ó npm install react Hook form eu vou dar aqui um espaço e a gente já vai importar também instalar e aqui a gente tem o nosso Cadê skim validation tá que é o @ Vamos colocar aqui ó @form bar resolvers e espaço Zod que é biblioteca pra gente fazer validação aí de esquema né esima validation aí então vamos instalar essas bibliotecas vamos rodar novamente start Então vamos rodar novamente o nosso projeto aí agora que a

gente instalou agora que ele rodou Deixa eu voltar aqui ó fechar esse carinha aqui esperar ele rodar vou clicar o a do meu teclado né Então abre eí roda de novo o seu o seu projeto deixa eu já até abrir aqui e a gente pode começar a criar enquanto ele vai rodando né então eu vou importar aqui desse nosso react Hook form a gente vai importar um carinha chamado Controller né que é pra gente poder manipular o nosso input através desse Controller Então deixa eu clicar aqui em gerar e vamos lá e além disso eu

quero que quando você usar esse componente me passe algumas propriedades Qual que é o identificação Esse é o componente de nome ou componente de peso eu tenho que saber qual que é né então para isso eu vou pedir uma interface aqui vamos chamar de input props eu quero então que você me mande uma propriedade name que é uma string eu quero que você me mande uma control eu vou deixar aqui n já já a gente vai tipar ela também quero uma Place Holder que pode ser opcional Então vou colocar uma Interrogação Pode ser que você

não precise me mandar Obrigatoriamente vou dar ela como uma string que é um texto é a rules também é opcional que o react form pede e é opcional dois pontos que ela é um Object Object E também o nosso error caso tenha erro no formulário então interrogação Pode ser que venha algum erro no formulário eu quero que seja a mensagem então string aqui e também eu quero um keyboard Type cuidado na escrita keyboard e o Type com T maiúsculo e eu quero que o keyboard Type seja do tipo vou até importar do react uma propriedade

chamada keyboard Type options esse cara aqui ó então ele vai ser do tipo keyboard Type options a gente já vai entender o que que esse cara vai fazer então a gente criou o componente agora vou abrir fechar Chaves dois pontos aqui dentro e vou pegar o nosso input props com isso a gente pode usar essas propriedades que você vai me passar que é o name o control é o Place holder rules é o error e também vírgula nosso keyboard Type Beleza deixa eu Minimizar aqui e agora para usar o nosso react H form eles esse

nosso input aqui ele precisa tá dentro do nosso Controller que a gente importou então Ó vou copiar ele aqui vou abrir aqui o nosso Controller ele fecha aqui nele mesmo tá E para ele a gente precisa Então passar algumas propriedades primeiro control que eu vou receber então vou repassar a propriedade name para ele identificar e saber qual que é o input a gente vai receber também ó propriedade name então só repassando tem a propriedade render que é o que que eu quero controlar renderizar o q então igual abre e fecha o Chaves A gente vai

receber aqui uma função anônima e dentro a gente recebe mais um parênteses E aí aqui dentro eu renderizo o que eu quero no nosso caso o nosso campz de input beleza dentro do render ele manda pra gente abre e fecho Chaves o Field tá que eu posso pegar dele então dois pontos abre e fecho mais uma chave eu posso pegar aqui o onchange que é toda vez que você trocar o valor dentro daquele Campo vírgula o on e vírgula o value que é o valor que tem dentro desse nosso input E aí eu posso repassar

essas propriedades por exemplo o Place holder eu quero você me mande aqui ó Place holder abre fe Chaves e eu vou passar o que você me mandar é o on Blur eu recebo eu tenho essa propriedade do text input eu só vou repassar que eu tô recebendo do Controller eu repasso aqui dentro para ele saber o value também value aqui ó o on Change text Eu também repasso ó do on Change que eu recebo e o keyboard Type quem que é esse cara né a gente tem uma propriedade chamada keyboard Type que se a gente

abrir aqui ó ela tem vários que que é esse cara o default é esse tecladinho aqui ó ah ele vai quebrar aqui então o tecladinho padrão que é aquele teclado de text eu vou deixar ele por enquanto aqui e já já a gente vai ver melhor e também a gente precisa passar pro Controller o rules que são as regras então caso eu receba eu passo aqui beleza então repassamos aqui no nosso Controller e agora vamos conseguir utilizar então criamos O componente que agora espera propriedades lá dentro do step ó agora eu preciso passar essas propriedades

para ele então vamos configurar qual que é os campos que a gente vai ter então para isso a gente vai importar aqui em cima Import Z from zot vamos importar também o @ Hook form bar resolver bar Zod e a gente vai trazer aqui o nosso Zod resolver vamos importar o nosso react Hook form Opa Import react Hook form a gente vai trazer aqui o use form beleza e aí a gente pode começar a criar Primeiro vamos criar validação então con esima iG z. Object abro parênteses e abro Chaves aqui dentro e aí aqui dentro

eu falo olha qual que é os campos que eu vou ter eu vou ter um campo chamado name que a gente chamou de que eu quero que seja um z pon string Então quero que seja um texto ponto mínimo um então ele tem que ser obrigatório abre e fecha o Chaves caso ele não PR enchar nada eu quero qual mensagem eu quero a mensagem o nome é obrigatório perfeito vírgula vou duplicar Aqui para baixo se a gente olhar o nosso Thunder client qual que é as propriedades que eu dei lá né só pra gente criar

as mesmas a gente colocou aqui que nessa primeira tela é o nome peso então o peso altura que é o He né e o Age né então ó aid aí a gente tá altura temos o peso então vamos colocar esses mesmos nomes da propriedade então ó vamos colocar o peso z. string 1 e vou colocar o peso é obrigatório vou duplicar aqui vou colocar age z. string 1 a idade é obrigatória vou colocar E aí falta mais um que é altura né então High e eu vou colocar a altura obrigatória Beleza então criamos aqui eu

vou fazer agora a inferência de tipo então Type vou chamar de form data igual a z. infer abre fech sinalzinho de maior e menor e vou falar ó Type off é do tipo esima então ess for data ele vai respeitar e vai ser do tipo aqui vai inferir o tipo esquema que vai ter essas propriedades Beleza agora a gente pode criar o nosso formulário aqui com o useform que a gente importou Então dentro do nosso componente agora que isso a gente criou fora tá agora dentro do componente aqui ó em cima do return a gente

vai criar conche abre e fecha os Chaves igual a use form que a gente importou tá abre e fecha o parênteses e aqui dentro eu abro e fecho Chaves e eu vou falar que olha ele vai usar um resover que é usar qual tipo o nosso Z resolver abre e fecha parênteses que dentro ele vai respeitar então o nosso esquema que ele vai ter um formulário que vai respeitar esses campos com esses tipos de dados Tá e agora ele manda pra gente aqui dentro dessas Chaves o control que a gente precisa passar lá pro input

O handle submit que é a função para poder cadastrar um formulário e também um form state que a gente pega aqui ó dois pontos abre e fecha os Chaves que eu pego aqui o errors e vírgula o is valid tá o errors é quando tem erro ele aponta aqui pra gente então agora a gente pode passar pro nosso input Olha lá nosso primeiro input ele é o qu ele é um input que tem um name que vai ser o nosso name que é ó referente aqui chamei de name tá então passamos aqui ó name a

gente vai ter também aqui o control que eu preciso passar o cont que a gente recebe aqui do nosso useform Beleza o Place holder que eu quero que seja digite o nome ou seu nome né seu nome Beleza caso tenha um erro então a gente tem a propriedade error abre e fecha oos Chaves errors a gente acessa aqui em cima ó do nosso errors E aí se eu der um ponto aqui ó e aí se eu der um ponto aqui ó tá vendo que ele não sabe qual que é os tipos de Campo que a

gente tem sendo que a gente tem o nosso esquema a gente criou aqui já o nosso tipo form data é só eu falar para o nosso useform ó antes daqui do do nosso parênteses aqui ó abre o sinalzinho de maior menor e falo que esse US form ele vai respeitar o nosso form data então agora se eu voltar aqui ó errors ponto ele já sabe os tipos que eu tenho ó name interrogação ponto message Então essa propriedade error ela vai ter um erro se tiver alguma mensagem de erro lá dentro se der algum erro no

campo name beleza e também a gente pode passar o keyboard Type que é o tipo de keyboard que eu quero eu quero passar o default vamos salvar isso aqui para testar vamos lá em criar direta né gerar dieta aqui Opa gerar dieta e ele foi aqui e ó se eu clicar ele já tá aqui Maravilha e esse keyboard Type defold ele é esse padrão que tem os textos então aqui no nosso campo input a gente recebe Qual que é o keyboard que você quer usar Então eu vou passar aqui ao invés de padrão ó eu

vou passar a propriedade que você me mandar desse keyboard Type tá Por quê Porque lá no nosso nome ó a gente tem um campo padrão mas no peso e na altura e na Idade já são números né então eu posso ajudar o usuário falando que olha se eu quisesse só de número um teclado eu poderia keyboard Type passar aqui deixa eu só salvar o nosso campo input aqui né nosso formular o nosso o nosso componente eu podia passar aqui ó numeric olha só que legal e eu salvar Olha lá ele mostra só o o nosso

nosso campo aqui numérico Beleza então aqui no nosso caso do do nome eu quero Def mesmo que é o de escrever um texto mesmo perfeito agora vamos salvar isso aqui e vamos voltar pro nosso campo aqui do nosso input Vamos estilizar esse cara para ficar melhor então se a gente olhar ele pega tudo que ele conseguir da largura e fica branco e dentro tem um espaçamento então vamos aqui no nosso text input passar uma propriedade chamada Style styes pon chamado de input vou mudar aqui ó vírgula input aqui dois pontos abro e fecho Chaves aqui

dentro para esse cara vou dar aqui uma altura de 44 vírgula background color BG aqui um background color Colors ponto deixa eu ver se a gente importou vamos importar as nossas cores Import from vamos trazer aqui as nossas cores ponto pon barra ponto pon barra constantes barra Colors trazer aqui as nossas Colors E aí a gente pode usar aqui embaixo Então olha lá Colors ponto eu quero que seja um White opa white white aqui vírgula eu quero também dar um pading horizontal ou seja na esquerda e direita de 10 e um border radius aí de

quatro para ficar um pouquinho arredondado e acho que isso já tá bacana também vou criar aqui um estilo vírgula chamar aqui de error text dois pontos abre e fecha Chaves que ele vai ter uma color red e uma margem top aí de quatro Então por quê Porque a gente pode receber uma propriedade chamada error concorda então agora se ele tiver um erro eu quero exibir aqui embaixo depois o nosso Controller dentro aqui da View eu vou ter aqui caso tenha um error então dois ex comercial a gente coloca dentro de Chaves né pra gente renderizar

alguma coisa JavaScript aqui dentro Eu quero renderizar um text abre e fecha Chaves Então dentro do text eu quero renderizar o erro que eu vou receber né para mostrar pro usuário e aí a gente coloca esse nosso estilo Style Styles ponto e aí o nosso error text Vou salvar isso aqui salvei então agora a gente finaliza aqui o nosso input se eu fechar aqui agora a gente pode colocar os demais ó vou copiar o text e o input e vamos colocar os demais ó o próximo aqui vai ser o nosso Deixa eu olhar qual que

é é o do peso atual né então vou pegar aqui ó seu peso atual E aí o name aqui vai ser o nosso peso né que a gente colocou em inglês mas não tem problema é o mesmo nome que você colocou aqui em cima ó eu dei esse nome então é esse nome aqui na propriedade name o control e aqui vai ser digite em vez de ser digite vou colocar exemplo e 75 E aí aqui error errors ponto e aí a nossa propriedade do Peso o keyboard Type aqui sim eu quero que ele seja um

keyboard Type numeric então se eu salvar ó olha lá o peso e olha aqui o text Maravilha e agora vamos duplicar isso aqui né duplicar de novo o próximo é sua altura atual E aí eu vou colocar aqui o Nossa propriedade da altura Então vou pegar aqui ó para não escrever errado colocar aqui na propriedade name E aí Aqui também ponto message o keyboard Type também numeric então duplicar mais uma vez e aqui é sua idade né idade atual E aí aqui a propriedade age aqui é errors p age P message e aqui só falta

substituir né sua altura atual eu vou colocar exemplo 1.on 90 sua idade atual eu vou colocar por exemplo 25 24 aqui salvei então ó já temos aqui todos os campos Falta só o nosso botãozinho né E aí a gente finaliza essa página Então vamos vir aqui embaixo depois disso ó vamos colocar aqui o nosso pressable deixa eu ver se a gente já importou vamos pegar pressable aqui vamos colocar aqui o nosso botão dentro Eu quero ter um Tex por exemplo avançar aqui a gente vai ter então Style Styles pbon vou copiar aqui pra gente não

perder muito tempo né buton text de baixo e vamos estilizar Então vamos lá vírgula buton Vamos colocar um BG Colors P Blue altura 44 para ser o mesmo tamanho né 44 o nosso just vai com autent que a gente já conheceu como Center e o align items como Center pra gente centralizar tudo que tem dentro do botão ó no centro e aí Virgula border radius que a gente tá usando quatro que é bordinha arredondada perfeito e falta né o buton text lembrando esse botão né tem que tá dentro da scroll viw também então vamos lá

agora vírgula Button text abrimos E fechamos aqui color Colors PW Font size de 16 e Font nosso aqui como B né pra gente deixar o peso da fonte como e olha lá já ficou bacana beleza né maravilha agora o que que a gente pode fazer é vamos criar a próxima página porque aqui a gente já tá fazendo então vamos vir aqui vamos criar agora a nossa nova página então aqui dentro da pasta app tá ó dentro da pastinha app a gente vai criar mais uma nova pastinha vou chamar aqui de Create dentro dessa pastinha Create

eu vou criar aqui mais um arquivo chamado index.tsx E aí a gente pode criar componente Então vou dar aqui o RN funk só pra gente criar aqui já né vamos dar aqui o Create tá a gente pode até para agilizar ó voltar aqui na página step e index e copiar aqui os imports do react Native tirar esse Import de image que aqui a gente não vai ter colocar aqui ó pegar os imports Vamos colocar aqui ó tá então a gente vai ter uma View vamos ter um Style sheet um text um pressable e um scroll

View aqui também beleza a gente pode vir também ó aqui copiar o nosso Import aqui do do react form do Zod vamos copiar vou trazer para cá vamos copiar também o Import do Colors que a gente vai ter as cores também ó colocar aqui também então perfeito né cuidado qualquer coisa com os imports aí se você pegou direito e também vamos criar o nosso grupo de estilo então conch Styles igual a Style sheet P Create abro o parênteses e abro Chaves aqui e vou dar aqui o nosso container né o container acho que ele vai

ser até igual Então posso até copiar aqui ó o nosso contêiner aqui ó vai ser igual então aqui na página Create container e eu vou atribuir aqui a nossa View que vai est por volta de todo mundo tá então aqui Style Styles container aqui a gente também vai ter o nosso reader ó a gente também tem o reader Então vou importar também o reader ó reader vou dar um Tab aqui ó que ele já importou para mim senão a gente precisa importar e aí aqui a gente vai mudar né a gente vai passar step que

eu vou colocar passo dois e o tit dele eu quero que seja finalizando dieta eu vou salvar ess então essa nossa página Create então criamos a página Create agora e agora lá no nosso layout eu preciso informar né então vou copiar aqui ó agora a gente vai ter a nossa página chamada Create que é o nome Ó a pasta chamada Create e dentro tem um arquivo chamado index que é o componente então Create barra index também não quero aquele reader salvamos aqui e agora a gente já pode navegar para ela então quando eu vir aqui

e eu preencher todos os dados eu clico em avançar que que a gente tem que fazer pegar os dados que você digitou como é que a gente pode fazer isso para poder Navegar para essa nossa nova página então lá na nossa página página step index a gente tem o nosso botão avançar concorda que é um pressable ele é um item clicável então aqui ó o nosso useform que é quem tá manipulando o formulário ele tem essa propriedade Esse cara é uma função chamada handle submit eu vou precisar usar ela para poder chamar uma função que

eu desejo então ó fora aqui dela em cima do return eu vou criar uma função que eu quero chamar então function por exemplo handle register ou handle Create por exemplo Tá e agora lá dentro do nosso pressable a gente tem aquela propriedade onpress eu preciso passar aquele handle submit abre e fecha o parênteses E aí aqui dentro eu passo qual que é a função que eu quero executar Então qual que é o nome da função que eu quero chamar quando você clicar que é essa handle Create que a gente criou aqui em cima Então handle

submit abre fecha parênteses passa o nosso handle Create dentro então se eu salvar isso aqui agora lá dentro do nosso handle Create ou react book form Ou use form passa pra gente uma propriedade chamada que a gente pode chamar de data que ela é do tipo dois pontos que ela é do tipo form data lembra que tem essas propriedades Então vou pegar o nome for data se a gente colocar um console pon log nesse nosso data pra gente ver o que que eu tô recebendo Então vamos testar isso aqui então olha só se eu pegar

salvar aqui o arquivo e eu digitar por exemplo Fulano o nome Ah o peso atual vai ser 76 aqui né vou colocar a altura atual 1.90 A idade vai ser 27 e eu vou clicar aqui ó avançar cliquei em avançar vamos testar vou vir aqui no console vou vir aqui pro lado e ele já devolve pra gente um objeto Olha só idade altura o name e o nosso peso então já devolve todo o objeto que a gente pode acessar beleza E além disso que que a gente quer fazer Caso der erro por exemplo ó se

eu apagar isso aqui ó ou se eu apagar a altura Olha que legal ele já vai acusar lá altura é obrigatório nome é obrigatório tá então isso é muito legal então sensacional o que que a gente pode fazer se eu clicar aqui ó ele não vai devolver mais ó porque não passa na validação ó ele nem chama nossa nossa função Agora se você preencher alguma coisa ó 1.90 de novo preenchi todos os campos agora ele deixa ó beleza agora se você abrir a página Quer ver Vou dar aqui um vou voltar e vou navegar de

novo ó se eu clicar ó ele vai mandar required ó tá vendo que a gente não preencheu nada agora o que que a gente pode fazer é depois de você preencher então preenchi todos os dados cliquei em avançar eu quero também navegar você para a outra página então agora vamos lá eu quero quero pegar além de mostrar o console eu quero navegar você então vou importar aquele nosso router que a gente já conheceu from Expo bar router tracinho router router aqui a gente traz ó o Import e eu posso usar então depois do console eu

vou chamar o nosso router P push para a nossa rota que a gente chamou de Create então barra Create vamos salvar pra gente ver se ele vai navegar ó se eu não preencher ele não navega Se eu colocar Mateus Se eu colocar o peso atual qualquer coisa 1.90 a idade 23 avançar aí ele navega pra nossa página finalizando dieta beleza Mateus quase chegando lá né pra gente poder gerar a dieta mas antes disso O que que a gente precisa entender do fluxo Olha só se a gente tem duas páginas aqui de formulário eu preciso entender

que eu preenchi o nome peso altura idade cliquei em avançar eu preciso salvar aqueles dados que é o nome da pessoa o peso altura e idade salvar em algum lugar pra gente já já utilizar Navegar você pra próxima página lá ele vai selecionar o sexo As outros dados salvar esses outros dados Então a gente vai ter todos os dados do usuário e aí quando ele clicar gerar dieta aí eu vou pegar esses dados e usar né pra gente gerar a nossa dieta lá com a nossa api Então por enquanto o que que eu tô fazendo

por enquanto você preenche os dados eu só valido o formulário se tá preenchido né se não mostra um errinho aqui e navego pra outra página a gente consegue acessar os dados que você digitou através da propriedade de data então se eu acessar o data ponto eu consigo acessar name é peso altura e idade beleza mas a gente não tá salvando nada a gente só tá navegando você pra próxima página como que a gente pode salvar com isso el tem n formas né dá pra gente usar context api dá pra gente usar estados parâmetros mas aqui

a gente vai usar também um gerenciador de estado que é o zent Então a gente vai conseguir salvar basicamente numa Store numa caixinha e em qualquer página e componente eu falo olha me dá aí qual que é os dados que você tem é do usuário por exemplo aqui que a gente tá preenchendo e também salva esses dados aqui para mim então a gente vai fazer isso para isso a gente vai vir aqui ó parar de rodar o nosso projeto pra gente poder instalar ó npm install no nosso app zent vou dar um enter aí para

instalar ele aí também e também a gente já vai instalar aqui o npm Install axius e também o @ 10 stack bar react query Então a gente vai instalar o axus e o ten stack pra gente fazer a requisição e conseguir buscar da nossa ap Já já só pra gente não ficar parando de rodar tá então instalamos agora vamos rodar o projeto npx Expo start novamente enquanto ele tá rodando ó vou até ó fechar aqui do do meu ó fechar aqui ó Opa maravilha esperar ele rodar enquanto ele vai rodando aí deixa o seu like

Compartilha aí como é que tá ficando o seu projeto marca a gente lá no Instagram que tá ficando sensacional então rodou aqui vou dar aqui o a para abrir no meu Android maravilha né agora como é que a gente pode fazer então vamos criar essa nossa Store pra gente salvar os dados conseguir ter os métodos de salvar os dados porque por enquanto nessa primeira página eu só vou poder salvar Opa abri sem querer aqui só salvar esses primeiros quatro dados aqui depois eu quero salvar o resto na próxima página Então vamos lá Opa apaguei aqui

sem querer vou salvar aqui vamos fechar aqui um pouquinho ó Minimizar tudo aqui na raiz do projeto vou criar um New Folder vou chamar aqui de Store tá uma pastinha chamada Store e aqui a gente vai criar um New file vou chamar aqui de data.ts tá pode ser a nossa Store chamado data beleza e aqui a gente vai criar ela então aqui dentro Import PR Opa rant vamos trazer o método chamado Create e a gente vai criar aqui então Export Type vamos chamar aqui de data tá ou pode chamar até de dieta em inglês né

vou colocar o nosso dieta aqui em inglês vai ficar legal tá E aí dentro Eu quero ter o quê que que eu quero ter qual que são os campos né então se a gente olhar lá vou vou vir aqui na nossa app step index a gente tem esses campos aqui ó vou até copiar ó só pra gente pegar o nome né para não escrever errado então o nome name ele é do tipo string ponto e vírgula o peso ele é do tipo string ponto e vírgula também o ae que é a idade né string ponto

vírgula também e a altura ele é do tipo eu quero receber tudo como string aqui Então pegamos isso aqui que mais que vai faltar então o nosso tipo da dieta né ele vai ter o name e vou até chamar em vez de dieta vou chamar de data mesmo né V cham em vez de dieta vamos chamar aqui de user né acho que vai ficar mais mais interessante chamar de user aqui ó user então name altura é name peso idade e a altura Além disso eu vou ter que ter também o sexo e nível né level

por exemplo e o objective Né o objetivo por exemplo Vamos colocar aqui ó o level também ele vai ter uma string o objective vai ser uma string e também vai ter um o sexo né que é o sexo aqui ó colocamos tudo em inglês para ficar mais fácil então agora criamos o tipo né que a gente vai ter nos nossos Campos e agora a gente vai criar o Type também da nossa data state né o nosso estado que a gente vai ter que a gente vai poder salvar então eu quero ter um estado chamado user

que ele vai ser do tipo user que a gente acabou de criar aqui então esse objeto user ele vai ter todas essas propriedades perfeito e agora a gente pode criar o nosso Store então Export con use data Store igual a Create abre e fecha parêntese antes Aqui dos parênteses a gente abre e fecha e fala que a nossa use data Store ela é do tipo dat state ou seja ela vai ter esses campos que a gente colocar aqui dentro que no caso só vai ter um user por enquanto E aí aqui dentro a gente recebe

uma função anônima que aqui dentro a gente recebe um carinha chamado set que a gente já vai entender o funcionamento dele e aí a gente abre aqui e fecha parênteses abre e fecha Chaves e aí aqui dentro tudo que eu quero exportar para todos os componentes poder utilizar por exemplo então eu quero poder exportar uma propriedade chamada user beleza dois pontos e eu quero começar essa propriedade user com os valores vazios né o name por exemplo eu quero começar sem nada o aid eu quero começar sem nada e o level e sem nada também o

objective sem nada também vírgula cuidado com as vírgulas aí aí depois tá cuidado com dois pontos aqui também é que mais que falta aqui falta o sexo né sem nada altura sem nada também que mais que falta falta o peso né sem nada também então a gente começa vazio concorda então perfeito e eu quero ter também um método então vírgula eu quero ter um método pra gente trocar então V colocar set eh page one por exemplo tá que vai ser para passar as informações da página um abre e fecha aqui uma função e pra gente

colocar item dentro ou seja colocar valores aqui dentro dentro do nosso user por exemplo a gente usa esse carinha que a gente chama de set então criamos o método cuidado com a vírgula aqui set page one dentro aqui eu quero que você me mande alguns valores que eu vou chamar de data e aí a gente pode usar o set ou seja vou trocar o valor dentro desse Nossa state user dentro aqui dentro colocar alguma coisa set abre e fecha uma função anônima a gente recebe todos os nossos estados então a gente recebe aqui o state

que a gente pode acessar E aí abro o parênteses abro o Chaves aqui dentro quero manipular o nosso estado chamado user dois pontos abre e fecha Chaves E aí qual que é a sacada aqui qual que é a lógica ess esse método One aqui ele vai servir para quê para manter todo o que eu já tenho e cadastrar apenas as primeiras informações que são nome é peso altura idade o resto vou cadastrar depois então esse método aqui o que eu quero fazer é pegar tudo que eu já tenho manter aqui então Ó ponto pon pon

state pon user então mantenho tudo que eu tenho ten do usuário e vírgula ponto ponto ponto data coloco o que você me mandar aqui nessa propriedade data Então nada mais é do que se eu já tivesse alguma coisa salva por exemplo sexo alguma outra coisa eu mantenho ali e coloco a mais ou seja preencho aqui basicamente apenas o nome por exemplo Mateus é a idade por exemplo 25 e essas informações que você vai me mandar lá na primeira página Tá show de bola e aqui ele tá dando um errinho né ele tá falando olha o

data eu não sei o que que é esse data Então vamos vamos criar essa tipagem igual a gente fez aqui com user Então vamos falar aqui olha ponto e vírgula a gente tem um método chamado set vou até copiar aqui ó set page one que ele é do tipo ele é uma função ele não devolve nada e essa função você vai mandar uma propriedade que a gente chamou de data né E ela é o mesmo tipo do nosso user Só que não é todo tipo né não é todos os campos é apenas o nome o

peso altura e idade Então o que eu posso fazer é posso pegar aqui usar o omit abre o sinal abre o sinalzinho de maior menor Vou acessar aqui o nosso tipo user então eu vou omitir do nosso user eu quero tirar do nosso user vírgula o campo do sexo abro o sinalzinho de Ow o campo objective sinalzinho de ou e abro aqui também o nosso level né então que que eu quero eu quero que quando você chamar esse set page one aqui você precise me passar uma propriedade data que ele vai ser o quê vai

ser do tipo user mas ele vai omitir esses três aqui ó ou seja não vai ter esses três aqui ó basicamente como se fosse só isso aqui aqui que é o nome é o peso altura e idade Beleza então só para mostrar para vocês então é isso que a gente tá falando me manda essas informações apenas esses aqui e a gente pode até criar a segunda né na segunda página eu vou criar apenas o sexo o nível que é o level que a gente amou né e o objetivo que é o objective Então vamos chamar

aqui de set page to né já que a gente tá criando aqui void eu quero que você me mande uma propriedade data dois pontos e aqui ao invés de usar o omit eu vou usar o pick que é bem legal do typescript também abre o sinalzinho de maior menor do nosso tipo user vírgula eu quero pegar o quê o piic serve para pegar qual que é o tipo de propriedade que eu quero eu quero a propriedade ó o nosso sexo eu quero a propriedade também que a gente chamou aqui ó de objective e mais um

sinal J eu quero a propriedade que eu chamei de level também então nessa page to você só vai me mandar o sexo o objetivo e o level apenas isso e agora a gente precisa criar esse método ó vírgula vou até duplicar aqui ó porque ele vai ser basicamente igual né duplicar aqui só vou mudar o nome Ó set page to a gente recebe uma data vou mudar o valor do nosso user Então vou colocar informações dentro do user E aí ponto pon ponto state user ou seja mantenho tudo que eu já tenho por quê Porque

na segunda página eu já botei os dados como nome idade preenchido e adiciono a mais ó apenas o que você me mandar então é apenas isso que a gente tá fazendo salvei aqui agora e pronto a gente pode manipular vamos utilizar isso aqui pra gente ver na prática Então olha só salvamos o nosso arquivo que a gente chamou de US data Store Então vamos lá dentro agora lá da nossa página step vamos importar esse cara Import pon P bar pon P bar Store bar datata e eu vou pegar aqui o nosso US data Store beleza

e agora a gente pode utilizar então aqui dentro depois do useform con abre e fecha os Chaves aqui igual a US dat Store dentro eu posso acessar cada state E aí state ponto olha só que legal eu posso pegar os métodos e eu posso pegar se é o user que é as informações que eu tenho aqui dentro nesse nosso caso o que que eu quero primeiro eu quero pegar apenas a formação o Nossa função chamada set page one eu vou chamar aqui ó também de set page one então agora a gente pode usar esse método

Então vamos lá ó ao invés de mostrar o console a gente vai dar um set page one abro parênteses abro Chaves e se eu der aqui ó olha só que legal se eu der um control espaço ele fala qual que é as propriedades que eu posso passar então o name dois pontos data pon name passar o nome para ele vírgula Opa vírgula eu quero pegar também o nosso peso então data ponto propriedade do Peso o Age que é a idade data.on age e falta altura então altura dois pontos data ponto o nosso Hide aqui que

é altura então o que que a gente faz né quando você clicar para gerar dieta preencher os dados clicou em avançar aqui eu vou tirar esse console vou dar aqui um console por exemplo e passando dados da página um beleza e a gente vai passar então chamar a nossa função set page one com o nome que você você preencheu peso que você preencheu a idade que você preencheu e a altura que você preencheu então a gente pega esses dados passa lá pra nossa Store Então pensa que esses dados que você que você passou agora vai

Tá salvo aqui dentro dessa propriedade user Então vai est aqui o nome A idade vai tá aqui a altura e o peso vai Tá salvo aqui pra gente usar depois então perfeito a gente preencheu manda pra Store e ela salva aqui pra gente show então isso que a gente faz depois claro a gente navega pra página Create legal então agora que a gente fez isso ó salvou Vamos testar se ele vai fazer tudo se ele vai Navegar Então vamos lá vou vir aqui deixa eu clicar duas vezes no R do meu teclado só para ele

atualizar ou você pode dar um contrl M aqui ó que ele abre aqui ó uma opçãoincorreta só que na página dois a gente vai evoluir um pouquinho mais né Vamos ao invés de criar um input aqui a gente vai criar um select que que você abra o modal na tela ou seja abra algo visível na tela que você pode selecionar com base nas opções que você quer masculino feminino ou também o nível dele vamos criar um campo do zero vamos lá então olha só que interessante vai ficar sensacional vamos salvar isso aqui vamos fechar que

agora a gente vai trabalhar aqui como a gente vai criar mais um campo vamos lá dentro do componentes aqui a gente tem o input dentro da pastinha input eu vou criar mais um arquivo chamado select tsx eu vou até copiar aqui o nosso arquivo do input ó vou copiar todo ele aqui e eu vou trazer ele para dentro desse arquivo chamado select vou colar aqui claro que a gente vai mudar bastante aqui então aqui primeiro vamos começar de cima para baixo né a gente vai importar as cores a gente vai deixar importado aqui o react

f form também a gente vai deixar importado esses opções aqui mas aqui a gente vai trazer e mais algumas coisas como vírgula touchable opacity que é um botão com cidade deixa eu até dar um enter aqui ó após cada vírgula Beleza deixa eu dar um enter mais um enter e mais um enter aqui esse o nosso keyboard Type options a gente não precisa mais esse text input a gente não precisa mais então a gente vai ter o touchable opacity vírgula a gente vai ter também um flat list aqui tá E agora a gente vai mudar

um pouquinho as propriedades tá então eu vou chamar aqui de select props eu quero que você me mande um name um control eu quero que você me mande também um Place holder a aqui eu não quero o errors eu quero que você me mande o errors também keyboard types aqui eu não preciso e eu preciso de uma propriedade chamada options que é para saber quais as opções Então vou criar uma outra interface aqui chamada chamada options props que vai ser cada opção vai ter um tipo vai ter uma propriedade chamada Label que é o que

você quer exibir que vai ser um texto e vai ter uma propriedade chamada value e pode ser um texto ou Number né E aí eu vou falar olha eu quero receber além dessas propriedades no celect uma propriedade também chamada options que ela é do tipo options props só que ela é uma lista né porque é mais de um item que ele pode selecionar Então ela é uma Array Beleza então é uma Array que cada um tem um Label e um value um Label e um value e agora vamos atribuir ó tirar isso daqui dois pontos

select props Vamos mudar o nome do componente de select tá E aí eu quero receber então name o nosso control quero pegar também o Place Holder o error e vírgula o nosso options que é a nossa lista das opções que você quer exibir quando abrir a rules aqui a gente não tem então vou tirar aqui do Controller beleza aqui a gente vai ter quase a mesma estrutura né então name o control dentro do Controller ao invés da gente renderizar um text input aqui a gente vai renderizar um botãozinho para ele clicar abrir e selecionar o

que ele quer então ao invés desse text input eu vou tirar o text input daqui a gente vai renderizar ainda alguma coisa mas a gente vai renderizar ó vou abrir um fragment que é um uma tagz inha sem nenhuma estilização e dentro tá a gente vai colocar o nosso touchable opacity que é um botãozinho com opacidade e dentro eu vou colocar por exemplo selecione algo só pra gente ver tá Vou salvar isso aqui salvei e vamos chamar pra gente poder visualizar né pra gente poder estilizando Então deixa eu reduzir aqui um pouquinho vamos lá na

nossa página Create index vamos importar agora o nosso carinha então Import ROM ponto ponto barra pon pon barra components barra input E aí barra select vou trazer aqui ó lembra de salvar o seu arquivo tá do select aqui ó vamos trazer aqui o nosso select E aí agora também precisamos né criar qualquer o tipo de validação pro nosso formulário igual a gente fez aqui ó lembra na nossa página step se quiser a gente pode até copiar tá a gente criou aqui os campos que a gente quer vou copiar ó nosso form data e o nosso

esquema a gente pode copiar porque a gente vai mudar né mas só para não ter que escrever de novo ó em cima do na página Create vamos colar Vamos criar um esima e aqui qual que é os campos que ele vai ter Olha lá sexo o nível E também o objetivo Então vamos chamar aqui de gender que é o sexo né vou colocar o sexo Opa sexo é obrigatório é o objective É obrigatório o objetivo é obrigatório e vou colocar também o último aqui ó né que é o nosso level né que a gente chama

de level ou você pode colocar aqui até selecione seu level ou nível tanto faz também fica legal beleza então criamos aqui os tipos que a gente vai ter criamos aqui a inferência de tipo do form data para esse esquema podemos voltar aqui no nosso step ó posso até pegar também todo o nosso US form que é igual né vou voltar aqui então aqui no nosso Create a gente vai colocar dentro do componente o nosso useform a gente já tinha importado ele aqui então ele também recebe o control o on submit o form State com os

erros né então agora a gente pode usar aqui então vou criar aqui vou trazer uma scroll View deixa eu ver se a gente importou uma scroll View vamos usar aqui caso passe o tamanho da tela para ter aquele scroll legal vou ter aqui um text vai ser por exemplo Label né sexo vamos criar aqui um Style Styles laab a gente ainda não tem o Label vai ser igual então a gente pode até voltar lá na nossa página step vou pegar a estilização aqui do nosso Label ó Label vou copiar vamos voltar aqui na nossa página

create vula vou trazer aqui o estilo do Label também ó então ó sex já tá ali na scroll viw também Style Styles content e vou criar aqui também ó vírgula content pading left de 16 e pading right de 16 também para não ficar grudado né o nosso textinho aqui do Label da interface então agora depois é só chamar o nosso select aqui dentro então abro aqui passo o nosso select ele fecha aqui nele mesmo e eu preciso passar as propriedades passo control que a gente recebe do nosso useform aqui dentro do componente ó dentro do

componente preciso passar também um name que é referente ao quê esse cara aqui ele é referente ao sexo por exemplo o gender aqui ó né Maravilha que mais Place holder eu quero que seja por exemplo selecione o seu sexo show de bola que mais a gente tem o error né a gente recebe o errors ponto e aí gender Interrogação P message caso tenha erro ele vai mostrar aqui perfeito e aí eu preciso passar a Nosa options Então vou criar pode ser depois aqui do nosso use form cima do return con gender options abre fe eu

quero que ele tenha um Label que vai ser por exemplo masculino e Val que quando você selecionar seja masculino Beleza o Lab vai aparecer para você selecionar então por exemplo vai aparecer aqui tá e o value é o valor que você quer que apareça quando selecionar e vírgula vou ter mais um né que é o feminino né então aqui ó feminino e aí o value aqui vai ser o feminino beleza e aí a gente passa Então essa nossa lista essa nossa Array lá pro nosso select também então options passamos lá para ele a lista vamos

clicar pra gente ver salvei aqui e também vamos lá no nosso select vou salvar aqui Opa dentro do nosso touchable eu coloquei um texto e precisa est dentro uma tag de salvei aqui também beleza Vamos colocar aqui ó vamos navegar aqui Mateus peso colocar 45 1.90 idade 26 vamos M dar aqui o famoso avançar e a gente já tem ó selecione aqui ó tá vendo que ele por enquanto não faz nada então vamos criar funcionalidade agora que que eu preciso né primeiro eu quero que apareça como se fosse um input E uma setinha para baixo

então aqui no nosso Label do select aqui no nosso botão eu quero o qu eu quero um texto do lado do texto Eu quero um ícone vamos importar aqui os ícones então Import from @ex bar Vector icons vamos trazer aqui o feder e vamos utilizar lá embaixo depois do nosso text eu quero ter o nosso ícone propriedade name eu quero que seja uma setinha para baixo então Arrow traço Down fecho aqui size aqui eu quero por exemplo 16 color eu quero que seja # que é o preto então ó já tá tá ali legal demais

e agora vamos colocar um ao lado do outro então nesse nosso totable vamos dar aqui um Style para ele Styles pon buton ou chamar só de select para ficar mais fácil né Vamos lá criar então vamos lá embaixo aqui vírgula select eu vou dar aqui para ele um Flex Direction como Row um ao lado do outro eu quero também dar uma altura de 44 vírgula BG que é o nosso Colors PW vírgula alinhar esses caras no centro então align items como Center só que eu quero que cada um fique lá no seu canto para isso

a gente pode dar um justify content ao invés de Center eu quero dar um Space between ou seja cada um fic no cada um ficar no seu canto aqui o nosso texto e aqui o nosso Icone Zinho E aí vírgula pading horizontal de 10 que é o que a gente tá utilizando e vírgula border R radius de qu aí para arredondar Então olha só parece o input né ficou bem legal e agora quando você clicar aqui eu quero abrir e mostrar as opções para você poder selecionar então aqui a gente tem um botão agora a

gente pode utilizar um modal pra gente poder exibir o que eu quero então para isso vamos importar aqui ó vírgula modal também tá E agora vamos utilizar então depois aqui ó fora do nosso botãozinho aqui a gente vai ter aqui então o nosso modal ele abre e fecha dessa forma e aqui dentro eu coloco o que eu quero exibir no modal para ele como é que eu faço para exibir ele eu preciso passar uma propriedade visible como true eu tenho uma propriedade também chamada o Animation Type que é qualquer animação eu quero que abra como

Fade e o on request Close por enquanto a gente vai usar uma função anônima aqui que é para fechar ele que por enquanto a gente não tem a funcionalidade né Já já a gente vai criar Vou salvar isso aqui então olha só meu modal tá aberto só que eu quero que ele seja invisível por quê Porque eu quero criar ele com um efeito Zinho e de Fade né para mim poder ficar continuando enxergando a minha interface mas é ser mais invisível né então para isso a gente passa uma propriedade chamada translucent ou transparente também como

true aqui ó e aí ele fica invisível ó nem enxergo mais que ele tá aberto Então dentro do modal o que que eu quero ter eu quero que tenha um touchable op que ele vai ser um botão né só para quando clicar fora do conteúdo ele fechar então a gente pode dar aqui até para não esquecer ó vou dar um enter aqui ó Style Styles pon vou chamar aqui de modal container eu vou dar aqui para ele um Active opac como um para ele não ter efeito visual Maravilha dentro dele eu quero também ter mais

um botão toach opacity que vai ser um botão onde vai ter dentro aqui o conteúdo do nosso modal Então vou chamar aqui para ele ó só para não esquecer Style sty pmal content para ficar legal tá eu também quero passar para ele a nossa propriedade Active op 1 para ele não ter aquele efeito de opacidade no botão aqui e dentro Eu quero exibir a nossa lista então aqui a gente vai usar o flat list que a gente importou aqui em cima que é uma listagem parecida com a scroll View que a gente já tá usando

só que aqui ele vai renderizar com base em alguma lista então para ele ó eu passo a propriedade data e aonde que tá minha lista a gente recebe a lista lá se a gente olhar ó quando você usa o select você manda sua lista de opções dentro da propriedade options então aqui dentro do nosso select eu recebo através da propriedade options então aqui dentro ó data eu V passar o nosso options eu preciso passar uma propriedade Key extractor para informar pro flatlist Qual que é o identificador de cada item da lista Então abre e fecha

uma função anônima aqui dentro a gente faz o quê pega cada item da lista ó item E aí eu posso falar olha o identificador é o item pon value pon string então é o valor de cada item é o value aquela propriedade value show de bola depois disso a gente tem o render item que é como que você quer renderizar cada item da sua lista aqui então a gente recebe uma função anônima abre e fecha mais um parêntese E aí a gente pode acessar dentro de Chaves cada item para você exibir como você quiser então

aqui eu quero exibir por exemplo também vai ser um botão totable op então toach op aqui Opa fechamento da tag E dentro dele eu quero um texto né então text abre fecha os Chaves item pon Label que é o Label que eu quero exibir então se eu salvar isso aqui agora olha lá lá em cima já apareceu Ó masculino e feminino tá vendo vamos estilizar isso aqui um pouquinho pra gente melhorar Então vamos passar o estilo aqui a gente passou do m o container na nossa flat list eu vou colocar aqui content container Style igual

abro duas Chaves eu vou passar um GAP de qu para dar um distanciamento entre cada iten Zinho Beleza o nosso toou de dentro que é o botão para selecionar Eu também quero ter um Style para ele Styles ponto vamos chamar aqui option que é cada opção né então option e o texto Dentro a gente não precisa passar nada então vamos começar a estilizar Primeiro vamos começar pelo nosso modal container né que é o item que fica em volta de tudo então vírgula modal container para ele eu quero deixar uma cara mais escura né como se

tivesse um efeito de que ele tá aberto na frente então background vamos usar aqui para esse nosso modal container um abre o aspas rgba 0 que seria o preto ví 0.5 que seria 50% do preto ó salvei já ficou ali vou falar aqui para ele pegar a tela inteira então vírgula Flex 1 e vírgula justify content como Center pra gente alinhar tudo no centro tá vendo que ele já ficou ali ó pretinho e tá aqui o masculino e feminino legal agora vamos modal coner então vírgula modal content né vamos lá vrgula modal content o modal

content é o item dentro o item dentro então a gente pode dar uma cor de branco então vou dar um background Colors ponto White por exemplo pra gente ter uma cor de branco Ó olha lá que legal E aí vamos dar um espaçamento também então a margem horizontal de 10 na esquerda e na direita vírgula border radius Vou colocar aqui oito vírgula pad interno Vamos colocar uns 20 para ficar bastante espaçamento interno ó bem legal e agora a gente pode ir para cada option né que é cada item masculino Então vamos lá vírgula option aqui

pading vertical seja em cima e embaixo de uns 14 para dar estamento legal um background color a gente pode colocar aqui um rgba 208 208 V 208 que que é isso aqui né Ele é um cinza v0.40 então ele vai ficar só pra gente ver que cada um é uma opção né para ficar legal e aí VG border radius Vamos colocar aqui 4 vírgula pading horizontal Vou colocar aqui oito para dar um dispensamento horizontal legal demais e aí agora a gente já tá vendo o nosso modal né legal demais só que eu não consigo fechar

ó se eu clicar aqui em qualquer lugar eu não consigo fechar ele então para isso a gente precisa ter algo dinâmico dentro do select algo que é mutável que a gente chama para isso a gente pode usar estados então Ó eu posso importar aqui ó do react a gente pode importar o use state que é pra gente poder ter algo que muda o valor sem que a gente tenha que atualizar a página né então importou dentro do componente eu posso criar aqui ó em cima do return o meu estado con vou chamar aqui de visible

vírgula set visible set visible igual US state eu quero que ele comece sempre como falso né porque ele vai começar já com o nosso modal fechado cuidado tá que no nosso US state a gente tem abre e fecha o colchetes né dentro a gente tem a primeira propriedade que é para acessar o valor que vai ter dentro do que a gente começou como falso a segunda propriedade a função basicamente para trocar o valor aqui dentro e aí aqui dentro é o valor inicial beleza e agora então aonde que controla lá no nosso modal ó a

gente não tem uma propriedade visible que a gente deixou como true ao invés de deixar fixel eu vou falar que ela vai ser controlada pela nossa US state que a gente amou ó copiar aqui ó visible Então se ela tá como falsa ó não mostra se a gente mudar aqui para true o nosso modal aparece então claro eu quero comece como falso perfeito Quando você clicar aqui ó no sex ó aí eu quero mudar para true Então quando você clicar no nosso botãozinho aqui ó de selecione algo Eu quero pegar aqui ó onpress abro uma

função anônima set visible e vou mudar o valor ó deixa eu Minimizar aqui ó vou mudar o valor para true então ó cliquei abriu perfeito né que mais que a gente precisa fazer quando você clicar nessa área escura Eu quero fechar então ó on request Close abre e fecha uma função anônima e ao invés das chaves aqui eu vou dar um set vismo falso então a função para fechar vai ser o falso beleza e quando você clicar nesse nosso touchable que é o modal container que é quem é preto que tá em volta eu quero

também ter um onpress Ou seja quando você clicar nele eu quero ter uma função anônima que vai nada mais é do que chamar para fechar o modal então set visible vai mudar para falso se você clicar nela ele vai fechar cliquei fechou cliquei abriu sensacional né perfeito agora aqui dentro se você clicar eu preciso selecionar o item que você clicou como é que a gente pode fazer isso aqui então aqui dentro a gente tá falando em cada opção Então dentro do nosso flat list a gente tem cada botãozinho que é referente a cada item da

minha lista então aqui sim ó posso até dar um enter ó a gente tem o onpress abre uma função anônima abre e fecha os Chaves Então quando você clicar aqui o que eu quero fazer é set visible fals então também quero fechar o modal então se eu clicar no masculino ó fecha só que eu também quero selecionar como é que eu seleciono o item lembra que o nosso Controller ele manda pra gente dentro do Field o on Change que é para trocar o valor que tem ali dentro e o value Então o que eu quero

fazer é quando você pegar e clicar aí e em Um item Além de eu fechar em cima da gente dar o set visible dentro do onepress eu vou dar on Change e vou passar o item para ele então item que é o item que a gente tá aqui ó dentro lembra do render item a gente tem acesso ao item que você tá se é masculino ou se é feminino então item ponto value vou mandar só o valor para ele então a gente troca o o valor ali dele Beleza então quando eu clicar aqui ele seleciona

e agora como é que eu exibo aqui ó ao invés de selecione algo se a gente olhar o nosso botãozinho é porque ele tá fixo né olha lá selecione algo e quando a gente usa o select eu peço para você me mandar o Place holder aqui então a gente pode fazer o quê eu posso exibir aqui o nosso Place holder abre e fecha os Chaves vou mandar aqui o Place holder se eu salvar ó seleciono o seu sexo só que se eu clicar e eu selecionar não muda ainda quase lá como é que a gente

pode fazer isso agora a gente pode vir aqui ao invés de passar só o Place holder que você quer exibir aqui dentro eu posso verificar se tem algum valor porque se tem algum value ali dentro quer dizer que você já veio aqui e clicou em selecionar porque quando você seleciona a gente não dá on Change e passa o valor para ele então o que a gente pode fazer é dentro do text aqui ó abre fecha os Chaves né e eu vou falar olha se tem um value interrogação Então vou acessar o nosso lista de options

pon find abre e fecha parênteses aqui eu posso acessar cada option abre o nosso sinalzinho igual Nossa setinha option pon value for igual ao value que tá selecionado então se eu achar lá dentro da minha lista depois do parênteses aqui ó interrogação ponto Label Então vou exibir o Label dele agora se ele não encontrar quer dizer que não selecionou nada então dois pontos aí eu vou só exibir o nosso tal do Place holder ali Beleza vou até dar um enter aqui no nosso text para ficar melhor para vocês aí enxergarem na aula Vou salvar isso

aqui ó olha lá masculino Olha que sensacional né cliquei selecionei feminino selecionou cliquei no masculino selecionou perfeito né então agora a gente criou um um um campo do zero que a gente tem um select do zero e que é controlado Então olha que bacana salvei o nosso select que ele é um pouquinho maior né vamos voltar aqui onde a gente usa então aqui agora a gente pode reutilizar ele inteiro com base no que eu quiser vou pegar aqui eu vou copiar na nossa página eu quero ter mais um select o próximo é do quê se

a gente olhar é o selecione o nível de atividade física Então vou colocar o texto aqui o control Qual que é o name que a gente deu o nível é o level né então vou colocar aqui ó o name é level selecione seu nível de atividade física beleza tirar esses três pontinhos aqui aqui errors p level né pon message aqui na options eu preciso mudar as options Vamos criar aqui ó cons level options abra aqui um Array vou até copiar aqui ó e aí qual que é o Label que eu quero eu vou copiar aqui

na verdade vou até dar para vocês para não ficar né escr vem isso aqui porque é genérico né Então deixa eu até pegar aqui ó vou pegar aqui ó e vou colar vocês vão ter aí para copiar também que é só para não ficar perdendo tempo com isso né então eu coloquei o primeiro Label sedentário pouco ou nenhuma atividade física o value é sedentário o Label levamente ativo né exercícios de um a três vezes na semana e aí o value a mesma coisa de um a três vezes na semana tirar aqui que ficou com dois

s e aí terceiro é o moderadamente ativo o quarto é altamente ativo e aí altamente ativo de c a 7 dias na semana Então essa é as noss nossas opções vou pegar aqui e vou atribuir ao nosso select tirar daqui level options vamos salvar isso aqui agora pra gente visualizar Então olha lá que legal masculino tem o dele e olha aqui o outro olha que sensacional posso selecionar moderadamente é sedentário altamente ativo perfeito né E a gente tem mais um Então vou duplicar aqui mais uma vez o próximo deixa eu ver qual que é o

nome lá que eu já não lembro é selecione seu objetivo Então vamos colocar aqui selecione seu objetivo perfeito e eu vou colocar aqui é errors p objective o nome do nosso campo tem que ser objective perfeito e aqui o o options a gente pode colocar aqui ó criar mais um também né mais uma lista aqui ó conch objective options criar aqui a nossa lista e eu vou colocar aqui para vocês também ó vocês podem copiar primeiro Label emagrecer value emagrecer Label hipertrofia e o value hipertrofia E aí eu coloquei mais definição e definição e o

último aqui é o definição apenas com o value definição Então vamos copiar aqui o nome dessa lista e vamos lá vamos mudar esse último select para options vai ser esse nosso objective options cuidado tá para não esquecer de selecionar os itens corretos ó esse aqui é o objective o name tem que ser objective esse aqui é level esse aqui ó errors P level cuidado com as options esse aqui é o o nosso gender aqui né esse aqui também é o errors dele então cuidado tá ó maravilha olha que legal né Eu posso selecionar então agora

a gente já basicamente finaliza a parte do select que era algo mais chatinho vamos se dizer de criar né então ficou sensacional porque a gente criou algo personalizado um componente que pode ser chamado quantas vezes quiser com base nas propriedades e ser reutilizado falta agora só o botão então agora a gente pode o botão ele é igual da página anterior aqui ó né do avançar Então vou lá na nossa página step vou pegar o nosso pressable que é o botão ó Vou colocar aqui ó em cima da da scroll viw ainda vou colocar o nosso

pressable vamos copiar o o nosso estilo dela também ó vamos lá o buton text e o buton copiar aqui vamos lá vírgula copiar aqui colar faltou algum deixa eu ver ah não faltou não é onepress aqui ó nesse nosso botão Ou seja a função que vai ser chamada Aqui a gente deu outro nome né ele cham handle submit que é lá do nosso useform e dentro Eu quero chamar o qu eu quero chamar vamos criar uma função aqui ó function vamos dar o mesmo nome para ficar mais legal handle Create então function handle Create abrimos

E fechamos aqui beleza e aqui a gente recebe o nosso data dois pontos form data vamos ver se tá funcionando Vamos dar um console pon log nesse data aqui vou salvar aqui vou abrir aqui minha cara de novo né E vamos abrir aqui o nosso console aqui do lado e vamos testar ó naveguei aqui vou selecionar por exemplo feminino vou selecionar sedentário vou selecionar aqui hipertrofia cliquei em avançar e ele já manda ó Qual que é o o sexo level o objetivo Vamos mudar eu vou colocar aqui masculino Vou colocar aqui definição cliquei já mandou

ó sexo eh já colocou aqui também o level já colocou aqui o definição perfeito né se eu mudasse aqui por exemplo para altamente ativo avançar e ó já muda ali também então sensacional a gente já tá agora pegando os dados que você digita agora o que a gente precisa fazer é Além de eu pegar os dados a gente precisa igual a gente fez na primeira página que é eu pego os dados que você me manda e passo lá para aquele da nossa Store para salvar lá dentro os dados dessa página aqui e depois Navegar pra

nossa página final Então vamos vamos voltar aqui vou importar aqui o nosso o nosso Store então Import from barore bar datata vamos trazer aqui o nosso US data Store e aí a gente pode usar dentro do componente depois aqui do use form né con vou chamar de set page one iG dat Store pego o nosso state abro aqui a nossa setinha state set page to na verdade né essa página Create aqui a gente tem usar o set page to Beleza então agora a gente pode usar tirar esse console set page abre o pares abro Chaves

aqui dentro se eu der um control espaço ele fala as propriedades que eu preciso passar então level dois p data level que mais é o nosso gender aqui né data P sexo né E também o nosso objective do p. objective Aqui passamos os dados lá PR Nossa Store então ele vai salvar além dos dados que tem na primeira ele vai salvar também os dados que a gente colocou na segunda e depois disso eu tenho que navegar o usuário pra próxima página Então vou salvar isso aqui e a gente cria a nossa última página pra gente

finalizar o projeto vamos vir aqui dentro ó app Vamos criar mais uma pasta vou chamar aqui de ntion dentro dela New file index.tsx E aí vamos criar aqui ó RN funk vamos chamar de Nutrition Vamos criar aqui uma View o fechamento da nossa View colocar aqui um text texte P page vamos importar aqui o nosso text Style sheet também vamos importar Vamos criar ele aqui já Styles iG stylesheet P Create abro o parênteses e abro o Chaves aqui dentro vou criar vou deixar aqui sem nada por enquanto salvamos aqui ó primeira sempre maiúscula e agora

a gente vai lá no nosso Under L layout duplicamos aqui que a gente já conhece o nome aqui se chama como ó pasta Nutrition então pasta Nutrition e o arquivo dentro é index então barra index salvou aqui pode fechar o layout e agora aqui no nosso cliente depois de salvar lá na nossa Store a gente pode navegar o usuário Então vamos importar aquele nosso router que a gente já conheceu para navegar né então Expo router vamos trazer aqui o carinha chamado router E aí depois que você passar aqui dentro da função eu posso Navegar então

houter PP então navegas para a página chamada Nutrition aí beleza cuidado nos nomes Aí salvei vamos testar vamos lá Vou preencher aqui a Ana 67 1.70 a idade atual 26 avançar selecionar aqui feminino vou selecionar aqui algum nível beleza avançar e perfeito chagamos aqui na nossa última página aqui então agora o que que eu quero fazer né Qual que é o fluxo eu preenchi os dados nas duas páginas naveguei você nessa página o que que eu tenho que fazer aqui quando eu acessar a página de Nutrition que é a nossa dieta eu tenho que pegar

os dados lá da nossa Store que lá que tá salvo o nome peso tudos os dados E aí eu mandar paraa Nossa api vamos lá então para isso Ó vou Minimizar isso aqui vamos lá e eu vou pegar aqui então então vou pegar aqui ó e vou fechar essa página e vamos aqui mexer na nossa Nutrition então aqui como é que eu pego os dados Import from pon P barra pon pon barra até lá na nossa Store barra data pego a nossa função Zinha chamada use data Store dentro do componente eu posso pegar então conch

chamar aqui de Nutrition por exemplo igual use data Store state abro aqui state P user né Ou a gente pode chamar até de user aqui ó eu vou dar um console nesse nosso user vamos ver se eu tô recebendo algo salvei vou voltar aqui no nosso projeto deixa eu abrir o console aqui ó ele já at Até apareceu aqui mas vamos voltar isso aqui né Vamos dar um cont CRL M Reload aqui pra gente recarregar enquanto eu tomo a água vamos lá gerar dieta eu vou colocar aqui o Fulano vou colocar o peso dele vai

ser 58 1.60 peso atual é altura né A idade eu colocar 23 avançar sexo masculino ã levemente e vou colocar hipertrofia avançar e olha lá quando chega nessa página aqui a gente mostrou um console que a gente pega lá da nossa Store qual que é os dados que tá salvo lá então ele mostra pra gente aqui já que eu tenho ali o Age eu tenho masculino a altura então tenho todos os dados aqui agora o que a gente precisa fazer é acessou essa página eu tenho os dados manda pra nossa Api para fazer requisição pra

gente pegar então a dieta com base nessa pessoa vamos lá a partir de agora a gente precisa deixar rodando o nosso backend Então deixa eu abrir aqui a pasta do nosso vou abrir a pasta do nosso backend deixa eu abrir aqui o CMD dentro da pasta dela Beleza então abre aí o CMD dentro da pasta do nosso backend E aí aqui dentro né vamos dar aqui o nosso npm Run espaço Dev pra gente rodar o nosso projeto lembrando né se eu Minimizar aqui ó e a gente voltar aqui dentro da nossa Thunder client só pra

gente olhar então aqui dentro a gente tem a nossa rota de Create e temos a nossa rota de teste tá uma coisa que agora a gente precisa utilizar como a gente tá no react Nate é ao invés da gente utilizar por exemplo o nosso local host aqui ó para poder buscar as requisições a gente vai precisar usar o nosso E pv4 por quê Porque o local host ele não tem um https aqui no nosso caso e aí pra gente fazer a requisição http a gente precisa no react Nate usar né ou https Ou a gente

pode usar o ipv4 então você pode abrir o seu CMD digitar aqui IP config por exemplo no Windows né e pegar o seu ipv4 no meu caso é esse aqui ó Então vou copiar ao invés de usar o local host eu vou usar aqui ó ipv4 no lugar então http dois pontos barra barra o nosso logo ipv4 dois pontos aí a porta barra e aí arrota então se eu dar um send aqui ó vai funcionar da mesma forma aqui então é só aguardar que ele vai fazer requisição e pronto já funcionou Beleza então Ó vou

copiar essa URL e agora vamos configurar pra gente poder fazer a requisição e finalizar então para isso ó vamos lá fechar aqui um pouquinho vamos criar aqui na raiz uma pasta chamada Services dentro dela New file chamar aqui de na verdade api.ts e aí aqui dentro Import axus from axus Export conch API igual a axus pon Create abre fecha parênteses abre e fecha o Chaves e aí a gente vai ter uma base url cuidade que o URL é tudo maiúsculo e aí aqui dentro a gente vai colar qual que é base URL Vou colocar aqui

a nossa URL ó a base URL se a gente separar ó essa rota aqui ó essa rota não muda né Então essa é a rota base URL a partir daqui é uma rota Então aí é Create teste é o que a gente tiver Então essa é a base url que a gente não vai mudar vou salvar isso aqui agora e agora a gente precisa também ó configurar o react query react query ele vai servir pra gente poder ter Cash nas requisições para ter uma requisição e com uma experiência do usuário mais interessante pra gente poder

manipular quando tá loading ou quando falha a requisição a gente também mostrar de uma forma mais fácil aqui pro usuário Então vamos usar ele para fazer isso a gente vai vir aqui dentro do nosso underline layout que é onde tem as configurações da Rota ou seja aqui vai passar em volta de todas as nossas rotas Então vou importar ele aqui ó @t stack vou trazer aqui o nosso query client provider e o query client e a gente vai instanciar então dentro aqui ó dentro do componente con query client igual a new query query client abre

e fecho aqui e em volta eu preciso passar então em volta da stack ó query client provider ele abre e fecha ó eu passo em volta de toda a nossa stack toda a stack ó tem que estar dentro dessa tag query client provider E aí para ela eu preciso passar uma propriedade chamada client E aí a gente passa esse nosso query client que a gente inicializou então agora eu posso usar esse nosso query client Olha que sensacional salvamos aqui vamos lá na nossa página Nutrition e vamos utilizar então aqui ó eu vou importar o axus

que a gente acabou de configurar pon pon barra pon pon barra acessar os Services barra api vamos trazer aqui o nosso api e vou Import tá também ó o nosso query client o nosso 10 stack @t stack react query e a gente vai trazer aqui apenas o nosso use query Opa use query pra gente fazer as requisições http da nossa do backend então lembrando né backend tem que tá rodando deixa ele aí e minimiza Beleza então agora vamos fazer a requisição primeira coisa a gente já apega os dados que você tem lá que você preencheu

no formulário então agora a gente pode a nossa requisição então com abre e fecha o Chaves igual use query abre fecha parênteses abre e fecha o Chaves e esse use query eu preciso passar dois caras né que é o query Key abre e fecha o colchete e eu passo qual que é o identificador para esse cara eu vou falar aqui a Nutrition tá caso a gente queira depois invalidar o cash ou fazer mais ações com esse query aqui com essa requisição vírgula a gente precisa passar aqui uma query fn que é a função que eu

quero disparar que é no caso a nossa requisição Então assink esse recebemos uma função aqui ó anônima aqui dentro a gente faz a requisição então try e o catch Caso der erro ele vai cair no catch se cair no catch vou dar um console P log pra gente ver se é agora dentro do nosso try eu vou tentar Primeiro vou verificar se tem aluma coisa dentro desse user então if abre fecha parênteses se não tiver nada dentro desse user quer dizer que por algum motivo tá vazio aí eu vou dar aqui um throw throw New

error né então a gente lança um erro aqui caso não tenha né então failed get load no Nutrition por exemplo né então vamos colocar um erro aqui para lançar excessão e agora depois a gente faz a requisição vamos lá con response igual a wait então a gente precisa esperar essa requisição api ponto do tipo post lembra que é do tipo post E aí barra Create né que é o nome da nossa rota se a gente olhar é do tipo post barra Create E aí eu preciso passar essas informações com esses parâmetros só vou até copiar

aqui ó para não escrever errado né então abre e fecha os Chaves Vou colocar aqui um cont control V só deixa eu apagar aqui esses aspas duplas que aqui a gente não tem né aspas duplas aqui cuidar beleza maravilha só que a gente vai pegar do nossos dados do usuário então ol lá user pon name aqui no ae user page no nosso sexo vamos lá user pto o nosso gender aqui e na altura user pon High na no peso também a gente tem aqui o user ponto vamos pegar o peso o objetivo também a gente

tem o user p objective e o Level A gente tem o nosso user. level então ele vai fazer a requisição a gente usa o await para esperar né porque ele é uma Promise a gente recebe o retorno nesse nosso response E aí podemos olhar response console.log response o axius sempre devolve o da a o valor da resposta dentro da propriedade P data Vou salvar isso aqui e a gente desa salvei Opa abri o CMD aqui do nosso servidor do nosso aplicativo vou voltar aqui vou dar um cont control m e vou dar um Reload aqui

para só para ele recarregar a nossa página tá lá vamos lá beleza vou clicar em gerar Vamos colocar aqui por exemplo Henrique vou colocar o peso aqui vai ser 67 1.70 a altura ele tem por exemplo 26 anos tá vou avançar eu vou colocar aqui que é masculino É sedentário e ele quer hipertrofia ganhar peso né então avançar ó tá gerando a dieta e ele deu um erro aqui ó vamos ver que erro que é Vamos abrir o nosso CMD vamos olhar aqui ó query data cannot be undefined ou seja eh Garanta que você vai

retornar um valor e e não undefined então o que a gente vai fazer aqui é ele retorna pra gente aqui A gente precisa retornar algo também então vou dar um return tá response pon datata então o nosso query function precisa retornar algo pra gente poder usar na interface ou retornar o response pon data por enquanto e dentro do use query a gente pode pegar aqui essa propriedade data que é os dados do retorno da nossa chamada eu posso pegar aqui também o is fetching que é enquanto ele tá carregando e também vírgula o is error

né que é basicamente quando deu erro ou na verdade a gente pode pegar até o error direto que é caso de erro ele vai ter alguma coisa aqui e aí você pode tratar por exemplo em cima do return if se tiver is fetching quer dizer que ele tá carregando né então aqui dentro Eu vou dar um return abre fecha parênteses Vou retornar aqui uma View e dentro por exemplo um T gerando estamos gerando sua dieta E aí vou até colocar mais um texte aqui embaixo Vou colocar aqui consultando e três pontinhos só para ficar legal

né E aqui então vamos dar aqui um Style Styles vamos dar o nome aqui de loading show bola vou copiar aqui aqui vai ser o nosso loading Text e o de baixo também vai ser o nosso loading text beleza vamos criar aqui então Ó Primeiro vamos colocar o nosso loading que vai ser Flex 1 BG que é o nosso background vai ser o Colors ponto acho que a gente não tem o Colors aqui né Vamos importar pra gente poder usar nossas cores pon pon barra pon pon barra constants barra Colors e a gente vai trazer

aqui o famoso Colors né e agora a gente pode utilizar lá embaixo a gente pode usar aqui ó Colors background que é a cor de fundo que a gente quer vou salvar isso aqui ó agora sim consultando e ali perfeito vírgula loading vou copiar aqui o nosso loading text dois pontos abre e fecha os Chaves vou dar aqui um Font size de 18 vírgula color Colors P White aqui e Maravilha e também vou dar aqui um margem botton de colocar aqui uns oit Vamos colocar um quatro aqui salvei ó ele tá gerando ali consultando a

nossa ia se a gente olhar aqui a nossa requisição Agora ele já vai devolver pra gente aqui ó toda a nossa objeto data tá então ele já consulta aqui a nossa ia enquanto ele está carregando ele mostra o que a gente colocou no sing e eu posso colocar né Vamos centralizar isso também vou Minimizar aqui ó vírgula jud fy content como Center e o nosso align items como Center tá só que você percebe que toda vez que eu salvar o código ele vai lá consultar Nossa ia porque ele vai gerar aqui e vai consultar pra

gente não ficar gastando requisição para estilizar aqui a nossa interface vamos usar Aquela nossa rota de teste Então a gente tem uma rota que a gente deixou que é barra teste ó se eu salvar aqui ó ele dá uma uma rota fictícia né que é os mesmos dados de retorno então a gente vai vir aqui ó vou vir aqui vou pegar vou dar um control barra só pra gente comentar e a gente vai fazer a mesma coisa ó con response igual a waight api.get que ela é do tipo get E aí é barra teste tá

Opa é teste é que eu coloquei então barra teste e a gente não precisa enviar nenhuma informação né ele já vai fazer lá a requisição e devolver os mesmos dados aqui então usamos aqui e a gente devolve o console Vou salvar aqui ó e aí a gente não fica por enquanto gastando a a requisição limite da nossa api gratuita né Então vamos usar por enquanto isso aqui depois a gente volta aqui pros dados só pra gente utilizar então ó a gente faz a requisição ele devolve o console aqui e se a gente olhar eu tenho

então todo o retorno aqui agora no console ó data tenho altura eu tenho aqui o peso tenho as refeições ó tá vendo só que ele vem dentro de um arrei então agora vamos usar isso aqui então quando a gente retorna pra nossa ap dentro de outra propriedade pon data eu preciso dar um console no data pon datata para acessar exatamente os valores aqui né E também return response pdata pon datata aqui tá só que se eu coloco o mouse em cima ele não sabe olha só ele não sabe qual que é o retorno disso aqui

e é interessante a gente tipar né ou seja falar qual que é o retorno porque se eu acessar aqui ó respon pon data ponto ó ele não sabe o que que eu tenho não sabe que eu tenho um ponto data aqui dentro então vamos fazer essa tipagem aí falar qual que é o retorno Então olha só muito simples a gente pode vir aqui ó vou fechar aqui um pouquinho criar uma pastinha na raiz aqui chamada types vou criar aqui ó New file vou chamar de data.ts e a gente vai criar aqui ó Export interface data

abre e fecha os Chaves aqui como é que eu recebo o retorno se a gente olhar na nossa aqui no Thunder client ó na rota de teste por exemplo ou nessa rota eu recebo esses retornos aqui ó então vou fazer o quê Vou deixar aqui do lado vou clicar aqui ó e vou mover aqui pro lado fechar aqui embaixo só pra gente conseguir ó vou puxar aqui um pouquinho ó só para eu ver o retorno né e eu vou escrevendo aqui do lado para ficar mais fácil então Ó eu tenho a propriedade deixa eu Minimizar

propriedade nome que ela é uma string ó tá dentro de aspas é uma string se tá nessa cor é um número então é uma string então sexo é uma string idade já reevo como número então Number é altura é number peso Number A gente recebe objetivo Number agora eu recebo uma Rei chamada refeições Então vou criar aqui fora criar aqui em cima na verdade interface e refeições props e eu recebo dentro dela uma propriedade chamada horário horário que ela é uma string receba uma chamada nome que é uma string alimentos que ela é uma Array

de string Então ela é uma string só que ela é uma Array e acho que é só isso né e agora eu vou lá que a gente recebe aqui no nosso data uma propriedade chamada refeições que ela é do tipo refeiçõ PR ela é uma arre então cada item da refeição tem um horário um nome e uma Red alimentos né uma Red de lista aqui ó cada um é uma string tá perfeito né salvamos aqui então a gente deu um Export agora eu posso acessar lá no nosso arquivo Então vou vir aqui lá na nossa

página Nutrition index a gente pode vir aqui no topo e importar Esse Cara essa tipagem pon pon barra pon pon bar types Barra data Olha só trago o meu data aqui e eu vou falar aqui ó interface response data que ela é do tipo dentro a gente tem uma propriedade data que ela é do tipo data aqui beleza olha só que legal agora eu pego essa nossa tipagem que a gente deu aqui no topo e forneço para a nossa response ó antes do get sinalzinho de maior menor passo o nosso response pdata agora quando eu

coloco o mouse ele sabe o que que é olha a diferença tá olha só console pon log response pon datata ponto Olha lá ele sabe que eu tenho ponto data ponto Olha lá ele sabe tudo que eu tenho se eu acessar as refeições na posição zero para pegar a primeira Opa pegar a primeira refeição ponto Olha lá tudo que ele sabe que eu tenho então maravilha né vou tirar esse console daqui que a gente não vai utilizar e agora vamos lá a gente retorna a nosso response pon data pon data aqui e agora a gente

pode acessar através do usequery Então dentro aqui a gente já fez o nosso sing que é enquanto ele tá carregando ele mostra aqui ó estamos gerando sua dieta consultando i a eu vou copiar esse if aqui em cima do return vou colar de novo e a gente também tem o Nossa propriedade error que é caso der erro falha requisição sei lá de algum erro ele vai cair aqui então se der error então se tiver um error eu quero retornar a mesma coisa aqui eu vou colocar só uma mensagem diferente né falha ao gerar dieta e

aqui eu posso colocar por exemplo um link para navegar o usuário para outra página então a gente pode importar aqui também ó daquele nosso Expo router que a gente já conheceu o nosso link então Caso der erro né eu vou retornar por exemplo o nosso link abre fecho aqui dentro um texte aqui dentro por exemplo tem novamente e aí aqui dentro Eu só vou colocar o nosso estilo aqui do link ó perfeito e aí aqui eu preciso passar aonde eu quero navegar quero navegar o usuário para aquele nosso barra step por exemplo que é para

ele gerar lá uma nova dieta ou pro Barra né Se quiser rodar para Inicial você pode também então pronto a gente tratou o erro tratou quando tá carregando e agora falta só a parte visual da nossa interface como é que a gente vai tratar os dados aqui agora porque eu faço a requisição e eu já recebo ele através da propriedade data Então agora eu já posso usar Então dentro aqui ó vamos lá no nosso return Vou colocar aqui o nosso Style Styles P container Vamos criar aqui já ele container dois pontos abre e fecha os

Chaves A gente tem aquele nosso background que é o Color background vou falar aqui vírgula Flex 1 para ele pegar a tela inteira eu acho que é essa cor né deixa eu dar uma conferida aqui é essa cor depois disso a gente tem o que a gente tem o nosso reader né que é um ao lado do outro então vamos construir ele aqui porque ele é diferente então aqui dentro vou tirar Vamos criar aqui uma View essa View aqui ela vai ter uma Style abro aqui sty container chamar de container heer com H maiúsculo dentro

dela então eu vou ter a área do conteúdo Então vou colocar aqui uma View Styles Styles content content reader só para ficar mais mais objetivo e dentro então a gente tem o text que é minha diet colocar aqui já o estilo para ela né Style Styles p title e depois a gente tem o botão de compartilhar Vou colocar aqui o nosso pressable acho que a gente não importou né Vamos importar aqui ó do react Native pressable e vou trazer aqui os scroll View também então aqui embaixo pressable abre e fecho dentro a gente tem o

text que é compartilhar vou dar aqui um Style para ele Styles pbon share vou copiar esse estilo aqui e a gente tem o Button share text Então olha só a gente tem uma View que é o nosso content reader deixa eu até dar um enter aqui ó que dentro a gente tem um texto e um botão para ficar um do lado do outro e no nosso container header é só para a gente deixar essa área branca aqui ó então vírgula container header background color Colors P White border Bottom radius Opa Bottom left radius que é

aquela bordinha embaixo arredondada border Bottom right radius de 14 também e a gente pode dar um espaçamento então pading top vou dar aqui uns uns 50 pading botton aqui vou dar uns 20 também para dar um distanciamento legal e caso tenha alguma coisa embaixo margem botton de 16 aqui também e agora a gente pode ir no conteúdo dentro dentro a gente tem o qu o texto e o botão então o nosso content reader vírgula Flex Direction Row para mudar a direção um ao lado do outro vírgula align items como Center que eu quero centralizar eles

no heer show e vírgula justify content aqui como Space between ou seja cada um no seu canto e claro dá um distanciamento de 14 que a gente tá aplicando então vírgula como é um distanciamento interno pading left de 16 e vul pading right de 16 então agora sim e aí o nosso reader né o nosso titz dentro doer ó vamos lá vul tit Font size aqui a gente pode colocar para ele 30 color Colors background e f aqui como B né 30 ficou meio grande né V colocar uns 28 aqui show de bola e agora

compartilhar a gente pode também dar aqui um uma corzinha para ele né Button share vírgula background Colors P Blue align items como Center e vírgula justify content como Center pra gente centralizar tudo né E aí também vírgula padding colocar oito em todos os lados e vírgula border radius aí radius de quatro né para arredondar um pouquinho e dentro a gente pode só deixar né branco então texto Dentro a gente colocou já o estilo vou copiar aqui o nome vírgula Button share text color Colors PW beleza vírgula Font weight aqui como 500 para deixar ó semibold

né que é quase então Maravilha criamos aqui já o nosso cara vou dar um distanciamento maior no nosso content vou dar un 60 de espaçamento aqui em cima beleza Ficou melhor agora aqui embaixo a gente tem de fato os dados do usuário então a gente recebe os dados dentro da nossa prpr idade data ó que o use quer fornece pra gente que é o retorno da api Então é só a gente utilizar agora então Ó depois do container header ó tirar os espaços aqui depois o container header a gente vai ter a nossa interface vou

colocar em volta de uma scroll View né porque pode passar o tamanho da tela Então ele pode passar a gente tem que ter um scroll aqui então vou dar só um Style aqui Style abro duas Chaves pading left de 16 e pading WR 16 também só para não ficar grudado os itens dentro cuidado que é duas Chaves porque a gente passou um estilo diretamente e agora é só a gente passar o que eu quero abre e fecha o Chaves Eu vou acessar o Nossa propriedade data então se tiver um data e se o nosso Object

P Case ou seja se esse nosso objeto chamado data pon Len ou seja se se os dados dentro tiver forem maior que zero quer dizer que tem alguma propriedade lá dentro dois ex comercial abre e fecha parêntese e agora eu posso retornar como eu quiser então abre fecha um fragment que é uma tag sem nenhuma estilização abre o nosso Text e eu vou colocar por exemplo nome da pessoa colocar o nome direto né abre fecha Chaves data ponto Olha lá como Nossa tipagem ajuda ponto nome se eu salvar aqui ó olha o Mateus ali ó

sensacional né então Style Styles P name por exemplo vou duplicar aqui o próximo vai ser o data ponto objective E aí vai ser por exemplo foco beleza e aqui vai ser Styles objective de baixo depois aqui vai ter ter um text chamado refeições dois pontos Vou colocar aqui também um um Style para ele Style Styles P Label e vamos criar esses aqui então primeiro o name objective e o Label Então vamos lá embaixo vírgula name Font size de 16 color Colors P White colocar o nome maior né vou colocar uns 20 aqui o nome vírgula

Fontes aqui como bold V deixar ele vou até colocar antes Aqui ó antes do nome Vamos colocar nome dois pontos e um espaço só para ficar legal ó beleza vírgula a gente tem também o nosso objective color Colors White e Font size Vamos colocar 16 aqui para ficar padrão e a gente pode dar uma margem né para distanciar aqui embaixo então vírgula Margin Bottom colocar aqui uns 24 para distanciar aqui das nossas refeições e vírgula Label abrimos aqui Chaves color Colors P White Font size de 16 também ó beleza maravilha vamos dar aqui um Font

weight aqui como bold para deixar ele ó beleza e agora que mais que a gente tem né a gente tem agora a nossas refeições se a gente lembrar vamos aqui no nosso Thunder client as nossas refeições a gente recebe essas refeições aqui dentro de uma propriedade chamada refeições que ela é um arrei Então ela é uma lista a gente precisa percorrer ela para ir sim a gente montar como a gente quer então vamos fazer isso ó a gente já pode ter acesso aqui dentro ó depois aqui do nosso refeições dentro aqui colocar os itens dentro

aqui se você não quer que sua toda sua tela tem scroll você pode mudar aqui essa scroll View para uma View por exemplo uma View aqui para esses dados iniciais sej sejam fixos e e após a refeição aí a gente coloca aqui uma scroll View ó e aí só a parte da da das refeições você possa fazer o scroll essa parte de cima seja fixo fica legal também Então olha só dentro da scroll View agora eu posso criar aqui uma View que vai ser aquela área branco então Style Styles P Foods por exemplo abre e

fecha os Chaves data.on refeições como é uma lista ponto map pra gente usar o map do JavaScript para percorrer a lista E aí dentro do Map a gente recebe uma função anônima posso ter acesso a cada refeição por exemplo tá E aí aqui eu abro e fecho parênteses e eu quero retornar como esse cara eu quero retornar como Av por exemplo tá que vai ser cada item Então como é que eu quero tornar uma View que dentro tem um um título aqui um ícone então a gente pode colocar agora como eu quiser então dentro dessa

View aqui ó a gente pode dar um Style para ela Styles PF por exemplo né vou colocar mais uma View pra gente colocar aquele nosso título e o ícone então um texte aqui por exemplo abre e fecha o Chaves que vai ser o nome dela então refeição que é o nome da propriedade que a gente deu para acessar cada item ponto nome da refeição dentro dessa vi aqui eu quero colocar o ícone né vamos importar um icin aqui então vou importar aqui ó Import from @x bar Vector icons barra eu vou usar aqui ou a

gente pode trazer aqui ó né o ion icons E aí a gente pode usar ó eu separei um izinho aqui ó ion icons name para ele chamado acho que era restaurante restaur esse aqui mesmo o Size aqui de 16 e o Color de # que é o ícone Preto aqui para ele eu vou dar aqui um Style Styles food heer e depois do food heer que seria essa nossa View que tem os dois itens dentro agora eu quero o restante que é o horário os alimentos e todos os alimentos então depois aqui do food header

ainda dentro do nosso food eu posso acessar o restante que é criar mais uma View Style Styles vamos chamar aqui de food content vamos M dando o nome dos estilos Só para não esquecer depois a gente utilizar né E aí vamos mandar aqui Iron icons vamos ver aqui se ele tem algum ícone Hum vamos ver se tem um fork aqui ó hum deixa eu ver aqui restaurante ou food Ah tem um aqui do food ó vamos pegar essa pizza aqui ó pizza vamos pegar aqui ó pode ser o ícone que você quiser depois né vou

pegar pizza o Size aqui de 14 color # que vai ser o iconeinstagram aqui deve ter um clock clock deixa eu ver se tem algum relógio não tem então a gente pode importar também ó vírgula o feather Né o feather Se não me engano essa biblioteca tem um relógio Então muda aqui ó ah ele tem um relógio perfeito Então vai ser o reloginho depois um text abre fecha Chaves refeição refeição refeição ponto horário vamos salvar pra gente visualizar isso aqui e olha que legal café da manhã Lanche da manhã almoço e aí a gente precisa

agora melhorar um pouquinho isso aqui então toda vez que a gente faz um map dentro aqui do react primeiro item dentro do Map ele precisa ter uma propriedade identificadora ou seja ke então vou passar aqui vai ser a nossa refeição ponto nome então a identificação de cada item que vai ser renderizado vai ser o nome e vamos estilizar isso aqui para ficar melhor então a nossa scroll View dentro a gente tem uma View ó que tá em volta que a gente chamou de Foods que nada mais é do que essa área em branco e dentro

tem cada item então Foods vamos lá vírgula tá ficando muito massa BG Colors pwh então a gente ó coloca tudo branco perfeito pading a gente pode dar aqui uns oito de espaçamento colocar até mais ó uns 14 espaçamento vírgula border radius aqui de oito deixar um pouquinho arredondado vírgula margem top de quatro deixar ou oito aqui ó para dar um lenciamento aqui do nosso texto de cima legal demais vírgula vou dar aqui um GAP de oito para dar um distanciamento entre cada refeição Então vamos subir lá que mais está faltando então a gente fez aqui

o nosso FS que é quem tá em volta dentro a gente tem agora cada item então cada itzin né que vai ser basicamente cada Card C aqui ó né então vamos copiar aqui o nome vamos lá embaixo e vírgula food eu quero o qu eu quero que ele tenha um background vou usar aquele nosso rgba aqui ó dentro de aspas 208 208 208 que a gente já usou E aí vírgula 0.40 aqui ó e vai ficar um cinzinha bem legal vírgula pading de oito também border radius de oito para dar aquela arredondada legal colocar quatro

para ficar um pouquinho menos arredondado e depois disso que mais que a gente tem né a gente tem aqui o nosso reader que tem o texto que é o nome da refeição e o iconz do restaurante Então a gente tem uma View que é só para colocar um ao lado do outro então ó food heer vírgula FX Direction que a gente já conheceu que é Row ó um ao lado do outro e aí claro né align items Center para ficar legal para ficar Centralizado e vírgula justify content se quiser Center ó centraliza tudo mas o

nosso caso é cada um num canto então a gente tem o nosso famoso Space between que é um espaçamento entre eles ó cada um no seu canto sensacional agora além disso a gente tem também o nosso nome aqui né Vamos dar um estilo para ele Style Styles P food name por exemplo vamos lá embaixo vírgula food name vamos dar aqui um Font size de 16 vírgula Font aqui como B né o peso né a grossura dela já tá bacana aqui no food heer também eu vou dar aqui um vírgula Margin botom de qu dar um

distanciamento aqui embaixo e agora aqui embaixo a gente tem que mais o food content que também é para colocar o reloginho ao lado da do horário né colocar até horário aqui ó dois pontos e vou dar um espaço então food content vamos lá do lado vírgula food content abre fecha os Chaves Flex Direction Row vírgula align items como Center e vírgula GAP de quatro aqui para dar um distanciamento do reloginho e o nosso texo aqui ó beleza demais que mais tá faltando Mateus Pra gente finalizar isso aqui os alimentos só isso né os alimentos Então

vamos lá vamos subir aqui depois aqui do nosso avio do food content a gente vai ter um text aqui por exemplo alimentos dois pontos vamos dar aqui um Style Styles ponto vamos dar aqui o food name por exemplo acho que vai ficar muito grande né Vamos food text por exemplo pra gente colocar aqui vamos lá embaixo vírgula food text Font size de 16 Margin Bottom de quatro e vírgula margem top colocar aqui uns 14 para dar uma distanciada legal beleza e agora aqui embaixo é só a gente listar os nossos alimentos Então abre e fecha

os Chaves Vou acessar o nosso refeição refeição ponto alimentos se a gente olhar o alimentos ó é uma lista de string então eu posso percorrer então ponto map cada alimento aqui dentro vou receber alimento vou chamar abro Nossa setinha aqui abro o parêntese E aí eu como que eu quero retornar quero retornar cada um vai ser um texto né Então abre e fecha Chaves alimento então ó quando a gente faz a requisição dentro do da propriedade alimentos ó cada a gente recebe uma lista que cada item é um alimento então vou percorrer ela percorro ela

com o map cada uma e cada uma eu vou retornar dentro de um text a gente retorna a cada alimento Vou salvar isso aqui e como a gente tá dentro de uma lista primeiro item propriedade ke a gente precisa passar algum item de identificação Então a gente vai passar o próprio nome do alimento ali salvamos aqui agora e olha que sensacional né já ficou muito massa aqui já temos a nossa lista aqui falta dar um espaçamento melhor ali embaixo Mas depois disso a gente ainda tem os nossos suplementos né ele tem aqui aqui as dicas

de suplemento Vamos colocar também então Olha só vamos voltar aqui a gente já fez basicamente tudo né então agora depois dessa nossa View aqui que é a das comidas ó a gente pode dentro da scroll View ainda tá colocar mais uma mais aqui por exemplo uma View que vai ser dos Suplementos Style Styles P suplements por exemplo dentro a gente pode ter o text por exemplo dica de suplementos Mentos E aí aqui vou dar aqui um sty Styles vamos dar aqui o food name PR ver acho que já fica legal salvei aqui só que ó

eu não tô conseguindo enxergar por se a gente olhar aqui ó em volta da nossa da nossa dos itens aqui ó a gente tem uma View concorda em volta aqui ó que a gente até deu um espaçamento na esquerda e direita aqui a gente pode dar uma vírgula falar olha você vai tentar pegar o restante da tela Ou seja a tela inteira então a gente passa um Flex um para ele e aí a gente consegue ó fazer o scroll Total aqui ó até o final tá então fica bem legal show de bola e agora aqui

embaixo ó dica de suplementos depois da dica de suplemento a gente pode percorrer a nossa lista Então vou colocar aqui abre e fecha o Chaves acessar o nosso data ponto Cadê o suplemento não colocamos né então vamos ver a nossa tipagem vamos verificar aqui ó vamos lá no nosso types data Ah faltou aqui mesmo a gente tem aqui uma uma propriedade ó quando a gente faz a requisição que se chama ó suplementos e dentro é uma lista de string então a gente pode colocar aqui ó suplementos dois pontos que ela é uma string e ela

é uma então uma rede de suplementos salvamos aqui então agora a gente consegue acessar ó abre e fecha Chaves data ponto Agora sim suplementos pon map abre e fecha o nosso parênteses E aí eu posso acessar vamos chamar aqui de cada item a gente pode chamar de suplemento né ou item vamos chamar de item abre fecha parênteses cada item eu vou renderizar dentro de uma tzin de text também abre fecho Chaves cada item aqui beleza precisamos passar aquela propriedade Key que vai ser cada item para identificar aí cada um Vou salvar pra gente visualizar vamos

lá embaixo e olha aqui nossos suplementos maravilha né Vamos só fazer estilo final agora dessa nossa parte vírgula suplements eu quero dar um BG Colors P White vamos lá embaixo de novo ó beleza vírgula Margin top eu vou colocar aqui uns 14 Margin Bottom aqui dos nossos suplementos eu vou colocar 14 também que mais a gente tá dando quanto de espaçamento dentro do nosso Foods aqui a gente tá dando um espaçamento de 14 né então a gente pode vir aqui aqui vírgula pading de 14 também border radius de oito Opa border radius né para arredondar

a bordinha de oito vamos ver como é que ficou Olha lá que legal e Maravilha pronto aí já os nossos suplementos e agora para finalizar com chave de ouro a gente pode colocar até um botãozinho para caso ele queira gerar uma nova dieta para ir lá pra página de inicial né que é para clicar no botão e gerar uma nova dieta vamos supor que ele quer gerar uma nova então só para fechar essa parte a gente pode colocar um botão aqui também né a gente já portou aqui o nosso pressable então a gente pode criar

Aqui ó pode ser dentro da scroll View a gente pode colocar aqui um pressable olha só que bacana um text por exemplo gerar nova dieta só para ficar bacana um Style aqui Styles pon Button chamar só de buton mesmo e aqui também buton chamar de buton text o estilo dele D aqui um enter Zão maravilha aqui ó para quebrar a linha Vou salvar e aí vai ficar lá embaixo ó gerar nova Dieta e aí a gente pode utilizar vamos lá embaixo vírgula background color Colors P Blue vírgula Vamos mandar aqui para ele também um pading

de oo em todos os lados ou se quiser usar aquela mesma altura né uma altura de 40 um justy content aqui como Center e Aine items também como Center né para centralizar todo o texto no centro se a gente olhar ó já tá ali ó beleza e aí também vamos deixar aqui o item branco né então o nosso vírgula buton text text aqui ó como Color White aqui salvei vamos ver como é que ficou massa demais e aí só pra gente deixar a bordinha arredondada no nosso botão também né vírgula border radius aí e o

que é o que a gente tá usando aqui ó vamos ver como é que ficou Vamos descer lá meu Deus fechei sem querer fechei sem querer vamos lá aí agora sim aqui no nosso botão text Font size de 16 e um Font aqui como o b né Vamos deixar só para ficar legal e aí para garantir um espaço aqui embaixo a gente pode no nosso botão Margin Bottom Vou colocar aqui uns 24 então a gente dá um espaçamento maior ó lá embaixo também ó Beleza então agora a gente finaliza toda essa parte aqui das Dietas

só que por enquanto a gente tá usando né a nossa requisição que era a nossa rota de teste lembra rota de teste agora vamos apagar essa nossa rota de teste vamos descomentar a nossa rota real que é para fazer com os dados do usuário né Vamos mudar aqui pro Barra Create lembra de vir aqui ó abre o sinalzinho de maior menor e tipar com o nosso response data beleza e agora sim ó salva aqui e a gente pode fazer de fato a nossa requisição para isso ó vamos atribuir aqui o nosso gerar nova dieta ó

o nosso onpress abro a nossa função anônima E aí a gente pode importar aquele nosso router deixa eu ver se tá importado ó Expo router vírgula router e a gente pode usar aqui ó depois que importa né o nosso router então router só que ao invés de dar um ponto push que é para empurrar a gente usa o replace né então vamos substituir a rota atual que você tá aqui ó tá Quando você clicar nesse botão gerar nova dieta para a rota barra que é a nossa rota Inicial vamos salvar aqui pra gente testar isso

aqui ó olha lá que legal beleza vamos clicar aqui embaixo ó clicar em gerar nova Dieta e ele vem pra nossa aqui nossa página beleza e também eu vi que não ficou Centralizado né vamos ver aqui ó a gente tem o nosso sing que a gente tem aqui o nosso loading vamos ver aqui ó vamos lá na nossa estilo aqui ah no nosso load aqui faltou a gente dar o Just fy content como Center vírgula align items aqui ó items como Center também né para centralizar aquela palavra lá do nosso loading no centro beleza salvamos

aqui e vamos testar agora então agora a gente pode testar aqui ó vamos lá vou colocar aqui o Henrique Ah já tá preenchido aqui ó 67 Beleza vou colocar aqui que tá por exemplo com 90 kg Beleza vou dar aqui um avançar vou colocar que ele é masculino vou Vou colocar aqui agora que ele é sedentário e ele quer emagrecer por exemplo avançar Olha lá estamos gerando sua dieta consultando eá E olha que massa né emagrecer O Henrique já apareceu aqui as refeições dele ó qual que são as refeições dele o horário das refeições dele

ó beleza ó a dica de suplemento aqui já mudou legal demais né então basicamente a gente quase finaliza mas pra gente dá aquela aquele gostinho que eu sei que você tá aqui é o botão de compartilhar né Vamos colocar também a função de compartilhar com alguém pra gente finalizar aqui com chave de ouro esse projeto que tá cara sensacional né então vamos lá pra gente fazer isso aqui agora ó quando a gente clicar no botão de compartilhar aonde que a gente tem a ação vamos lá a gente tem aqui o Nossa o nosso compartilhar Opa

vamos lá no nosso Nutrition fechar aqui vamos aqui embaixo a gente tem o nosso pressable compartilhar então aqui ó eu posso ter o onpress concorda handle share por exemplo então quero dar uma nome de uma função de handle share quando clicar no botão compartilhar então aqui em cima em cima do nosso wif aqui ó function handle share vou dar aqui um console pon log clicou salvei aqui e agora ó vamos consultar dieta lá vamos lá vamos lá cliquei ele vai ter chamado aqui o nosso clicou beleza próximo passo é a gente vir aqui importar do

react Native um carinha chamada share beleza e aí a gente pode utilizar então venho aqui importa né do react Native o share con maiúsculo vamos transformar essa nossa função assíncrona e aí a gente pode usar olha só que bacana try catch caso de erro A gente só dá um console P log mostra esse erro pra gente visualizar aqui caso aconteça tá depois poderia até tratar e agora eu vou verificar primeiro if vou fazer a mesma verificação que a gente fez aqui embaixo ó vou até copiar aqui ó nosso Object P ke aqui ó vamos fazer

aqui ó Object P Keys data se ele for igual a zero quer dizer que não tem nada quer dizer que por algum motivo e nossa propriedade data tá vazia eu vou até verificar ó se tiver um data e esse object.on k ou seja seesse nosso objeto tiver igual a a zero ou seja se tiver vazio aí o que eu vou fazer eu vou dar um return aqui para ele não tentar compartilhar nada vazio né Por algum motivo agora se não aí a gente pode compartilhar então por exemplo a gente pode criar aqui uma mensagem por

exemplo suplements igual vou abrir aqui o nosso Cras e vou vou colocar em linha aqui ó o Cras é aquela as pinhas deitadas né que a gente chama template string então cifrão abre fecha o Chaves pra gente colocar uma variável dentro desse texto e aí eu quero colocar o nosso suplement então data.on suplements pmap né porque a gente recebe numa lista item e eu quero retornar então ó Abro mais uma crase vou dar aqui um espacinho cifrão abre e fecha Chaves cada suplemento Então essa essa suplements aqui ó Opa Escrevi até errado suplements ela vai

vir então toda a nossa lista de suplementos beleza perfeito agora aqui embaixo Vamos criar a nossa lista de refeição Então conch vamos chamar aqui de Foods por exemplo igual a abre o nosso template string cifrão abre e fecha Chaves data interrogação ponto refeições ponto map que a nossa refeição é uma é uma lista né a gente tem acesso a cada item né cada refeição abre o nosso template string de novo e aí eu vou colocar tracinho nome que vai ser o nome de cada refeição dois pontos espaço Vou colocar até uma quebra de linha uma

barra n que é para quebrar pra linha de baixo e aí aqui vai ser então por exemplo cifrão abre fecha Chaves item ponto nome que é o nome da refeição né Beleza deixa eu dar aqui um depois aqui disso eu quero dar também um barra n para quebrar a linha tracinho horário dois pontos cifrão abre F Chaves item ponto horário barra n de novo e aí aqui eu posso colocar os alimentos Então até aumentar aqui para não confundir vocês ó horá barra n tracinho alim passao alimentos dois pontos cifrão abre e fecha os Chaves e

aí item item alimentos P map vai percorrer a nossa lista de alimentos e aí aqui eu tenho cada alimento né e eu quero retornar então Abro mais e fecho mais duas Cras como é que eu quero retornar espaço cifrão abre e fecha o Chaves quero retornar cada alimento beleza e aí fal falta só a nossa mensagem final então conch message pra gente juntar essas duas né Então abre fecho igual abre fecha o nosso crase dieta dois pontos cifrão abre fecha os Chaves data interrogação P nome que é o nome da pessoa tracinho objetivo dois pontos

cifrão abre e fecha os Chaves data pon objetivo cuidado com a interrogação e aí Vou colocar aqui 2 barra n ó para quebrar duas linhas barra invertida N E aí Vou colocar aqui por exemplo os nossas comidas estão cifrão abre fech Chaves colocar os nossos Foods E aí vou quebrar mais duas linhas Ó Barra n barra n cifrão abre fecha Chaves de novo né e colocar a nossa dica de suplemento posso até colocar antes Aqui ó tracinho dica suplemento dois pontos espaço e aí coloco aqui beleza agora a gente compartilha então a gente criou só

para montar né nossa lista de alimentos Nossa lista de suplemento e aqui a gente montou toda a nossa mensagem junta né e agora a gente pode compartilhar então await share ponto share novamente abre o parêntese abro Chaves aqui dentro e aí eu preciso passar uma propriedade que o react Native do share pede que é essa message dois pontos e eu passo a nossa mensagem que a gente montou aqui para compartilhar salvei isso aqui agora e pronto a gente já tá podendo compartilhar toda essa nossa dieta Olha que legal vou vir aqui ó cliquei em compartilhar

Olha que sensacional ele já aparece aqui para mim ó toda a nossa mensagem Claro se eu tivesse rodando no meu celular né com Aplicativo instalado eu poderia compartilhar no WhatsApp com mais pessoas aqui eu vou clicar aqui só em copiar E aí vamos lá embaixo colar vamos ver como que tá montada essa nossa dieta vou colar Olha lá dieta Henrique objetivo emagrecer nome horário alimentos e aí nome da da do da dieta ó lanche aqui horário alimento nome almoço e aí então tem todos aqui então ficou bem legal E aí aqui por último né dica

de suplemento E aí tem aqui os dois suplementos que ele gerou Beleza então deixa eu só apagar isso aqui agora a gente já consegue compartilhar agora a gente já consegue gerar uma dieta E já consegue também vir aqui ó gerar nova dieta pra gente finalizar com chave de ouro isso aqui eu vou até fechar tudo vamos fechar tudo aqui vou trazer minha câmera legal aqui do lado trazer aqui do lado e vão finalizar isso aqui então agora vou gerar uma nova vou tirar aqui vou gerar aqui Ana vou colocar aqui por exemplo o peso ela

tem 56 ela tem um ponto vou colocar um 1,70 também vou colocar a idade deixar aqui 27 Vou colocar aqui avançar ela que é ela é sexo feminino né ela que é levemente ativo se eu clicar aqui ó em não selecionar eu preciso selecionar então selecionar aqui hipertrofia avançar Aqui estamos gerando sua dieta consultando ia e Maravilha Ana hipertrofia e já gerou aqui ó olha que legal né ó já mudou aqui as dicas posso clicar em compartilhar por exemplo vai tá aqui ó vou copiar se eu abrir aqui o meu Notepad só pra gente ver

aqui ó e eu colar Olha lá toda a dieta da da da Ana sensacional então agora né Deixa eu fechar isso aqui voltar aqui pro nosso projeto agora a gente finaliza esse cara aqui vou clicar em voltar aqui a gente finaliza o nosso projeto gerador de dieta onde a gente partiu né que foi sensacional porque a gente partiu desde o back end construir o backend com node JS passo a passo ali comunicar com a gem api como passar um prompt para um prompt Com base no que a gente pedir né e formatar ele também em

Jason e a gente deixou Então essa api pra gente consultar aqui no front end construímos o aplicativo com react Native usando Expo router usando axus usando react query PR só para fazer a requisição também e aí a gente utiliza a nossa api Então pede os dados do usuário avança Aqui pede Qual que é o nível sexo para ele poder mandar lá pra api que a gente espera para criar uma dieta para ele e a hora que a api devolver pra gente então deixa eu só clicar aqui de novo né a api devolve pra gente e

a gente monta na tela como eu quero exibir pro usuário então ele monta aqui tá gerando lá e pronto olha que sensacional né então agora sim e antes de você sair que você ficou até aqui agora lembra de compartilhar com a gente marca a gente lá no Instagram quero ver como é que ficou o seu projeto e para você que quer aprender desde o zero não só em duas aulas aqui e se aprender passo a passo a criar aplicativo para Android para iOS desenvolver site sistemas web sai pronto pro mercado com todo o meu suporte

e acompanhamento O link tá aqui embaixo embaixo e aproveita que o valor é exclusivo e também a nossa turma né a quantidade de vagas é limitada tá então link tá aqui embaixo compartilha com a gente que eu quero ver como é que ficou o seu projeto e o que que você achou desse projeto aí comenta aqui embaixo também te vejo aí no próximo vídeo