Masterclass React Native 2024

Sejam muito bem-vindos a mais um vídeo aqui no canal da code hoje nós vamos falar sobre react Native vai ser uma masterclass eu estou com tempo aqui conts mas se não der tempo eu gravar tudo eu paro no meio e depois faço aqui uma segunda parte da gravação Mas vai ser muito massa essa aula antes eu queria convidar vocês para o nosso evento do dia 22 a 26 de julho de 2024 frontend backend mobile em uma única Aplicação vai ser muito massa a gente trabalhar com essa aplicação falar um pouco das soluções pra gente integrar

Essas tecnologias e também compartilhar as nossas regras de negócio alguém tá falando aqui no WhatsApp eu vou parar aqui pronto e nós vamos começar o nosso desenvolvimento eu queria comentar com vocês Ah vai ter certificado e nós vamos usar Essas tecnologias né o nextjs react nestjs react n typescript banco de dados e vai ser Muito legal ter você junto com a gente link na descrição deixa o teu melhor e-mail se inscreve e vem junto com a gente participar desse evento nós estamos no processo aí de esquenta para esse evento falando das principais tecnologias eu gravei

uma masterc de react e next hoje eu vou falar sobre react Native então aí depois eu vou falar de nes e nós vamos desenvolver duas aplicações uma aplicação web e uma aplicação mobile para você entender aí o Fluxo de como trabalhar com Essas tecnologias dito isso nós vamos entrar aqui na pasta desktop e na pasta esquenta e nós vamos começar a desenvolver a nossa aplicação criando a nossa aplicação react Native se você entrar aqui a por exemplo react native.dev get started para você iniciar se você descer um pouquinho tá aqui o comando npx Create eu

vou até maximizar aqui ó npx Create Expo app @ latest eu usar esse comando tá e nós vamos nome da Aplicação eui aplição de ontem deixa só abrir aqui um LS next masterc eu vou seguir mais ou menos o mesmo padrão colocando react Native tudo junto traço Master CL pronto essa aqui vai ser o nome da nossa aplicação ele vai criar a aplicação e nós vamos utilizar aqui eu vou utilizar que já está configurado meu computador o simulador do iOS Mas você pode configurar aí o simulador do Android do Android vai ser também tranquilo eu

não vou falar do processo De configuração senão deixaria o vídeo muito grande então tem muito vídeo na internet que explica como é que você faz para baixar lá o Android Studio instalar as dependências ou baixar o excode instalar as dependências instalar o simul ador E aí você vai conseguir fazer aí o processo seguir já com o ambiente configurado quando você trabalha com ambientes mobile né o ambiente é um pouco mais tricky né um pouco mais e Eh meu pai tinha uma expressão que dizia Que o peixe tá remoso né reimoso Sei lá uma coisa assim

né como se tivesse mais espinha E você tem que ter mais cuidado então mesma coisa aqui né Você precisa ter um pouco mais de cuidado com o ambiente porque tem essa integração com às vezes com rede eh Você tem integração com permissões específicas do dispositivo para trabalhar você tem uma série de questões que pode gerar aí um processo também de configuração mas que ah vai ser tranquilo pra gente trabalhar Eu abri na pasta errada vou entrar na pasta react Native masterclass vou abrir o nosso visual Studio code eu vou deixar ele aqui do lado do

dispositivo para que a gente consiga ver as interações aqui de forma mais tranquila e aqui a gente vai iniciar o nosso eh projeto utilizando npm Run IOS e você pode rodar o comando npm Run Android caso você esteja executando com Android utilizando Expo que é o caso aqui que é a forma recomendada de iniciar um projeto react Native lá na documentação Esse é o comando que aparece pra gente tá você vai ver que o processo é bem simples o que que acontece aqui que nós vamos eh eu vou trazer isso aqui para cá eh é

o seguinte nós temos aqui dentro vários arquivos eu não quero trabalhar com todos esses arquivos mas o que nós temos aqui no nosso no nosso terminal deixa eu mostrar para vocês ó dentro do terminal você tem uma pasta chamada scripts E você tem uma pasta chamado reset Project Eu vou executar esse script aqui no terminal ó Então vou parar a execução aqui do nosso projeto vou limpar o terminal tá e vou col colocar aqui ó eh barra scripts bar reset Project ele vai ele ele moveu a pasta app chamou de app example criou uma nova

pasta app com o projeto de forma muito mais simples eu vou executar npm Run iOS você vai ver que o projeto que que será executado vai ser um projeto diferente desse não vai ter aqui azar E tal então É um projeto mais simples ele deve ter executado eu vou dar o comando R aqui para ele reiniciar ou dar um Reload na aplicação E Agora Nós temos essa tela aqui bem mais simples e o que eu vou fazer agora vai ser apagar a pasta app example eu vou apagar a gente vai construir ela do zero vou

mover aqui pro Trash Vou apagar a pasta components Vou apagar a pasta constantes Vou apagar a pasta hooks e vou vou deixar aqui a pasta assets Eu poderia até apagar a Parte da fonte que não vai ser usado mas essas imagens estão sendo referenciadas dentro do arquivo app.js que é a imagem Splash os ícones e tal então eu vou deixar a pasta assets image e vou usar aqui apenas essa pasta app com o arquivo layout e o arquivo index P tsx que é o nosso componente de forma bem básica aqui né um componente bem simples

eu vou só diminuir um pouquinho o zoom e nós temos esse componente é index mostrando esse texto Aqui tá certo nós vamos fazer algumas alterações a primeira coisa eh nós vamos usar como navegação o drawer drawer é aquele menu que aparece aqui na lateral da nossa aplicação tá eu até poderia criar aqui já o primeiro componente até porque esse aqui já é um componente Tá mas eu vou querer colocar o drawer pra gente conseguir fazer essa navegação de um exemplo para outro para que a gente possa começar aí o desenrolar da nossa aula eu vou

parar Aqui a aplicação e eu vou rodar aqui um comando ó e aí eu não vou colocar eh tudo na mão não mas eu vou rodar aqui o comando ó npx Expo e install @ react TR navigation bar drawer react Native gesture handler e react Native reanimated tá são essas dependências Leo Onde é que tu viu isso né Por exemplo se a gente procurar aqui e Expo H drawer por exemplo tá então se a gente colocar aqui você vai ver no Drawer ele vai provavelmente dizer que a gente precisa instalar aqui ó tá aqui ó

npx Expo install react navigation drawer react navigation gesture handler react navig react react Native reanimated Então são essas dependências você copia executa e você vai ter o processo aí de instalação agora eu vou rodar npm Run IOS e a gente vai ter novamente a nossa aplicação executando quando você para ele diz que desconectou aqui né mas você coloca eh seleciona o simulador e coloca A letra R ele dá um Reload na aplicação e volta para o padrão que a gente vai vai trabalhar beleza a primeira coisa que eu quero trabalhar com vocês é a ideia

de definir aqui o nosso drawer se a gente for na documentação Deixa eu ver se eu deixei aberta deixei ó se você olhar aqui ele vai e usar esse elemento aqui para mostrar o draw ele vai mostrar aqui um exemplo um pouco mais interessante com algumas dependências eu vou copiar essas dependências aqui e Você vai perceber que ele vai usar uma estrutura inspirada no nextjs que é aquela ideia de ter as rotas baseadas em em a estrutura de arquivos tá E aqui nós temos a segunda aula que é a de react Native dá uma olhada

se você não viu a primeira aula volta lá e assiste a primeira aula de nextjs que vai ser legal que eu vou dar alguns fundamentos de flexbox algumas coisas que eu falei lá a gente vai acabar usando aqui porque Como os dois são baseados no react então acaba ajudando a você entender um em relação ao outro tá eu vou apagar aqui o stack depois a gente volta para fazer aqui um uma um esquema de navegação também com stack Então deixa eu importar deixa eu ver se ele importa não importou né mas eu vou copiar aqui

a dependência ele ver se ele acorda aqui ó essa dependência o drawer deixa eu ver se ele consegue importar também não trouxe vou pegar que é a dependência poderia Colocar manualmente mas pra gente não perder tanto tempo digitando né então a gente tem aqui eh o nosso gesture handler root View É ele que vai ser capaz de e lidar com o gesto de você arrastar pro lado e ele criar um drawer né Ó então aqui ele já já colocou ó se eu arrastar aqui pro lado ele vai mostrar por exemplo o único a única rota

que tem nesse momento que é a rota home tá então se eu colocar assim ó pro lado como também se eu apertar Nesse botão mas se você vier aqui nesse drawer aqui e colocar screen options e tem uma opção que é o header show que é para ele mostrar ou não né Por exemplo você colocar isso aqui falso ele não vai mostrar o header aqui do seu drawer e Mas você ainda pode ou abrir ele de forma programática através de um botão ou você pode abrir ele arrastando pro lado tá ainda tá dando um problema

porque a gente tá apontando para arquivos que não existem Tá mas a gente vai corrigir agora ó nós temos aqui um index isso aqui eu não vou ter essa tela por enquanto e nós temos aqui ó a nossa rota index que eu estou chamando ela de home e o título de overview eu vou mudar o título eu vou colocar aqui o título para ser eh deixa eu colocar um teclado no Eita foi que eu fiz aqui rapaz beleza sei nem o que é que vai acontecer no vídeo mas tudo bem eu bloquei o computador eh

bem-vindo então aqui bem-vindo vai Ser o título da tela e lá no menu eu vou colocar eh início além de colocar início eu vou eu vou deixar por enquanto para ele ficar mostrando aqui depois a gente pode tirar e não ter esse esse botão aqui tá então é uma escolha a gente pode fazer depois então nós temos aqui o início que é a tela que nós estamos exibindo é a tela inicial e o título dessa tela é bem-vindo como eu coloquei aqui em cima e outra coisa que a gente pode fazer é colocar o drawer

icon ou Seja o ícone que nós vamos referenciar através aqui do nosso eh do nosso drawer eu vou colocar aqui um ion o nome o name eu coloquei para ser um home outline eu coloquei um size para ser 18 e eu coloquei a cor tá deixa eu pegar aqui a cor porque eu não vou saber decorar de jeito nenhum é uma corzinha azul para dar um match na cor do texto que está lá então vou colocar essa cor aqui e beleza nós temos agora no nosso Menu o ícone né de um home e aqui a

opção de início Então esse aqui é o nosso drawer a partir do drawer a gente pode criar por exemplo um a nossa nosso primeiro componente digamos assim que a gente vai criar de forma explícita e aí depois a gente registra ele aqui dentro tá ó vamos lá eu vou criar um arquivo chamado primeiro primeiro ptsx e a forma de criar um componente é a mesma forma que a gente cria numa Aplicação react então eu vou criar aqui ó Export só maximizar ó default e function vou chamar aqui de primeiro beleza e aqui a gente pode

criar estrutura eu basicamente coloquei uma View então nós temos aqui um um view do react Native que é correspondente a uma área né uma por exemplo para que você possa colocar os seus componentes e aqui dentro eu coloquei um text você não pode colocar um texto Dentro da sua aplicação diretamente dentro de uma viw Você tem que envolver e ele dentro de um texto de um text tá até porque esse text ele será convertido para um componente nativo tanto do iOS como do Android dependendo da plataforma ou se for paraa web você pode jogar isso

pra web né e a forma de você pegar a aplicação e jogar pra web é muito simples tem mecanismos né A ideia é que você consiga através do react Native fazer aplicações para iOS PR Android PR TV PR PR desktop e também PR PR web ou seja ser multiplataforma se Você for lá na aqui no início da do da nossa página você vai ver ó learn on write né everywhere né escreva Aprenda uma vez escreva para qualquer dispositivos ele mostra aqui ó a parte de Windows Window macos Android e Apple os browsers tá e inclusive

se você entrar parte da documentação você vai ver que algumas coisas T plataformas suportadas né ele também coloca aqui a TV como sendo uma plataforma suportada Então vamos lá aqui eu coloquei Primeiro componente certo e a gente se eu colocar aqui você vai ver que já apareceu aqui o primeiro Eita mas eu não fiz nada nem reg ele já apareceu e já tá indo aqui para o nosso primeiro componente a gente consegue ir pro início e tal Quando você vai lá no layout Ah aqui é importante aqui ele também segue aquele padrão do nextjs que

eu até mostrei para vocês no primeiro vídeo que é você ter um arquivo de layout aqui ele só muda a Nomenclatura que ele coloca underline layout ptsx e esse layout ele é aplicado E você tem as telas que serão e digamos assim carregadas dentro desse layout então quando a gente tá fazendo algum esquema de navegação seja com com abas ou com drawer ou ou via stack por exemplo a gente acaba criando aqui um layout aí você pode criar subpastas dentro dessa pasta app ó muito inspirado na ideia do nextjs né tem a pasta app E

aí você vai Colocando layout esse layout vai coordenar digamos assim aquele conjunto de telas que você você está trabalhando e ele também vai se baseando na questão das rotas dos arquivos né então aqui ó eu vou criar um drawer screen para que a gente possa mapear aqui ó para o primeiro só pra gente ter aqui eh o título eu coloquei deixa eu ver aqui só as informações que eu coloquei ó primeiro eu coloquei o ícone para ser é um Coração é Heart circle outline pronto eu coloquei essa aqui o resto continua igual aqui em cima

eu coloquei para ser o título primeiro componente primeiro componente ó primeiro componente e o Label aqui primeiro componente então quando eu faço isso agora o nosso drawer vai colocar de fato aquilo que a gente pediu para ele colocar né o ícone que a gente pediu e eh o texto que a gente pediu mas baseado na rota ele já percebeu que aquela tela Estava presente e atualizou pra gente mesmo que a gente não tenha e incluído Ele diretamente aqui dentro do drawer porque ele vai basear na questão dos arquivos que você criou tá então aqui a

gente já consegue navegar de um lado para outro lembra que a a gente comentou que a você tem a ideia do flexbox também aqui dentro do contexto do reac Native só que o flexbox ele usa como m Axis o eixo principal o eixo eh da coluna que é o contrário da web ou seja se você Entende o princípio do flexbox a única coisa que ele faz é inverter o eixo principal do flexbox aqui dentro do contexto eh do mobile aqui a gente poderia por exemplo aplicar um Style que não é incomum eh aplicar um Style

diretamente dentro do componente tá e eu posso usar a ideia de Flex um ou seja Flex um quer dizer que a tela vai ocupar o espaço inteiro e ocupando o espaço inteiro a gente pode por exemplo no eixo principal que é o justify content dizer Para o elemento ficar Centralizado então ele vai centralizar no meio da tela e ele já fez isso ó colocou aqui no meio da tela e no eixo cruzado que é o eixo da linha a gente tem aqui eh o align items e a gente também pode pedir para ele centralizar Então

vou colocar aqui ó Center e ele vai centralizar o elemento no meio beleza esse tipo de padrão né Flex 1 justify content Center align Center a gente vai usar muito então pra gente aproveitar aqui e não ficar Repetindo isso sempre eu vou criar aqui uma eh umas constantes e nessas constantes eu vou criar aqui uma específica para ser o styles.ts Claro que eu não vou colocar todos os da minha aplicação aqui nem faz tanto sentido né senão ficaria muito grande e aqui a gente vai usar deixa eu antes de colocar aqui de fazer o seguinte

ó a gente pode criar aqui uma constante chamada Styles que é bem comum e a gente vai usar aqui o Style sheet Para criar digamos assim o nosso estilo aqui dentro e não precisar ficar colocando o estilo diretamente dentro dos componentes então aqui dentro por exemplo poderia colocar e container que é um padrão que ele sugere tá ou então vou colocar aqui ó e centralizar né ou Central alguma coisa do tipo né Centralizado por exemplo E aí eu posso colocar ó Flex 1 justify content Center align item Center então aqui deixa eu só importar o

Style sheet Que eu não tinha importado beleza aqui eu posso simplesmente dizer que eu vou dier enciar o Styles pon Centralizado e ele vai fazer exatamente a mesma coisa se eu e coloco aqui o justify content para ser end né Deixa eu ver aqui Flex end ele vai colocar lá no final ó bem aqui embaixo quase a gente não tá vendo se eu colocar Flex e start ó colocar aqui Flex start ele vai colocar lá em cima e se a gente colocar Center ele vai colocar de fato no meio que é onde eu Vou usar

em muitos cenários Então vou pegar essa esse padrão em vez de ficar replicando em cada um dos componentes eu vou colocar aqui nessas constantes eventualmente a gente pode criar aí Alguns estilos para um botão que a gente vai usar em várias telas e tal e a gente pode colocar alguns poucos estilos aqui e reutilizar isso em várias partes da nossa aplicação só para esse exemplo ficar digamos assim um pouco mais otimizado Então vamos lá aqui no nosso Primeiro componente a gente pode tirar essa parte inteira aqui e eu posso importar os estilos a partir de

constantes barra Style e a gente não precisa mais importar esse elemento aqui então nós temos o nosso primeiro componente Que Nós criamos do zero criando um avio um texto e a gente já pode ir pro próximo exemplo próximo exemplo deixa eu ver aqui a gente poderia criar um contador pra gente trabalhar um pouquinho com Eventos com um pouquinho de estado e fazer um exemplo que envolva um pouco mais de elementos do react então V fazer o seguinte ó nós vamos criar um computador um contador melhor dizendo E aí eu vou fazer o seguinte eu vou

criar eu vou fazer uma mudança aqui ó eu vou chamar e aqui de tela inicial esse componente que tela inicial Eu Vou Chamar esse outro aqui tá depois eu a gente abre aqui ó o eu falei para vocês que o o o o o ambiente é mais sensível Né ó ele fechou aí porque eu mudei o nome do do componente então tela inicial aqui eu vou colocar tela primeiro já que cada um desses elementos são telas e vou e iniciar novamente aqui só para ele rodar novamente o o nosso Nossa aplicação beleza só para seguir

um padrão pra gente eventualmente criar uma tela contador e criar um componente que representa um contador então eu vou criar aqui um contador que eu vou colocar dentro de App então ó contador tsx e vou colocar aqui Export default function tela contador e aqui a gente vai simplesmente Vou retornar aqui um um texto depois a gente muda o valor dessa dessa tela aqui então Tex Então tá aqui contador beleza com isso agora a gente tem a terceira tela que é executada aqui no drawer ó nós temos agora o contador o Contador deixa eu ver como

foi que eu registrei ele lá no nosso exemplo eu coloquei o símbolo de adicionar então vamos lá aqui no nosso layout eu posso adicionar uma nova tela aqui no nosso drawer vou chamar ela de contador Vou colocar aqui onde tem primeiro componente vou colocar contador e aqui no ícone que nós vamos utilizar eu vou colocar aqui um ícone de adicionar dessa forma se a gente olhar Aqui ó nós temos o contador o primeiro componente o início e o contador na tela de início eu tinha feito uma uma mudança aqui para ficar digamos assim um pouco

mais estilizada quer ver ó vamos fazer essa alteração que vai ficar legal eh aqui no no vi Deixa eu tirar isso aqui por enquanto salvar beleza tá ali o nosso componente eu vou colocar aqui o Style para ele apontar para o nosso Styles eh ele não importou né Styles na verdade Acho que é aqui Styles ponto Centralizado Beleza centralizou o nosso elemento eu coloquei um icon com o nome para ser eh react logo react vou colocar aqui o tamanho para ser de 100 e a cor Acho que pode ser a cor preta mesmo ó aí

tamanho de 100 beleza a próxima coisa que eu fiz eu criei aqui uma View dentro dessa View eu coloquei um texto Então vamos lá vou colocar aqui um Texto Deixa eu aproveitar que ele ofereceu né colocar aqui um text Beleza vou coloi um texto aqui chamado masterc reaction Native Beleza vou colocar o tamanho da fonte para ser aqui 20 eu acho e coloquei um peso da fonte fonte weight vai ser de 700 que é o equivalente a uma fonte negrita tá aqui no nesse vi a gente pode usar um Style lembra que eu falei para

vocês que a gente já está dentro de um flexbox essa View ela usa o flexbox por padrão que que eu quero fazer eu quero alinhar os elementos dentro da flexbox no eixo da linha no eixo da linha é o eixo cruzado já que o eixo principal de todo o flexbox dentro do react Native é o eixo da coluna ah Leo Não sei o que é flexbox assiste o primeiro vídeo da série que eu falei muito sobre essa questão do flexbox como ele ajuda nos Dois ambientes digamos assim então aqui eu quero fazer uma Line Items

para ser Center então se eu alinhar de forma Centralizado você vai ver que tanto eh esse texto aqui vai rodar tá então tanto ele vai mostrar aqui ó masterclass react Native e aqui embaixo eu coloquei eh esquenta esquenta formação pd Beleza então nós temos aqui a nossa tela inicial e se você quiser por exemplo Ah eu quero Eh colocar aqui um espaço entre esses dois elementos ou eu quero colocar um espaço aqui entre o ícone e o texto é tranquilo ó aqui onde a gente tem o estilo a gente pode colocar uma rede estilos e

eu posso eh colocar por exemplo um estilo específico para colocar um GAP Então vou colocar aqui um GAP de 10 então além de ter o estilo Centralizado eu posso colocar um GAP de 10 e ele vai colocar um espaço entre o ícone e a nossa View aqui além Disso a gente poderia se quiser colocar criar um um componente que vai representar um botão e a gente mostrar como é possível abrir de forma programática aqui esse nosso drawer é um acho que é um exemplo interessante pra gente fazer ó então V fazer o seguinte lá no

nossos estilos eu vou criar Na verdade eu posso criar eh uma pasta chamada de components que eu acho que uma uma parte importante pra gente criar porque nem tudo que a gente Vai criar são telas a gente muitas vezes vai criar os componentes então ó component e aqui dentro de components um dos componentes que a gente pode criar E aí você poderia separar em subpastas para se você tiver muitos componentes criados não vai ser o caso aqui do nosso exemplo eu vou criar um componente chamado botão ptsx nós vamos criar aqui um componente ó Export

default function vou chamar aqui de Botão nós vamos criar uma Interface a gente não tinha feito isso no outro exemplo mas quando você tem por exemplo eh um componente que você quer receber uma série de propriedades é legal que você receba a propriedade aqui ó as props através em vez de colocar simplesmente n que é qualquer coisa você coloca uma interface E aí nessa interface você consegue de fato dizer o o que é que você espera receber nesse botão nesse caso aqui eu vou esperar receber o Children que vai ser na Verdade um react ó

react eh acho que pode ser assim react react node tá para que a gente possa ter um um no do react e aqui pode ser o on Click ou por exemplo o on press já que na no ambiente mobile você pressiona um botão também serve né um click ou um press também dá certo Então vamos lá eu vou criar aqui um uma estrutura pra gente ter um botão Então vou colocar aqui um return nós vamos utilizar um pressable certo então dentro de um Pressable eu vou colocar meu props pon Children e aqui eu vou definir

tanto o onepress que é a função que eu vou passar para cá e eu não vou colocar esse onpress como sendo obrigatório ele vai ser opcional pode ter momentos que eu queira e simplesmente ter uma casca de um botão que não vai necessariamente pressionar então além de ter aqui o onepress eu vou precisar definir o estilo Então vou colocar aqui ó é deixa eu só quebrar a linha aqui para ficar um Pouco mais fácil daqu a pouco ele vai formatar pra gente ó vou usar aqui o Style e no estilo a gente pode querer aplicar

um estilo que seja condicional Ah ele está ou não com o botão pressionado então aqui tá faltando para fechar acho que isso aqui pronto como é que a gente pode criar uma uma um estilo que é condicional a essa opção aqui isso aqui é se o botão está pressionado ou não então eu vou colocar aqui uma opacidade então opacity se ele tiver Pressionado eu vou colocar aqui uma opacidade de 80 se ele não tiver pressionado vai colocar uma uma opacidade de um por exemplo sem ele fica totalmente é com a cor normal né sem nenhum

tipo de transparência e aqui embaixo eu vou criar aqui os meus o meu eh Styles vou criar aqui um eh Style sheet colocar aqui ó Style sheet ponto eh acho que ele não importou ainda não beleza ponto Create aqui nós vamos definir o estilo de um botão Então vou Colocar aqui ó botão vai receber algumas questões aqui ó botar um pading deixa eu ver foi que eu coloquei que a gente não precisa ficar se preocupando ó eu coloquei um background azul coloquei um pading na horizontal né na horizontal de 15 um pouco maior do que

na vertical de 10 eu coloquei um raio arredondado de cinco Então esse estilo botão a gente pode colocar aqui dentro ó colocar vírgula Style ponto e botão Então dessa forma a gente tem o nosso botão e se a Gente for lá na nossa página e Inicial Eu posso pegar aqui ó colocar um botão dentro desse botão eu posso colocar aqui um texto eu vou só importar ele e aqui eu vou colocar a que eu coloquei exercícios acho que eu coloquei alguma coisa assim ó então ele colocou aqui o botão com texto escuro Mas eu posso

colocar aqui um Style para ele colocar a cor para ser branca então fff beleza então nós temos aqui o nosso botão nós temos a nossa vi nós temos Aqui o nosso ícone e nesse botão a gente pode executar o onepress e onepress pode abrir por exemplo o nosso Dra então para abrir o nosso Dra eu vou importar e a partir do colocar aqui ó Import from Expo Expo router Vou colocar aqui o use navigation vou pegar aqui ó navigation recebe US navigation peguei ele e lá no onpress onpress tem algumas formas de Fazer isso tá

é tem uma forma digamos assim não oficial que funciona e tem uma forma digamos assim oficial né a forma oficial é usando o nev p dispatch e aí você vai importar aqui o drawer Actions E aí uma das das ações que você tem no drawer é deixa eu só colocar aqui de novo é o open drawer Então essa é a forma oficial de fazer com usando Neve pon dispatch Então se a gente clicar aqui agora ó ele vai abrir o drawer pra gente isso significa que a gente até Poderia lá no nosso drawer dizer que

ele não vai mostrar aqui o o cabeçalho por exemplo tá e eu depois eu vou mostrar como é que faz para abrir através de uma navegação em Abas porque é muito comum você abrir a sua aplicação já ter as abas embaixo e ter uma opção de mais e aí essa opção de mais ele abre o drawer ali na sua aplicação então você não teria o título do drawer o título da da navegação em Abas e fica um pouco mais clean a aplicação mas aqui dá para você Abrir por aqui por exemplo e navegar entre os

componentes aqui você pode simplesmente puxar ou com o mouser com o mouse e e puxando aqui a sua aplicação no caso que o contador ficou lá em cima a gente vai já resolver esse problema eh a gente já mexeu na nossa tela inicial né que é a tela de início agora a gente pode ir para o nosso exemplo do contador deixa eu fechar aqui esses vários arquivos que estão abertos e nós vamos agora fazer o seguinte nós estamos aqui No contador Eu não vou mexer nesse componente aqui mas eu vou criar um componente aqui chamado

de Contador Contador ptsx nós vamos definir aqui ó Export default function contador o contador vai receber um parâmetro só para mostrar para vocês novamente essa ideia de você ter por exemplo uma interface que recebe um determinado propriedade lá da tela Você pode passar eh as propriedades pro Contador nesse caso eu vou colocar apenas o valor inicial para receber aqui nas propriedades do contador então Eh contador props você vai receber as propriedades e aqui a gente pode começar a definir o nosso contador através de uma View Então vou criar aqui uma View nessa View eu vou

colocar o style não sei se eu já importei aqui ó react Native vou colocar o Style para ser Styes lá das constantes ponto Centralizado e aqui a gente pode colocar um text chamado contador Deixa eu só importar aqui o text daqui a pouco a gente usa o valor padrão né então isso aqui não vai ser um problema não então lá na nossa tela contador eu vou simplesmente referenciar o contador que é o componente que eu acabei de criar o valor inicial ele é opcional mas eu Poderia colocar aqui para ele começar com 100 certo e

nós temos agora a nossa tela apontando para um outro componente em vez de criar tudo dentro desse componente que representa a tela que está dentro de app eu posso chamar um componente que está dentro da pasta components então aqui nós vamos fazer o seguinte eh deixa eu ver aqui qual foi a estratégia que eu usei aqui pro nosso contador beleza nós vamos criar dentro Do nosso componente um estado para ele gerenciar o estado do do contador né o número que a gente vai ficar incrementando e decrement então vou colocar aqui ó número s número vou

usar aqui o state para ele receber o valor inicial caso não seja passado nenhum valor inicial o estado é zero e a gente pode mostrar aqui o valor do número que já está sendo armazenado dentro de um estado do nosso componente esse estado o o use state é um um Hook Né do react Native do react melhor dizendo né se você for na internet procurar react hooks são forma que é uma forma que você tem de e aqui ele tá dizendo que está desatualizado né acho que é o outra outra página aqui react Dev por

exemplo ó aqui você tem uma série de de esses hooks que são Ganchos né Por exemplo para gerenciar estado para que você trabalhar com com compartilhamento de estado referência de elementos né Efeitos colaterais tem várias questões relacionadas a o essa essa ideia dos hooks mas aqui eu quero só mostrar para você que essa é a forma que que parece estranha digamos assim para quem está começando né vou diminuir aqui um pouquinho só o nosso código parece estranho de você trabalhar com um um estado interno do seu componente você precisar ter uma função né que recebe

um valor inicial e que retorna para você o valor atual e uma função para alterar Esse valor né é um pouco parece muita coisa para gerenciar uma uma variável basicamente é isso mas isso aqui ele usa por conta de alguns conceitos relacionados à reatividade né Para que você possa conseguir ter eh a quando o valor muda automaticamente ele Altera a interface da sua aplicação e essa é a forma que ele trabalha aqui a gente pode colocar o Style pra gente ter o um tamanho da fonte maior digamos assim eu não sei qual foi o tamanho

da fonte que Eu coloquei aqui deixa eu ver é coloquei a fonte 50 Então vou colocar também aqui a fonte 50 beleza para ficar maior e a gente pode aqui embaixo já criar uma View Então vou colocar aqui ó uma View dentro dessa View eu vou colocar dois botões um botão para acrescentar e um botão para decrementar né incrementar E decrementar então eu vou definir aqui ó um botão deixa eu vou importar aqui nesse botão eu vou pedir para ele Pegar aqui um a ion ion icons Vou colocar aqui um o nome do ícone vai

ser adicionar e a cor vai ser branca beleza e vou colocar aqui um outro botão e o ícone vai ser não sei se é minos ah remove remove e ele vai ser o botão de menos beleza Olha que interessante nós colocamos dois botões dentro de um viio e ele colocou um embaixo do outro por quê Porque essa View está sendo organizada com o flexbox e o flexbox por padrão usa o eixo da coluna al mas eu Quero mudar eu quero colocar um botão do lado do outro então a gente vai precisar mudar o Flex Direction

a direção do flexbox para ser linha que é o padrão da web então vou colocar aqui ó Style Vou colocar aqui Flex Direction para ser Row ou seja vai colocar um botão do lado do outro e aí a gente pode usar o Gap para dizer que nós queremos um espaço de 10 Entre esses dois botões ou de 20 ou de 30 40 não importa você vai usar os mesmos conceitos ó a forma de fazer é um Pouquinho diferente outra coisa também que eu não comentei mas que vale a pena mencionar Você tem o Native o

Native Wind né ó Native Wind PDV eh que é uma implementação do teu índice SS para react Native você tem um processo de configuração e você usa também a ideia de aplicar lá o Class name para colocar as classes ele aplicando estilo na sua aplicação tá então é uma possibilidade também que nós temos à disposição Eh com relação a react e Native tá aqui eu tô usando a forma mais padrão de de usar e durante o nosso evento também vou usar essa forma mais tradicional que é a forma que todo mundo usa na prática porque

às vezes o o o Native ind pode ser que tenha alguns problemas de compatibilidade com algumas versões mais novas e tal então a gente vai pelo caminho digamos assim mais seguro Então vamos lá aqui eu vou colocar o onepress e nós vamos simplesmente alterar o valor Do número através dessa função só incrementando o valor que é a coisa mais simples que tem ó você pega o valor pega o valor atual número e acrescenta mais um pronto aqui nós temos o incremento e a mesma coisa pode ser feita aqui embaixo para o decremento então coloco aqui

por exemplo -1 então agora nós temos ó como adicionar mexer no estado e diminuir e nota quando a gente pressiona ó ele fica um pouquinho mais transparente né a opacidade muda Exatamente porque lá no botão a gente aplicou um estilo condicional a quando o botão está pressionado ou não Tá então a gente tem agora um gerenciamento de estado beleza gente fizemos aqui a alguns exemplos teremos mais exemplos para fazer mas eu vou precisar para você vai ser automático né parou voltou e a gente vai continuar a aula daqui a pouco porque eu vou precisar sair

então falei para vocês mas é isso a primeira parte já foi gravada e daqui a pouco a gente Volta não precisava nem ter falado isso para falar a verdade né porque não ia ia simplesmente aparecer um corte aqui no meio mas é isso grande abraço e até daqui a pouco Pronto voltei ninguém sabe se eu saí ou se eu fiquei aqui o tempo todo Vamos lá gente então nós fizemos o exemplo do contador e eu separei em duas partes né um para mostrar ali só a tela de forma mais simples que é um componente chamando

outro componente Também passando parâmetros né através das propriedades um parâmetro de um componente para outro quando você passa o componente pai e o componente filho e você passa os parâmetros você faz uma comunicação direta também tem um outro vídeo no canal que é um pouquinho mais antigo que que eu falo é um dou um um uma masterc de react também aquele vídeo ele é até mais básico do que esse ele fala de forma mais detalhada sobre os fundamentos do react então também fica Aí a dica para que vocês possam assistir esse vídeo depois uma vez

feito isso o que que eu vou trabalhar agora vamos trabalhar com a parte da navegação é baseada em Abas Então vou criar aqui um exemplo pra gente criar vou criar uma pasta pra gente colocar as telas que serão exibidas relacionadas às Abas fique dentro desta pasta que eu vou chamar aqui de tabs E para isso nós vamos criar aqui um arquivo index.tsx que vai ser o raiz da nossa Navegação de Abas e eu vou criar também aqui um arquivo underline layout ptsx que nós vamos colocar as nossas Abas para fazer isso eu vou colocar aqui

ó port default function Vou colocar aqui layout o nome do nosso arquivo vou receber aqui props e dois pontos n tá faltando os dois pontos aqui pronto dois pontos n e aqui nesse arquivo nós vamos fazer o seguinte eu vou retornar e nós vamos importar a parte de e tabs ó Expo h n E Aqui nós temos as nossas Abas nós podemos definir ó tabs ponto screen E aí no caso aqui a gente pode colocar esse component não tem não tá Vou colocar aqui para ser o index e nesse caso a gente vai colocar você

pode colocar aqui as options em cima das options a gente vai tanto definir o título tá o Ione não define forma não então vou colocar aqui ó icon ó T Tab bar icon e aqui a gente vai usar aquela mesma estrutura do outro Que é definir uma função que vai ter um componente aqui Iron icons eu não sei nesse caso deixa eu ver aqui qual foram os ícones que eu escolhi e o início eu coloquei novamente home outline né do mesmo que eu tinha colocado antes ó home outline pronto tamanho eu coloquei acho que não

sei se eu mexi no tamanho eu coloquei o tamanho 18 Então vou colocar aqui o tamanho size para ser 18 E depois eu coloco aqui em relação a Ao estilo tá então por enquanto eu coloquei aqui a primeira tela olha o que que vai acontecer aqui se a gente vier aqui acho acho que ele não atualizou ainda deixa porque eu não fiz esse componente né então Export Def function colocar aqui Tab e Inicial e aqui eu vou colocar um return para ter uma View nessa view do react eu vou colocar aqui o Estilo para apontar

para Styles P Central d e aqui eu vou colocar um texte e chamado de Tab e Inicial e aqui eu vou colocar para importar do react Native pronto tá faltando fechar aqui o nosso a nossa expressão do return uma vez feito isso acredito que ele vá mostrar aqui ó acabou não mostrando a nossa aba principal aqui mas a gente pode lá no nosso layout mais externo tá cuidado porque você vai ter vários arquivos com Nomes parecidos né no caso aqui com o mesmo nome layout então aqui a gente pode pedir para ele abrir mais uma

navegação Então vou colocar aqui ó eh o nome vai ser tabs eu não lembro também qual foi o o ícone que eu coloquei aqui paraas avas deixa eu ver aqui ó contador ã primeiro contador formulário Tabs álbums outline não ia lembrar nunca Então vamos lá aqui no caso ó tabs coloquei álbums tem várias bibliotecas Tá aqui é o Label Na verdade eu quero colocar embaixo onde tem esse AD aqui diminui o tamanho álbums outline tamanho é o mesmo a qu o mesmo e aqui eu vou colocar e de tabs tabs e aqui embaixo também tabs

beleza com isso trazer aqui meu minha câmera para cá eu preciso dar um refresh na aplicação né Ach que é por isso que ele não tá atualizando deixa eu ver se ele parou aqui porque o computador entrou no modo de ficou travado um tempo Agora vai voltar pronto ó exercícios aqui não é esse alarme né mas é a BS outline pronto Beleza então Aqui nós temos a nossa aba Inicial e tá aqui a aba home e a gente vai colocar aí o que que acontece né aqui nas nossas Abas eh eu acabei criando um uma

função aqui dentro dentro de uma função a gente pode criar outras funções pra gente retornar essa esse ícone aqui baseado no nome então eu fiz mais ou menos assim ó Eu criei uma função chamada ícone que vai ter o nome do ícone então nome do tipo string e aqui a gente tá devolvendo uma uma função que eu coloquei aqui props 2 p n e aqui a gente pode devolver o nosso I icons que vai receber o nome que vai ter aqui o valor 18 tá aqui eu vou colocar como sendo n porque aqui é um

acho que é uma você tem lá alguns valores pré-definidos que podem entrar no nome né E aí aqui eu vou colocar como n que Aí ele não dá problema e com relação a cor Então vou colocar aqui ó a cor ele vai ser exibido uma cor se ele tiver focado ou não Então a partir das prós eu tenho o a opção se ele está focado ou não E aí eu vou colocar uma cor que vai ser aquela cor azul quando ele tiver focado caso contrário ele vai exibir a cor preta que é a cor padrão

então vou colocar aqui 00 então de tal forma que se a gente usar essa função aqui para Ele devolver o nosso ícone basta usar a função Icone passando essa string ao Line que no final das contas ele vai voltar a o nosso ícone correto aí vocês vão perceber que aqui se a gente colocar uma outra tela Eu acho que eu coloquei mais duas telas né uma relaci depois eu vou acrescentar outra então eu coloquei uma uma tela aqui chamada de cursos P tsx eu vou pegar aqui um índice vou jogar para cá vou colocar aqui

Tab de curso só para mostrar a Diferença se a gente for lá na nas Abas você já vai ver que já tem aqui ó aba de cursos ele já tá mostrando por mais que eu não tenha acrescentado ele também segue aquela ideia de convenção de nome se você tem mais uma outra tela dentro daquela pasta ele vai entender que aquela tela faz parte dessa navegação que a gente colocou dentro do layout mas aí se dentro do layout eu for lá e duplicar isso aqui aí eu coloco por exemplo cursos agora eu posso colocar de Forma

mais explícita né ó cursos e eh em vez de home outline eu coloquei para ser o play outline então vai ser o play outline vai ser a tela de cursos Então tá aqui o nosso Play talvez tenha um algum outro né Play Circle nem nem testei se tem essa opção aqui deixa eu ver se tem ó aparece seu lá mas eu vou colocar só o play outline mesmo beleza então nós temos aqui a nossa segunda tela a terceira tela eu coloquei de configuração como se Fosse uma tela de eh configuração vou duplicar aqui cursos e

vou colocar config vou mudar aqui Tab config e vou mudar aqui para Tab beleza quebrou aí mas tudo bem Tab cursos e aqui a gente pode entrar dentro do Expo go e abrir a nossa aplicação de novo ó então aqui a gente tem vou dar aqui um R para ele atualizar e a gente pode entrar aqui em tabs nós temos agora ó home cursos e o config E aí a gente Pode no no nosso layout aqui duplicar aqui para que a gente possa personalizar o ícone e tal então aqui ó config aqui o título pode

ser configurações e aqui o nosso seria settings outline então nós temos aqui ó configurações curso e o home aqui também se você quiser não eu não quero exibir e por exemplo a parte do do cabeçalho né do header então header e para seib vou colocar como falso e você ficaria sem a Parte do header aqui você poderia navegar entre as as três telas sendo que aqui ó Tab de configuração são as três telas beleza uma outra coisa que a gente poderia fazer é criar uma é muito comum você ter por exemplo uma tela por exemplo

que você vai ter mais mais elementos por exemplo né quando você quer você não vai conseguir colocar todas as opções ali embaixo na tabulação porque tem um Espaço bem limitado digamos assim tá eu vou colocar aqui Tab mais daqui a pouco a gente vai mudar um pouquinho essa configuração aqui tá Vou colocar aqui mais e aí o que que a gente vai fazer aqui nesse caso deixa eu abrir de novo aqui ignorar ele sai aí mas a gente consegue voltar pra aplicação porque o build continua rodando ainda então aqui a gente vem nas tabs ele

tem aqui o mais embaixo Vamos lá no nosso layout eu vou duplicar aqui vou colocar mais e aqui seria sei lá mais opções não vai aparecer isso aqui tá e a opção que eu usei aqui foi o ícone menu Então vai ter aqui um ícone chamado menu Beleza o que é que nós vamos fazer eu não vou querer que ele clique e vá para uma tela chamada Tab Mais na verdade eu quero que ele Execute aqui os listeners né que seriam as funções que serão executadas Especificamente aqui no caso no tab press ou Tab press

e não long press tá vai ser esse aqui beleza nesse caso quando ele clicar eu vou querer que ele não Execute o padrão Ou seja ele e não pr pra Tab Então nesse caso ó eu venho aqui configurações eu venho para cursos eu venho para home mas quando não clicar em mais opções ele não vai fazer o comportamento padrão que é ir para essa tela aqui a gente pode fazer a mesma Coisa que a gente fez lá no outro a gente pode usar aqui o use navigation posso chamar aqui de nave eu vou US vou

fazer um pouquinho de diferente do que a gente fez no outro exemplo lá na tela principal eu eh chamei o use navigation chamei aqui o nav. dispatch e chamei aqui drawer Actions P Open drawer tá aqui a gente pode tentar fazer o que seria a forma não oficial digamos assim porque não está na interface eu vou chamar aqui um Essa navegação para n e aqui eu vou colocar fazer o seguinte ó quando o usuário clicar aqui no long press eu vou chamar aqui ó nave ponto se tiver disponível né Open drawer dessa forma aqui sem

chamar o dispatch sem chamar aquele aquele comportamento lá então aqui em teoria vai funcionar então ó eu vou clicar aqui em cursos configurações aí eu naveg nas três principais Abas da minha aplicação digamos assim clico aqui em mais opções Ele vai lá e abre o drawer pra gente aí você tem sei lá quantas opções você queira aí na sua aplicação e você pode navegar para uma outra tela completamente diferente tá então e é uma forma você tem uma navegação dentro da outra Provavelmente você usaria primeiro a aba e depois o drawer mas você tem aí

e só que a gente usou primeiro o drawer que é a navegação principal da aplicação e dentro de uma das Telas nós temos a as as abas aqui embaixo tá mas a forma como Você pode fazer eh pode variar de uma aplicação para outra Então nesse caso no no mais aqui você pode simplesmente não retornar nada no seu no seu componente tá pode retornar nulo aqui e ter um componente vazio não ter o arquivo gera problema tá se tem uma configuração que permite não ter o arquivo aí eu não eu desconheço Mas pode ser que

exista alguma configuração que você não precise ter um arquivo relacionado ao menu mas se você Apaga esse arquivo ele dá problema dizendo que a vai dar tipo uma mensagem de advertência dizendo que essa tela não existe Então nesse caso a gente tem as opções tá que é mais opções ou simplesmente eh opções e você pode clicar aqui e ter várias opções na sua aplicação e isso acabar eh crescendo as possibilidades porque não dá para colocar 10 opções aqui embaixo porque o espaço é limitado mas 10 opções aqui você consegue tranquilamente Beleza Então fizemos aqui mais

uma navegação com abas tem uma outra que eu fiz aqui com stack tá Vamos ver acho que eu criei uma nova opção lá no nosso menu pra gente fazer a navegação via stc Então vamos lá eu vou depois a gente vai fazer um último exemplo de formulário que aí a gente termina a aula então vou fazer aqui ó stack vou criar aqui AES mesma coisa né ó um índex posso até para ganhar tempo Copiar aqui um índex para cá E aí Opa copiei um index errado eu queria copiar o índex da das Abas que é

uma tela Bem Mais Simples então vou apagar isso aqui vou jogar aqui ó index Então nesse caso aqui ignorar Beleza vou colocar tela inicial depois a gente pode mudar ela e vou pegar aqui o arquivo de layout jogar para cá e vou só apagar aqui o conteúdo interno pra gente definir o nosso layout baseado em stack então return e Aqui nós temos o Stack também do Expo router Então vou colocar aqui ó stack e a gente vai criar aqui a nossa stack screen eu vou colocar aqui o nome para ser index e as opções options

posso colocar aqui o título para ser Eh sei lá Inicial Beleza então nós temos aqui a nossa tela inicial Deixa eu só tirar isso que não precisou vou tirar aqui e a partir dessa Navegação que a gente vai definir as navegações com stack a gente pode a partir de um botão ou de um link navegar de uma tela para outra eu vou mostrar para vocês tá eh então vamos fazer o seguinte ó eu eu acabei de criar aqui a stack deixa eu entrar de novo no Expo go vou entrar aqui e mostrando aqui ó ele

acabou de criar aqui a aqui embaixo mesmo que eu não tenha ido lá no meu layout para Adicionar mas a gente vai adicionar aqui mais uma tela que eu vou chamar de stack stack os esse texto aqui vai ser stack e o eu coloquei o o logo da do stack overflow Então vai ser logo stack overflow é UMC né então coloquei esse logo aí para ser o o nosso logo aqui ó então nós temos as abas e aqui com mais opções nós podemos mudar para stack beleza temos a nossa tela inicial como é Que a

gente faz para vou criar aqui um outra tela Vou colocar aqui eu coloquei Qual o nome nova tela nova então vou pegar aqui ó duplicar nós temos uma tela nova eu vou colocar aqui aqui não é nem aba né aqui eu vou colocar tela inicial e aqui tela sempre que muda o nome do do componente ele quebra tela nova beleza e Aqui nós temos a tela nova Beleza então vamos lá abrir aqui o Nossa aplicação D um refresh né para ele trazer a última vou entrar aqui na stack nós temos a Tela inicial como é

que eu faço para sair da tela e nova a tela inicial e pra tela nova Então é isso que eu quero mostrar para vocês agora a gente pode importar aqui o link E aí tem uma inspiração muito forte lá no link do do nextjs né ó Expo router link e aqui no link a gente vai ter também um href e nesse href a gente pode apontar por exemplo pra tela nova então e steack Barra Nova e aqui eu posso colocar tela e sei lá e Para tela tela nova Beleza então tá aqui eu posso envolver

isso dentro de um botão só para ter o estilo que a gente definiu lá né em relação à estrutura de um botão azulzinho e tal então posso Opa trazer para cá salvando aqui ó a gente colocou e eu posso definir o Style para Opa Style pra gente colocar aqui a cor branca poderia tratar a parte de de temas né que a gente pode ter aqui na nossa aplicação mas vou fazer de forma Mais simples para uma uma aula para não ficar também gigantesca porque já tá com sei lá praticamente uma hora então vamos lá coloquei

aqui e pra tela nova quando eu clico né ele vai para tela nova e aqui eu posso voltar como é uma stack uma pilha né ele vai aqui empilhando né eu posso colocar e voltar a gente também poderia nesse caso se você quiser eh colocar lá no layout da nossa stack que não é esse Mas tá aqui ele ó a gente também poderia colocar aquela opção de Não exibir o o o header né Vou colocar aqui ó header false e ele não vai exibir E aí nesse caso estando na tela nova você para voltar você

Possivelmente poderia criar aqui um link na tela para que você pudesse voltar para o stack index por exemplo acho que talvez você colocar só stack Talvez ele volte aqui fazer um teste aqui ó então na tela nova frh aqui na aplicação vou entrar aqui em stack ir pra tela nova ó Foi pra tela nova por algum motivo Ele não mostrou ainda o com o link né Deixa eu ver aqui link Ah entendi por qu porque eu não coloquei a cor do texto em branco e não envolvi dentro de um botão que aí sim ele vai

aparecer então selecionando aqui trazer para cá beleza salvando e aqui eu vou colocar para voltar salvando a gente pode clicar para voltar ir pra tela nova e voltar ele vai fazer essa navegação aqui a gente poderia além de Centralizado a gente Pode colocar aqui um gap gap entre os elementos né o GAP de 10 que aí foi que aconteceu aqui ah sim aqui tem tenho que colocar dentro de um objeto né para que ele possa interpretar isso então Ó aqui colocou um GAP a gente pode fazer a mesma coisa na nossa tela aqui nós temos

essa parte do estilo e temos a parte aqui do nosso GAP de 10 também então voltando a gente consegue fazer a navegação usando stack E aí porque quando você coloca uma navegação Dentro da outra e você deixa o header sempre visível ele vai acabando empilhando um heer debaixo do outro né O que não é tão interessante do P de vista visual da sua aplicação e e a gente poderia aqui na tela eh na tela no index poderia ter aqui um outro link ou um outro botão melhor dizendo para a gente voltar para o home da

nossa aplicação então ir para início e aqui eu posso colocar Simplesmente para ele ir pro Barra E aí colocando a pro início ele vai lá pra nossa aplicação ele vai sair desse desse dessa parte da stack Volta pra nossa navegação eh Sem problema ó ir pra tela nova voltar e pro início tá ele volta lá pro início da nossa aplicação através dessa ideia do link beleza feito isso a gente pode ir pro nosso último exercício que vai ser um exercício que a gente vai depender eh de uma biblioteca que eu não instalei Ainda só pra

gente salvar os dados eh usando o ayc storage Então vou pegar aqui a dependência que nós vamos usar eu vou parar a aplicação rapidinho vou limpar aqui o terminal e nós vamos instalar essa dependência ó @ reactnative trass Storage barc Storage Então essa é uma forma que você tem como salvar os dados e e armazenar os dados no dispositivo e aqui O código vai estar no link da descrição do vídeo Já criei um Repositório com primeiro exemplo e nós vamos pegar esse outro exemplo colocar na mesma pasta lá do Esquenta os projetos que a gente

trabalhou essa semana eu vou colocar todos no mesmo repositório tá então vamos lá vou fechar aqui a stack vou fechar a Tab e vou criar um novo arquivo aqui chamado formulário pon tsx vou exportar por padrão uma função chamada E eu acredito que eu criei aqui um componente também e chamado formulário pon tsx aqui que vai ser o meu componente de formulário acho esse componente não vai ter nada digamos assim em termos de propriedades que ele vai receber e eu vou resolver tudo dentro desse próprio componente aqui então aqui deixa eu ver se eu fiz

alguma coisa lá na tela Ou não Aqui no meu no meu planejamento acho que eu coloquei Na verdade tudo dentro do da tela de formulário Acho que nem cri coisa não mas poderia criar aqui mas tanto faz eu vou criar aqui tudo dentro da tela tela formulário Beleza então aqui Vou definir a minha view do react Native e Vou definir aqui um texto só pra gente já exibir alguma coisa na tela e comear a partir de um pon cífico Beleza tem uma tela formulário significa a gente Restart já a aplicação que nós temos aqui mais

um uma referência aqui vou Colocar antes do tabs Vou colocar aqui eh formulário e aqui vou colocar onde tem tabs formu Lários formulário melhor dizendo e aqui eu acho que eu coloquei um cheque alguma coisa check checkbox outline pronto beleza vamos entrar novamente aqui deixa eu ver nós temos aqui o nosso formulário em branco ele ainda branco não né ele já tem o texto mas ele não Está Centralizado colocar aqui o Style pra gente apontar para Styles P Centralizado Beleza agora nós temos o nosso nosso formulário Centralizado O que é que nós vamos fazer aqui

no nosso formulário além de definir uns Campos de entrada além de associar isso a um estado da nossa aplicação depois eu vou criar um um uma classe e vou separar essa lógica de gerenciamento de estado numa classe separada pra gente deixar no Nosso componente só a parte que de fato tem a ver com a exibição do dos elementos né dos componentes na tela e não com essa parte de estado que a gente pode criar isso em um arquivo separado isso é inclusive é uma boa prática aqui relacionado a o react tá tanto faz react para

web como react Native Então vou criar aqui um text input do react Native Vou colocar aqui um um Place holder tá E lá nos estilos a gente pode criar um estilo voltado para o input deixa eu ver Aqui que eu acho que eu criei um Vou colocar aqui ó input vou copiar e jogar para cá então vai ter uma borda de um vai ter uma a cor da borda preta o raio CCO um pading margem e uma largura de 80 e eu também coloquei um input de erro para quando for tiver uma validação para ele

ficar vermelho na borda para deixar clo que aquele input tem um erro tá e aqui a gente já aplicou esse estilo Vou salvar e Aqui nós temos o nosso campinho de input para para começar os nossos Trabalhos Beleza o que é que a gente precisa fazer para estabelecer aqui uma um vincular esse campo de entrada com o estado da nossa aplicação então para isso eu vou criar um estado que eu já aqui no meu planejamento já separei mas aqui a gente vai colocar tudo dentro desse componente depois a gente separa eu criei aqui um estado

que eu chamei de usuário set usuário e o usuário vai receber um objeto vazio e eu vou dizer Que aqui é um tipo qualquer eu não vou definir uma interface nem tenho as minhas regras separadas isso aí eu vou deixar lá pro pro nosso evento pra gente ter uma definir os nossos objetos direitinho as regras de negócio e tal por enquanto aqui nós temos o usuário e o que a gente pode fazer é atribuir o valor do nosso input aqui para ele receber o valor através do Estado então eu posso colocar aqui ó velho valor

para receber usuário pon nome só isso não é Suficiente se eu salvar eh você vai ver que se você tiver colocado aqui o nome do usuário para blá blá blá e salvar ele já vai mostrar ali no campo blá blá blá mas você não vai conseguir mexer no valor por quê porque na verdade você precisa primeiro alterar o estado para depois você conseguir alterar a interface gráfica né esse é um fluxo muito muito típico do react né sempre o estado é que tem o valor de que de fato eh eh e onde está a fonte

da Verdade né do estado da sua aplicação então você não muda o valor no input você muda o valor no estado e o estado mudando atualiza a tela atualiza o seu componente visual Então eu preciso de alguma forma para que eu consiga mudar o estado e para mudar o estado a gente vai ter um uma opção que é one Change text on Change text a gente vai receber o texto o nome e a gente pode simplesmente fazer aqui um set usuário pegando todos os atributos de usuário e alterando o Nome que eu acabei de receber

nesse caso tá faltando aqui eu só completar o código aqui completo aqui e acredito que com isso ele vai voltar a funcionar agora a gente pode escrever o que a gente quer e aí ele vai salvando isso aqui no estado da nossa aplicação O que é muito legal e eu já vou tirar esse nome aqui blá blá blá que não faz diferen não faz sentido E caso o nome esteja nulo undefined eu vou atribuir o valor vazio PR o nosso text input legal eu também posso criar aqui uma O que seriam os erros da minha

aplicação por exemplo eu posso ter um objeto que vai ter aqui todos os erros da minha aplicação e posso fazer o seguinte teste aqui ó além de aplicar o estilo de input eu vou colocar aqui um um Ari a gente pode verificar se dentro dos erros eu tenho a chave relacionada ao nome se tiver eu posso aplicar por exemplo o o estilo Relacionado ao input então por exemplo eu posso colocar aqui ó nos erros o nome para receber sei lá nome está inválido então com isso você vai perceber que aqui ele já aplicou a borda

vermelha por quê Porque dentro dos erros eu tenho uma chave aqui é uma das formas de fazer né você poderia fazer formulas bem mais rebuscadas e bem mais eh digamos assim eh que que ajuda para para grandes Aplicações colocar isso em em locais específicos as suas validações e tal que eu vou fazer de forma bem simples e além de ele colocar aqui a borda vermelha é legal que a gente possa exibir o erro logo na sequência então eu vou colocar aqui ó se o erro nome existir então Coloque aqui dentro de um texto a mensagem

de erro relacionado ao nome que nesse caso o nome é inválido E se eu não tiver essa chave aqui de nome inválido ele nem vai mostrar que o campo está Vermelho nem vai mostrar a mensagem embaixo Então essa é uma forma que a gente pode fazer e aqui eu posso colocar um botão tá a gente já tem o o nosso botão padrão aqui da aplicação né que é um pressable Então vou importar aqui o botão nós podemos dizer que sei lá salvar o nosso formulário e a gente pode no onepress chamar uma função que eu

vou criar aqui em cima uma função de salvar então vou salvar e aqui dentro nós vamos eh pegar essas informações do usuário e Salvar lá no ayc Storage Então como é que a gente pode fazer isso ó ayc ah Store P set item ou seja setar o item com a chave usuário eu vou pegar as informações de usuário e tornar isso serializar isso né no formato de string para eu salvar o meu usuário lá no ass Storage essa função ela pode ser chamada a partir do onepress do nosso botão tá que que tá acontecendo aqui

deixa eu ver se tem Algum erro que justifique isso né deixa eu dar aqui um refresh na aplicação exercícios formulário beleza Ah o texto tá certo um texto precisa estar dentro de um de um text não pode né então coloquei um texto direto ali vamos lá vou colocar aqui salvar e vou colocar aqui o estilo do nosso texto vai ter uma cor branca um F FF beleza então voltando Aqui nós temos o nosso formulário já tem a opção de salvar Vou Colocar aqui o nome PR meu nome Leonardo Leonardo Leitão Então vou salvar beleza Salvei

em teoria foi lá pro ass Storage eu vou sair da tela vou fazer assim ó vou lá pra tela de início vou navegar pra tela de formulário e o nome tá lá vou e voltar pra tela de início vou dar um Reload na aplicação ele vai reiniciar a aplicação vou entrar aqui em exercícios formulário e ele apagou Tá era para ter trazido por que que ele não Trouxe faz sentido Não era para ter trazido não tá É porque eu preciso carregar essa informação lá do a SN Storage então para carregar eu posso usar aqui um

use effect Ou seja eu preciso eu só fiz salvar né mas não carreguei então aqui eu vou aqui é um outro que a gente chama de outro gancho né outro gatilho O que é que esse gatilho faz ele vai executar uma função que que pode causar um efeito colateral efeito colateral é o que é isso você Alterar um estado de um componente na inicialização da sua tela quando você inicializa a sua tela você quer carregar o os dados que estão lá no aink Storage para colocar isso dentro do nosso usuário então basicamente O que nós

vamos fazer é usar o assn Storage E aí o o CoPilot me ajuda eu vou pegar na chave usuário e aí quando ele conseguir pegar essa informação ele vai pegar o usuário se existir usuário ele seta o usuário aqui no meu estado pegando a o usuário Que é um string e transformando isso para um objeto do JavaScript agora ele carregou aqui a minha aplicação mesmo que eu venha aqui né e e feche a minha aplicação a gente pode abrir aqui de novo para executar o o build da aplicação é para ele ter armazenado isso de

forma persistente dentro desse do do dispositivo do usuário então se eu vier aqui em salvar ó formulário Ele trouxe aqui Leonardo Leitão se eu apagar aqui Colocar só Leonardo e salvar Independente se eu der um refresh na na aplicação Opa aqui é porque o r tava ali em cima né independente eh Se eu sair aqui paraa outra tela né e der um refresh na nossa aplicação você vai ver que ele vai trazer essa informação via assn Storage vamos lá próximo passo eu vou querer validar os dados do usuário eu vou fazer só a validação de

usuário então Eh eu poderia fazer uma função para Validar o nome uma função para validar um o e-mail poderia criar uma classe chamada validator e usar aí várias técnicas legais de validação mas eu vou fazer aqui bem simples ó eu vou ter a função validar que vai ficar aqui os erros vazios ele vai acrescentar aqui poderia ser ter uma ser uma constante né não não dá porque ele tá substituindo beleza mas nem precisaria Mas tudo bem ele vai lá e colocou aqui verificou se o nome tá presente se não tiver presente Ele vai lá e

coloca que o nome não é o nome é obrigatório também poderia fazer uma validação para saber se o nome tem mais do que tantas letras três letras por exemplo né ó posso colocar eh aqui no caso ó para validar só uma em relação ao nome else if se o nome tem menos do que três letras ele deve ter no mínimo três caracteres por exemplo então tenho duas validações acionadas ao nome no final ele pega os erros que foram gerados e joga aqui nos Erros e no final ele retorna verdadeiro ou falso basicamente é Existe alguma

chave dentro desse objeto chamado erro se existir nenhuma chave quer dizer que a validação foi bem-sucedida se existir alguma chave de erro quer dizer que a validação não passou então o que eu poderia fazer é só salvar os dados se for válido então eu coloco aqui ó validar se ele tiver validado eu vou lá e chamo o assn Storage significa que agora se eu colocar apenas duas letras e Tentar salvar ele vai mostrar uma mensagem de erro ó nome deve ter no mínimo três caracteres e se eu saio aqui da minha tela tá volto lá

pro início dou um refresh na aplicação e volto aqui para o formulário ele não salvou aquela informação com aena nas três letras Se eu colocar l e não vai deixar le o salvando ele tanto salva como tira a mensagem de erro de validação eh a gente poderia colocar mais outros Campos Tá mas eh o nome de e-mail e tal mas vai Ficar repetitivo eu vou colocar só mais um campo aqui que vai ser o do CPF porque aí a gente pode aplicar uma máscara do CPF para você ver como é que funciona ó colocar aqui

CPF nome CPF Vou colocar aqui e não vou colocar essa parte do da mensagem de erro não tá vou deixar sem E aí depois você poderia verificar questão do CPF e tal inclusive se o digo verificador Está correto e aqui eu vou colocar CPF beleza até aqui tudo bem a Gente tem um CPF a gente pode no caso do CPF usar eh um tipo de teclado diferente que nesse caso a gente vai usar o teclado de telefone que é um teclado numérico tá então a gente vai colocar aqui ó é o tipo de teclado e

eu vou colocar acho que é phone phone pad que é isso aqui para ele trazer o o teclado de telefone e aí o que como é que a gente faz para mostrar o teclado ó se você colocar aqui o no caso aqui do do Mac né ó Command Shift k ele vai trazer o teclado você muda para CPF ele vai mostrar esse teclado aqui ó tá aqui no caso não tem máscara e não tem limitação de tamanho Mas a gente vai fazer eh a limitação de tamanho para mostrar para vocês aí vocês aqui é só

para vocês verem um teclado mas a gente pode digitar por exemplo por aqui né ó pelo teclado do computador também vai funcionar perfeitamente beleza Eh aqui tem muitas formas de a gente Fazer isso né Eh a gente poderia fazer direto aqui para para simplificar que é o seguinte ó eu posso criar uma uma classe uma classe não uma pasta chamada utils dentro da dessa pasta utils eu vou criar aqui um CPF PTS vou exportar por padrão uma classe chamada CPF só para agrupar duas funções dentro uma vai ser a formatar formatar recebe o CPF como

string e Retorna o CPF como string e aqui a gente vai formatar um CPF aí ele colocou aqui algumas expressões regulares para fazer a formatação do CPF aqui acho precisa só fazer uma validação que se o CPF p l for maior do que 14 eu quero que ele limite o tamanho do F para ter no máximo 14 caracteres tá então e a gente poderia ter uma uma função para desformatar caso seja necessário então desformatar poderia também ter uma para validar o CPF tá então você tem Aqui duas funções uma vez que eu tenho essa função

de formatar lá na hora de setar no meu formulário aqui setar o CPF basta você chamar a função CPF ponto formatar e passar o o CPF que aí ele já vai automaticamente aplicar a máscara de CPF na hora que você digitar aqui no caso e na verdade não não seria nem aqui aqui a gente poderia chamar o desformatar para você chamar o o CPF desformatado e aqui é que você vai Aplicar a máscara de CPF então aqui você pode colocar o CPF pon tá CPF ou seja ele sempre vai aparecer formatado no no campo de

entrada mas na hora de salvar no usuário você salva o CPF sem os pontos tá internamente você vai fazer essa mudança Então se a gente colocar aqui ó 1 2 3 4 5 6 7 8 9 né aqui ele não tá é completou ó gerou Alguns alguns problemas aqui deixa eu ver o que que tá acontecendo ó ele tá deixando passar aí gerou alguns Problemas deixa eu ver o que é que tá acontecendo valor formatar ele alterou o valor alterou aqui em teoria era para funcionar corretamente Mas a gente pode também se quiser armazenar o

CPF já formatado se a gente armazena o CPF formatado e não fica formatando e desformatado E aí eu acho que vai vai ajudar aqui na tá acontecendo alguma coisa que eu não vou parar para investigar agora mas se eu colocar aqui ó Eh agora sim ó ele não deixa passar depois é só olhar para ver o que é que tá acontecendo lá no bug ó não deixa colocar eh eh letras por exemplo e só pode colocar número e ele vai automaticamente formatando o CPF né 1 2 3 4 5 6 7 8 9 0 9

9 nove aqui no meu teclado tá ruim 9 99 no final ou então 0 no final tá então aqui é uma forma simples de você criar máscara no CPF na hora que você for salvar no objeto você aplica a máscara Ou se você não quiser você também tem como colocar aqui no valor e só ver o que tipo de bug estava acontecendo ali no nosso exemplo uma coisa que a gente pode fazer é tirar essa essa parte aqui digamos assim da função salvar função validar use effect os use state colocar isso dentro de um Hook

personalizado pra gente terminar a aula que é basicamente o seguinte ó eh você pode criar aqui um uma pasta chamada hooks e aí você pode criar um um Hook chamado use form Usuário por exemplo vamos supor que você chamou essa tela de formulário de usuário e você quer criar um Hook só para organizar todos esses essa essa parte do gerenciamento de estado e tal então aqui você pode criar uma função a gente usa essa nomenclatura né de use alguma coisa ó use form usuário da mesma forma que tem o use effect o use state a

gente chama também e use alguma coisa quando é um Hook personalizado da nossa aplicação então a Gente pode simplesmente ó para só para começar poderia depois ter outras refatorações para fazer isso eu vou copiar todo esse trecho aqui dar um um com coma x aqui no no no Mac né e trazer para cá a gente pode aí vai ter que fazer os imports daquilo que eu preciso como é o caso do use state e também do use effect e no final a gente pode retornar D aqui um return aquilo que a gente precisa que seja

usado lá na outra classe então por exemplo o usuário Eu preciso lá erros eu preciso sete usuário eu preciso e o salvar Eu também preciso então com essas esses quatro itens sendo exportados a gente pode importar aqui o nosso Hook personalizado aí você percebe que o nosso componente fica muito mais clean e ele fica digamos assim eh voltado ele tem uma uma e uma responsabilidade de cuidar dos componentes da renderização dos Componentes e não necessariamente do gerenciamento de estado da sua aplicação então ele vai continuar funcionando ó Vou colocar aqui para o CPF 1 2

3 4 5 6 7 8 9 900 Vou salvar é para ele salvar também agora o CPF e vou colocar aqui ó Leonardo e mandar salvar vou tentar salvar somente le ele não permitiu salvar vou sair da minha aplicação dar um refresh aqui ó e vou tentar voltar lá pro nosso formulário e tanto o nome do Nosso usuário como o CPF do usuário estão salvos lá numn Storage mesmo que eu pare aqui a nossa aplicação e entre novamente é pra nossa aplicação estar com os dados persistidos no assn Storage ou seja primeiro eu criei aqui

diretamente no componente depois a gente foi e jogou esses dados lá para um Hook personalizado para organizar daria para fazer algumas outras refatorações aqui como não expor esse método sete usuário e a gente eh tornar uma função até mais Interessante até tinha feito isso tá eh aqui no planejamento mas eu não vou alongar demais para que a aula não fique ainda maior do que está até agora nesse momento gente só para finalizar eu quero convidar né Vocês deixa eu colocar aqui aqui inscrição @form PDV deixa eu pegar aqui a minha câmera para aparecer junto com

vocês vem junto com a gente desenvolver uma aplicação frontend backend e mobile essa aqui foi a segunda aula que nós fizemos né Deixa eu ver Aqui ó a segunda aula nós estamos aqui tá já gravamos a primeira estamos na segunda e vamos paraa terceira vai ter uma outra masterc de nextjs nextjs melhor dizendo a gente vai aprender como desenvolver a nossa api acessando o banco de dados e vai ser uma aula bem legal e depois nós vamos desenvolver uma aplicação web e mobile tudo isso como preparação para o nosso a nossa semana né que nós

vamos desenvolver uma aplicação com frontend Backend mobile e compartilhando as regras de negócio e vai ser muito legal com direito a certificado e nós vamos aprender a integrar todas essas tecnologias aqui né next react Nash reac Native Type script eu tenho certeza que vai ser muito legal gente é isso fizemos aí uma aula longa né Acho que quase 2 horas de conteúdo mas deu para ver muitas coisas legais de react Native deixa o teu comentário Compartilha o vídeo passa para teus amigos diz o que é Que você espera receber aí no canal da code pra

gente planejar outras séries de vídeos depois que passar o esquento depois do evento a gente vai continuar produzindo conteúdo eu tenho certeza que ter o teu comentário aqui embaixo ter a sua sugestão de conteúdo vai nos ajudar a entender e a planejar as novas pautas para o canal então um grande abaixo um grande abraço e até a próxima aula no aulão três que vai sair na próxima semana segunda-feira sobre nestjs não Perde esse esquenta que vai ser muito massa um grande abraço e até lá