Criando um aplicativo do zero com React-Native Expo - Aula 1

fala Dev Beleza meu nome é Caio Eduardo Eu sou programador e programo desde os meus 15 anos de idade e hoje eu vou te ensinar a desenvolver um aplicativo com o react Native e o que vamos fazer vamos começar fazendo essa tela de login aqui certo e para isso você tem que saber o que que é o react Native que nada mais é que uma biblioteca JavaScript criado pela meta certo mas o que seria esse react Native em si eh você constrói um código JavaScript utilizando o Framework react Native e esse Framework converte seu código JavaScript para código nativos Android ou iOs Na verdade ele faz os dois e Então beleza já sabemos que que R Nate agora vamos instalar o vs code Então você escrever aí vs code no seu no seu no seu Google e realizar o download aqui certo realize download baixa aí é muito simples pesquisa no YouTube caso você não saiba não vou mostrar esse aqui porque é muito simples mas depois de ter instalado V code vamos instalar o node JS que sem isso você não consegue Então você tem que instalar o node JS node. js eh baixa ele aí eu já tenho baixado por aqui aqui eh eu já tenho ele instalado então não vou instalar de novo certo mas você dá next next next que vai instalar é muito simples não tem erro beleza Eh finish beleza E agora o que vamos fazer é criar um aplicativo que é o que a gente quer de verdade né Então bora lá primeiro passo de tudo você vai vai abrir você vai dar Windows r e vamos entrar nessa tela aqui para você ver onde que eu entrei escrevi Expo react Native react Native aqui no Google certo Logo em seguida eu vim aqui em Expo Aí ele dá uma mostra um sitezinho aqui doc Docs e depois vamos aqui em Create Project Só que eu não quero criar um projeto igual eles falam aqui vou vir aquieto então primeiro vamos lá e vamos escrever Esse comando aqui no cmd aperta Windows R vou até fechar aqui e digita CMD que vai abrir o PR de comando e vamos navegar até a passa onde desejamos instalar criar nosso aplicativo no caso projeto projetos que vou até a pasta caso você não tenha a pasta Obviamente você vai criá-la vamos lá então vamos ver se já tem aa aqui não não tem m list certo CD list criamos a pasta é beleza pasta criada agora vamos lá vamos escrever Esse comando aqui na tela NP npx Create cre Create Expo app @est Meu inglês é horrível tá bom vai criar a última versão Só que eu não quero ess eu quero criar um template em branco Limpo para começar do zer certo então vamos passar essa Flag tr tr template trate logo em seguida vamos colocar Blank Blank Type script fazer esse Blank Type script aqui queros um projeto typ script que é um pouco diferente do JavaScript Qual que é a diferença entre typescript e JavaScript typescript é a tipagem JavaScript somente isso beleza qual que vai ser o nome do projeto vamos chamar de list certo vamos chamar de my list ver como que eu dei um nome aqui que eu não lembro não dei nome vamos lá então my list pode ser cri o nome que você quiser aí mas eu vou criar como my list porque é uma lista no fim das contas projeto eu vou pausar aqui porque pode demorar um pouquinho já volto beleza O npm que é o Gedor de pacotes já instalou todas as bibliotecas necessárias agora vamos confirmar Dá um giro aí my list agora vai até a pasta my list e pronto aqui está e agora você como você tem o vs code instalado no seu computador lembra que é o primeiro Passe aqui é instalar o v code vamos apertar vamos rodar o comando code ponto que nada mais é que é para abrir o v code no nosso aqui na nossa tela beleza e aqui tá criado um projeto em branco em typescript e agora o próximo passo é instalar o xogo no seu celular porque tem como você simular o aplicativo no Android Studio que é uma ferramenta para você conseguir emular o seu aplicativo no seu computador para você ver as mudanças que você vai fazer no seu aplicativo só que é muito mais fácil você utilizar o o próprio xogo que é uma ferramenta que auxilia você a desenvolver você pode usar seu próprio celular para isso que que você vai fazer você vai entrar na Play Store você vai baixar vai digitar se seu celular for Android você vai entrar na Play Store digitar xogo e realizar o download se for iOS mesma coisa entrar na Apple Store e digitar lá e baixar depois você vai ler o QR Code Mas calma aí calma aí vamos chegar lá e instalou o x Pogo aí beleza no meu caso como é muito mais fácil para mim eu não vou instalar o xogo eu vou rodar direto aqui mas eu porque eu tenho o Android tudio instalados e galera voltei aqui com o nosso projeto já aberto no Android Studio e pode ficar tranquilo que também funciona no xogo Como eu disse vocês vão ter que baixar o xogo na na sua loja de aplicativos e apontar a câmera para CR code que ele vai ler e vai executar o aplicativo no seu xogo que vai ficar exatamente Igual essa minha telinha essa minha esse meu dispositivo aqui que eu estou emulando no meu computador e como vocês podem ver e tá aqui bonitinho ó continue fica um pouco lento no computador por isso que eu acho que é melhor fazer no device é beleza e aqui ó vocês podem ver ó uma mensaginha padrão do Expo né Vamos lá vamos fazer nosso famoso olá mundo que é para para não ter azar né que esse é a famosa lenda do mundo da programação se você der control s e salvar automaticamente aparece ali olá mundo e só por você ter criar esse aplicativo assim de maneira fácil e simples Eu acho que eu já mereço seu like né então por favor dá o seu joinha aí para ajudar a gente e agora vamos lá pro que interessa que depois lado do Expo vamos configurar o projeto né Vamos estruturar as pastas vamos lá então e primeira Primeiro vamos criar aqui ó New Folder e vamos escrever src que significa source vai ser estrutura de pret nossos arquivos Vamos criar um assets a set beleza e vamos criar agora mais PR frente eu vou explicar o que que é esse components eh beleza um minutinho vamos ver vamos deixar certinho isso aqui para não ter erro né rapaziada eh escrev errado aqui vamos escrever certinho é comes beleza e eu gosto de criar uma pasta chamada Opa aqui dentro aqui dentro vamos criar uma pasta chamada global e logo em seguida vamos criar chamada pages e vamos e beleza é isso e também vamos deixar o aplicativo aqui lá vamos criar uma pasta aqui dentro de Pace vamos chamar pasta chamado login Beleza e como já é o typ scrip não precisamos fazer mais nada agora sim vamos para o que interessa que é criar a tela de login que é essa tela aqui que a gente quer certo então o primeiro passo é descobrir essa logo aqui né eu já tenho ela salva aqui eu já vou pegar ela aqui e Mas pode ficar tranquilo que esse código vai tá no github beleza é mas para ficar mais fácil Vamos aqui ó Export logo png beleza e e vamos colocar aqui em assets em image Opa vamos colocar ele aqui bem dentro dessa pastinha aqui vamos tacar ele aqui dentro vamos ver beleza vamos renomear aqui somente para logo beleza e a primeira coisa que vamos fazer para criar Nosa tela é criar a tela propriamente di vamos lá então vamos criar como começar como dentro da da da pasta login Vamos criar um arquivo chamado index tsx e outro arquivo chamado styles. ts certo e aqui no index.

tsx nós vamos começar Import Primo vamos portar o react logo em seguida Import from react Native que são os componentes do react Native vai seguindo aí vai seguindo aí Export default vamos exportar por default uma function chamada login e beleza e vamos dar um return no nosso Vamos dar um return aqui nosso há mundo há mundo e PR vocês ver que ele não importou automaticamente mas ele deveria importar e Tex Vai importar aqui beleza isso Beleza então temos nosso há mundo há mundo há mundo vamos escrever dois aí vocês vão ver que falar ué mas não apareceu aqui simples porque a gente tem que chamar ele a nossa tel no Nossa no nosso aplicativo aqui em app. test x que é na onde a primeira execução do nosso aplicativo e essa partin aí pode apagar sem querer beleza e só que vamos chamar eles aqui aí vamos chamar ele aqui dentro certo então vamos lá e vamos Apagar vamos deixar esse status bar P para cima e Aqui nós apagamos só que vamos chamar agora nssa tela login se vocês ve pode ver que ele aparece aqui ó se você escrever é lo ele já vai aparecer lin certo mas se não aparecer basta você escrever certinho essa linha que vai aparecer beleza e para você ir para um caminho mais rá para você ficar caçando as pastas aqui Global page index você pode vir aqui segurar control e clicar aqui ó ele vai direto para lá e agora vocês já estão vendo aqui né que já apareceu olá mundo do É então agora vamos começar a parte mais legal que eu amo que é criar o aplicativo né e está aqui o que que nós vamos precisar o que que vocês observam aqui tem um um ícone de imagem um texto dois inputs eh Então vamos lá vamos começar primeiro de tudo você vai ter que colocar vamos criar uma View e eu não sei se você já sabe o conceito de CSS é muito importante você saber mas eu vou dar uma breve pincelada do que que é o do que Como vamos fazer a estrutura aqui primeiro Vamos começar com a estrutura vamos começar aqui fazendo e depois eu explico pode ser assim que é mais fácil é View Vamos colocar aqui View ele já importou automaticamente viu e vamos vamos colocar aqui pra gente ver o que que a gente vai querer vai ser Vamos colocar três views já vou exp vou fazer aqui e vou explicar beleza colocar menos espaço aqui beleza esse projeto como tem um fim didático eu vou escrever vou fazer de uma forma mais didática mas tem outras formas melhores de fazer isso tá bom vamos começar que esse aqui vai ser um Style Opa antes de criar aqui n vamos aqui configurar nosso Styles que é nossos o estilo da aplicação Beleza então vamos aqui vamos dar um Import Vamos colocar aqui em cima Import Style Style Cadê Style aqui beleza e port conche é Style aí vamos chamar nosso Style Style sheet P Create e vamos aqui beleza criamos agora sem erro e vamos importar ele aqui criamos lá agora vamos importar ele aqui para ficar facin Style pode ver que ele já at está aqui ó Style copia essa linha vai dar tudo certo é beleza no começa é assim galera você tem que ir no copia e cola Até aprender os os conceitos vamos começar aqui cri uma chamada container pode ver que ele vai ficar vermelho porque o Type script ele fala que esse essa propriedade container não existe no estilos porque não criamos ainda mas calma lá container vai ser o que engloba tudo certo Esso aqui NS vamos chamar de deiner top não vamos chamar de box box fica mais fácil Box top e vamos aqui embaixo Styles Box mid e vamos chamar de box Bottom que Box é para quem não sabe é caixa em inglês beleza e OK agora vamos criar esses estilos lá eles estão tudo vermelhinho fala que não existe vamos lá então nosso styling container e container ó percebeu que tá diminuindo o erro aqui ó já parou de ficar já parou de ficar vermelho agora ele encontrou ele encontrou que tem AL algum container aqui eh Vamos criar então ele vamos criar o box mid Box top Vamos criar todos aqui Box mid e por fim Box Bottom certo opa opa isso beleza Eh vamos aqui no vamos falar aqui Flex um a items vai colocando aí rapaziada tudo certo e justify Counter Center beleza e nós falamos que essa View aqui maior zona ela tem um Flex um e tudo vai est alinhado ao centro Alin centro justify contain Center e agora vamos para o próximo vamos já definir um tamanho Vamos colocar de 200 só pra gente observar Vamos colocar um background vermelho aqui aqui e beleza e aqui também vamos colocar Vamos colocar as mesmas coisas para todos certo beleza aqui esse aqui sesso aqui esse aqui eh percebeu que não mudou nada já deveria ter mudado agora vamos ver o que fizemos de errado Vamos fazer um teste ver se tá tudo tá tudo ok aqui beleza o que tá de errado é que isso aqui não tá ocupando 100% vamos fazer o seguinte Eh vamos tirar esse aqui daqui de dentro vamos ver vamos fazer um teste não então vamos fazer o seguinte por enquanto vamos colocar um meer de 100% aqui E um R de 100% Ou melhor ou melhor vamos tirar isso tudo aqui e deixar só login por enquanto a gente só quer o login Não queremos mais nada beleza e a gente tem que colocar Um textinho aqui vou colocar aqui top e top mid e Bottom beleza agora sim tá aparecendo os três só Claro né tem que colocar um de 100% aqui senão ele não vai ocupar toda a tela Vamos colocar em todos agora aqui nós vamos colocar Green e aqui Blue para ficar mais fácil de visualizar e o que eu quero falar para vocês é como funciona o CSS por exemplo esse contêiner ele tá ele é esse quadrado branco ele tá englobando tudo se eu colocar um pend aqui para ficar melhor vocês observar ele tá englobando toda toda a linha todo todo o conteúdo ele é como se fosse a caixa maior esses outros esses três outras views aqui que nós chamamos de box top Box mid e Box Bottom são caixas menores que assim que vamos definindo o qual o que vamos querer na nossa aplicação na caixa superior Vamos colocar uma uma imagem e um texto Então vamos lá certo e Primeiro vamos aqui no boxtop vamos deixar o celular aqui do lado Box stops nó vai colocar image que é o componente imagem percebe que ele vai dar um ele vai dar um erro porque o componente image não existe aqui ainda vamos colocar ele aqui então e meu meu device por algum motivo bugou ali mas já ele vai trazer de novo Reload Open às vezes buga asse mesmo mas é no ao vivo é assim mesmo aí galera deu tudo certo aqui trouxe aqui colocamos componente image mas como não colocamos nada não vai funcionar né e Primeiro vamos tirar aqui esse pend que não é interessante não tá usando usando para nada por enquanto e beleza vamos lá e agora vamos importar essa nossa imagem aqui que é essa nossa logo beleza Eh aqui no código vamos dar aqui então Import Import logo from volta uma pasta volta outra pasta assets e como é que é o nome vamos ver aqui é logo png logo ponto pon png beleza aí você aí você vai me perguntar assim eh Por que que tá vermelho Por que que tá vermelho se se ele existe aqui e tudo bonitinho o caminho tá certo já vou explicar isso isso é o Type script falando que esse logo png não existe mas vamos resolver esse problema Primeiro vamos aqui em source e vamos colocar logo beleza ó lá que bonitinho já apareceu mas vamos tirar esse vermelho aqui porque é muito chato no código e é simples você vai vir aqui no New Folder criar nova pasta e vai chamar de @types Vamos criar esse esse tipo em types você vai criar o types png d. ts aí você vai declarar vai declarar que ele existe declar Místico ppng aprende esse macetinho aí que vai te salvar muito e beleza deixar um espacinho aqui agora vamos colocar nosso texto né bem de volta vou copiar aqui porque eu sou proso e cadê cadê o nosso aplicativo aqui beleza vamos lá então ver como é que é bem-vindo de volta beleza vamos só criar aqui text bem-vindo de volta beleza aqui não está preocupado com o design ainda vamos só colocando as informações agora logo embaixo uma Label e um input beleza e [Música] text eh endereço de e-mail endereço de e-mail e depois senha e depois Opa é continua aqui primeiro é o input né Vamos lá input input na verdade é text input e vamos colocar ele aqui que é o nosso caixinha de dados né Vamos chamar assim que para quem não sabe input é uma vai ser uma entrada de dados que Nosa aquela caixinha bonitinha só que a Nosa vai ficar feia porque não tem nenhum estilo inclusive ela não vai nem aparecer mas ela tá aqui ó declado vai levantar quando quando eu clicar nela viu vamos lá e beleza e agora vamos ver que mais tem aqui botão vai ter um botão também vamos colocar esse botão já eh na verdade V deixar o botão por último que eu vou ensinar uma coisinha legal para vocês eh Beleza agora Vamos por partes vamos primeiro arrumar essas essas dimensões que não tá legal eh como nosso container é Flex ele tá ocupando a tela toda agora Vamos definir um um tamanho para cada box e tem que ser o mesmo tamanho vamos lá então eh esse nosso R aqui como vamos criar algo mais responsvel que vai se adequar de acordo se adequar de acordo com a tela Então vamos L dimensions pget que que é o Dimension vai é uma é um componente do re pra gente observar o tamanho das Telas get que que nós vai querer nós vai querer o tamanho do Windows certo pon bar3 e aqui é string tá bom isso is Beleza já vai aumentar ali ó e nossos outros tamanhos aqui Vamos colocar esse aqui com tamanho de quatro lá ele e esse aqui com três vamos vamos P essa essa dimensão perfeito perfeito e e uma coisa que tá me incomodando muito aqui é que a minha extensão do do Drcula não tá funcionando deixa eu colocar aqui cara porque ela é muito melhor tá bom Drcula tem Aí usa Ufa tava dando gonin já beleza Eh vamos lá então agora vamos deixar vamos começar a deixar a logo bonitinha né vamos vamos colocar Então vamos colocar tudo ao centro aqui no no box toop Beleza e como que eu coloco tudo ao centro como vocês já viram a lag items eu quero que tudo fica ao centro e o Shy contage Eu também aqui quero que tudo fique ao centro beleza ó lá ó e já tá tomando forma já beleza só que a minha fonte aqui é mas na verdade vamos deixar Nosa vamos terminar de ajustar Nossa logo vamos criar um estilo para logo logo bonitinho vamos aqui e vamos criar aqui logo criar ela aqui bonitinha deixa eu ver aqui logo widt 80 vamos colocar um tamanho de 80 pixels por um rit de 80 pi beleza show de bola não mudou nada né Mas beleza e vamos colocar aqui também o resize mode dela que vai chamar content ver vai ficar contente na sua no seu na sua caixinha aqui vai ser ajustar de acordo com a caixinha e agora vamos colocar um um estilo também pro nosso texto né Vamos chamar de texte poderia ser título também eu vou chamar de texte beleza aqui eu venho aqui fonte page Vamos colocar bold certo e vamos dar um margem top de 40 pode ser isso agora sim vamos que tá um mar uma tem uma margem top de 40 e agora vamos começar fazer a parte de baixo já vendo que ele vai tomando forma já isso Beleza agora que que nós queremos tá B vamos para as cores temos que pegar essas cores aqui como que eu gosto de estruturar as cores simples eu venho aqui em Global V na pasta aqui global e vamos criar um arquivo chamado tems ptsx e vamos dar um Export con temas beleza e vamos chamar de Colors Opa importar o negócio nada a ver aqui V chamar de Colors minúsculo e vamos eu já tenho já tenho pronto aqui só vou copiar e colar para ficar mais fácil Beleza beleza é agora V aqui e vamos a cor desse não precisa mas vamos agora pros inputs certo esse aqui também vai ser o box mid vai ser também vamos só um pend na verdade um p horizontal aqui ou melhor ainda vamos colocar tudo ao centro aqui já tá tudo ao centro beleza no box mid Vamos colocar um p de horizontal de 37 beleza e claro que agora vamos ter que vamos ter que fazer o nosso title vamos aqui primeiro NS vamos chamar de tit input tit input opa opa tit input V colocar aqui no fim e e vamos aqui então no TT input e vamos colocar um Margin left de C um color aqui sim nós vamos chamar de nós vamos vamos pegar a cor da onde nós colocamos lá no global temas P Colors pgy beleza tá aqui ó e como já fiz primeira parte vamos comentar esse Red aqui que tá horrível e e acho que nós devemos aumentar essa fonte também do texto geral vamos dar um fonte size para esse texto aqui que eu esqueci vamos lá vem aqui Font size 18 18 pixels é beleza e agora aqui no title input vamos lá vamos dar margem top para ele margem top de 20 beleza agora sim tá ficando massa eh e como é a mesma coisa de baixo Vamos só copiar e colar por de baixo também ó para não perder tempo e agora vamos criar o nosso nosso nosso text input certo aqui já tá criado na verdade vamos lá e vamos vamos colocar Vamos criar aqui aqui porque como vocês viram Tem um ícone aqui entendeu então nós vamos ter que vamos ter que estilizar para ficar desse jeito bonitinho e Ah e aqui parece que é maiúsculo né a gente colocou minúsculo Vamos colocar endereço de e-mail e aqui é senha sem aí mais fácil escrever que copiar Mas como Eu já copiei V colocar aqui direto Beleza agora vamos lá vamos criar então como é um um input com três linhas Então o que nós podemos observar aqui quer dizer um input com Icone não dá para colocar um Icone diretamente no input desse jeito usando o componente Então vamos ter que criar uma estrutura para conseguirmos copiar isso aqui e é muito simples vamos lá então vamos criar uma caixa viu que vai ter nessa caixa vai ter o meu input e vai ter o meu Icone Só que ainda não tem Icone Então vamos colocar um por exemplo Olá beleza E como que vamos chamar ISO aqui vamos chamar de vamos chamar de box input [Música] certo deixar aqui do lado PR gente observar nas mudanç o que que vai ter no box input no meu box input vai ter um um de 100% rit de 40 um border widget de um um border radios que é o tamanho da border vou até tirar esse aqui para mostrar depois para vocês ver que legal e um margem top de 10 beleza ó lá e tá começando a ter sentido só que vocês viram que o Ola ficou lá embaixo porque por padrão o react a coloca os alinhamentos como colum eu vou explicar aqui para ficar bem mais fácil vocês entender o r Native aqui tá uma View certo se você coloca dois itens dentro de uma View por exemplo duas View ou uma image um texto ou uma View e um botão ele vai colocar aqui por exemplo primeira View e a segunda embaixo só o que a gente quer não é um embaixo do outro a gente nesse caso aqui é um lado do outro que é o uma View o input aqui e o Icone aqui por isso nós temos que mudar o tipo de de ordenação dele e vamos chamar de e como nós fazemos isso usamos o Flex Direction tem o colum colum rever e Row Reverse O que queremos dizer Row que significa linha em inglês certo ah lá ó ele já trouxe só como o input não tem tamanho ficou um ladinho do outro esquisito esquisitíssimo ali nós vamos corrigir isso já já e beleza e vamos chamar aqui então de isso aqui de Style de input certo input é nosso input deixa eu ver aqui rapidinho minutinho input beleza e vamos dar um desse input vai ser de 100% um wid de 100% que ele vai ocupar 100% também beleza viu que até estourou al mas já vamos corrigir isso já e só vocês verem do input Vamos colocar um um background color red aqui para vocês ficar observando horrível mesmo para observar beleza no meu box no meu agora vamos ter que colocar o ícone né como vamos colocar o simples vamos procurar uma biblioteca chamada Vector retive você vai escrever Vector retive e vai vir aqui vamos instalar Apu ainda vamos ter que pesquisar melhor aqui escrever aqui npm re isso aqui ele aqui bonitão e copia e cola Ó você vê que biblioteca tem muitos downloads e você vem aqui no no código você vem aqui em terminal New terminal você poderia vir aqui também parar a execução e já instalar vamos por aqui que é mais simples beleza e vai instalar aqui rapidinho tá instalado beleza instalou e como fazemos para utilizar ele eh é simples Eu gosto de vir aqui ó e pesquisar o diretório para nós ver os ícones que já que tem aqui mas eu já sei qual que eu quero tá eu Até copiei aqui e vou copiar e colar material icons Beleza agora vamos vir aqui e vamos criar o nosso ícone aqui na nossa aplicação como endereço de eil imag colocar tem que ser o mesmo né vamos ver qu é aqui esse eilin bonitinho essa caixinha de mensagem al então V aqui material icons o nome dele eil bem intuitivo eil colar um size nele de 20 para ficar legal 20 e um color temas para ficar mais fácil gre e por que que você fala ah por que por que que você não não digita direto o o Grey aqui por exemplo poderia muito bem vir aqui e digitar assim ó Grey por qu porque eu criando uma constante dessa forma mais para frente eu quero alterar um aplicativo não quero mais usar o a primary a cor primária azul aí eu não preciso sair Trocando em todo o local do do projeto eu simplesmente venho aqui e mudo porém eu tenho que usar essa variável em todo o local entendeu para ficar bem mais fao a manutenção do código OK agora V vamos aqui Você já viu que adicionaram aqui né o e-mail Zinho bonitinho ali agora vamos continuar o nosso Box inut porque tá muito bugado né é primeiro vamos aqui e e vamos dar um border rid 40 que eu falei que é para deixar redondinho e claro tem que fazero também senão vai ficar feito ali lá beleza viu tomando forma mas vocês viram que o que o input ficou muito grande Vamos colocar 80% 8% é muito colocar 90 belza só que vamos aqui então tem Center isso Beleza só que agora não precisamos mais observar o input e agora beleza ficou lindo né só que vamos dar um vamos ter que colocar um pent horizontal aqui para ficar legal porque tá muito coladinho né então vamos colocar um um Vamos colocar um margem top aqui para ele ficar um pouquinho mais erguin do texto ali Ah já tem já vamos colocar então um pendit horizontal de 30 ver se vai ficar legal muito 20 Vamos colocar 10 isso agora sim ficou interessante e vamos tirar esse verde que que tá dando minha vista já isso ó tá tomando forma só que a Vamos colocar um background também né só que não vai ser no input vai ser no box input porque é como se ele fosse a caixa que tá segurando tudo certo background color temas P Colors pon Light Grey isso agora ficou elegante hein eh beleza vamos ver se tá ficando igual lá Tá quase Tá quase Tá quase Acho que vamos diminuir um pouco esse pendent aqui né esse pend horizontal aqui acho que tá muito ou ou melhor não melhor é colocar aqui 95 e vamos colocar o na verdade Uns 90 tava bom mesmo e Vamos diminuir o p Vamos colocar um ptal de CCO isso agora ficou bem melhor e beleza agora vamos dar uma no box input aqui o border color Vamos colocar a mesma coisa desse aqui aí agora ficou bem parecido né talvez não idêntico Mas tá bem parecido e vamos oita vamos copiar e colar agora o nosso outro input para ficar igual né só que em vezess aqui ser esse aqui ser eil vamos chamar ele de removed Ai aqui esses nomes aqui não S aleatório não tá você tem que vir aqui na lista que eu mostrei PR vocês e olhar Qual que você quer ó nosso caso é o design cortar o ent design aqui entendeu por exemplo aqui chamar ele aqui no lugar desse material icons e colocar o name que você quer por exemplo esse por exemplo vou fazer aqui um exemplo para vocês verem se eu quisesse eu poderia usar ess aqui só que como não eu queria usar sei lá esse daqui também aí eu copio e colo e pronto ele vai aparecer lá vai mudar Opa eu copiei errado CTR C aqui ó á viu eu não quero isso eu quero o e-mail mesmo beleza vamos deixar o e-mail é por enquanto tá ficando bonitinho né Beleza agora vamos para a última parte que é criar o criar o botão Vamos criar esse botão entrar aqui beleza e no box botton vamos chamar vamos criar uma View chamada na verdade não vamos criar já o botão direto Vamos criar aqui to sh opit que é o componente de botão do react n e e vamos escrever Vamos dar um estilo para ele chamado Style pbon certo que que vai teresse Style pbon apenas um texto um um text um text chamado entrar certo e no box buton vamos primeiro alinhar ele tudo a cer item Center e justify Center e vamos criar agora o but que já tá tendo vida lá tendo forma e aqui no buton que que nós vamos fazer no buton ele vai ter um wid de 200 um R que é o tamanho de 50 também vai tudo ao centro Center Center certo só color dele temas sempre l tem Prime vai ser a cor primária r doot beleza ó lá tomando forma já hein e aqui no box bot vamos comentar esse Blue aqui que não serve mais para nada pra gente é beleza e agora vamos mudar a cor aqui vamos criar um Vamos dar um estilo também vamos chamar de vamos chamar ele de tex text vamos chamar ele de text Button text buton o que que vai ter no no text buton Opa no text Button vai ter um um Font size de é 16 Então acho que é um tamanho bom e um color de Vamos colocar um branco aqui eu vou colocar direto mesmo e um fonte R de bold aí beleza vamos dar uma olhadinha aqui só que V ele não tá ele não tá tão grande ele não tá tão afastado igual o nosso né vamos corrigir esse vamos tirar esse justify content Opa esse não vamos vir aqui no box no box botton esse justify content Vamos colocar ele vamos tirar ele de ser no centro vou te mostrar a diferença entre o alig e e o justify cont o alig vai alinhar o centro da da sua div e por exemplo deixa eu dar um exemplo aqui para ficar claro para não ter dúvidas ó por exemplo aqui tá sua ca você o componente ele vai comear aqui só que você quer que ele fica ao centro E se você escrever ele vai vir para cá V botar aqui vem para cá mas eu quero justif justify content Center então ele vai vir para cá se eu juntar agora justify cont Center mais a ele vem para cá o centro do centro e o e como fizemos aqui você pode observar eh tá tá o cantinho E se eu colocar aqui ele vai lá pro centro mas vai ficar no meio ali mas se eu colocar aqui ele vai ficar no centro do centro mas eu não quero isso eu só quero que ele fique ali então deixa só um al item vou até descomentar isso que não é mais necessário deixar só o Blue aqui ver tá tomando forma já tá ficando bonitinho só percebe que tem uma bordinha aqui é como é que como é que a gente vai fazer isso tem uma macetinha aqui ó gerador de Box shown reaction Os cara já deixa tudo pronto pra gente ó é esse aqui e você coloca o tamanho que você quer e copia e cola aqui eu já tenho o tamanho ideal aqui e eu acho que só por essa dica aí acho que já V seu like né Não esquece de dar o like no vídeo aí para ajudar o canal tá bom e no buton aqui beleza pode perceber que já que tá ficando legalzinho só que cara eu acho que tá muito pequeno nosso 200 aqui porque acho que essa tela é um pouco maior que a outra então vamos aumentar esse botão para 280 ver se fica legal ah muito vamos colocar 250 250 fic legal é acho que ficou legal só que percebe que tem mais uma coisinha aqui ó não tem conta cria agora vamos criar então nós vamos fazer esse esse testinho aí né Mas em vez de colocar ele dentro do botton Vamos colocar ele livre colocar a telinha aqui para vocês ficar observando e vamos colocar aqui não tem conta crie agora beleza e ele já foi pro fim mas para garantir que ele vai ficar no fim que não vai bugar a nenhum dispositivo Tex bot Vamos criar um estilo para ele para ele não se perder e vamos lá vamos vamos falar que ele tem um um tamanho de beleza Font size 16 e um color temas.

org beleza lá beleza e vamos só que perceber aqui projeto Ele tem ele é azulzinho né Vamos lá vamos arrumar isso Então como que a gente pode fazer isso aqui vai englobar ele em outro Tex ficar legalzinho ele vai vai continuar com as mesmas configuração do outro porém se a gente passar por aqui vai sobre vai sobrepor o desse desse desse carinha aqui Vai juntar na verdade vamos vamos colocar então e vamos chamar de text Bottom Create beleza e vamos colocar aqui vou colocar as mesmas coisas só que aqui vai ser primary beleza Só que eu acho que não vale a pena criar ele aqui porque acho que é repetir código então o que dá para fazer você pode colocar direto aqui ó como é a mesma coisa a gente só pode colocar temas do colos P primary que vai ter o mesmo resultado sem precisar repetir código já pega esses macete aí beleza Eh agora ficou legal então basicamente replicamos a tela aqui rapidinho certo só que ainda não tá funcional né Vocês percebem que não tá funcional Inclusive tem que arrumar o pendent aqui ó é vamos colocar um esse P tá muito feit tem que ser 10 mesmo não tem como aqui quer ver no box Ah deixa eu ver no box input sim como colocar um Pain No input aqui para ficar legal pend Horizon pend left pend left Vamos colocar mais cinco aí ficar 10 por input e não foge lá agora ficou perfeito e só que ainda não tá funcional é uma tela de login mas porém ainda não está funcional o que vamos fazer eh vamos agora fazer a parte da programação do do da nossa de login Porque aqui no caso é só design ser não tem nada ainda não faz nada agora vamos programar ela beleza vamos começar criando as variáveis Vamos criar as variáveis aqui em cima é chamada de criar o rook con e-mail e set e-mail use state vazil Esse é o Hook para conseguir gerenciar nossas variáveis de estados na [Música] aqui passw e vou explicar já um minutinho passw op passw beleza vamos explicar o state tem tem esses esses dois parmetros aqui e e 7 é ai da e o outro é para setar o valor da variável você entendeu eu vou explicar melhor isso e vamos começar aqui no text input colocando o Val que que é o Val de text input é o e-mail ou é do text input e-mail é o e-mail e só que vocês vão ver que não dá para acar nada tá vendo agora não dá para digitar porque não tô mudando nada se eu escrever aqui por exemplo. ND que é meu e-mail @gmail. com ele vai vir direto aqui poré eu não posso mudar isso não é interessante que é isso e 1 2 3 lá a senha foi porque eu não coloquei mas a partir do momento que eu colocar aqui ó Tex colocar Val e colocar aqui ó lá já não vai mais como que podemos mudar isso primeiro a gente vai tirar ISO aqui que não serve que a gente não quer que fica constante quer que fica uma variável e vai escrever Opa vai usar o nós vamos usar a função daqui do Pr Tex input chamado on Change text que que ele retorna on text a gente pode desestruturar ele aqui 7 me e passar o resultado que é para ele que vai direto lá agora sim ó agora sim ele vai digitando certo e uma maneira mais fácil ainda que O componente permite a gente fazer é passar o set por exemplo set password aqui embaixo direto ele também vai entender você escolhe o jeito que você quer eu gosto de deixar nesse caso como eu quero passar o conteúdo para cá direto assim e já tá certinho aqui beleza e só que agora vamos criar a função para logar claro que isso aqui é apenas um teste não tem servidor para para dar esses dados Então vamos fazer algo mais didático entendeu assim vamos criar uma função chamada function get login get login beleza temos uma função aqui e vamos criar um try catch englobado trycatch porque cas da er vai dar uma mensagem e vamos já começando verificando assim vamos começar de cara você tem que começar assim não existe e-mail ou não existe o password significa que o cara não digitou nada certo concorda comigo então vamos dar um return Alert importar o Alert lá em cima ponto Alert ó importou ele aqui e vamos passar o seguinte Atenção atenção e vírgula porque o primeiro parâmetro é o seguinte ó Alert ele fala que tem que ser uma tem que ter uma vamos ver um título uma mensagem e esse aqui é opcional mensagem botos Mas vamos colocar um título e uma mensagem atenção e logo em seguida informe os campos obriga tórios beleza e vamos colocar aqui ó console.

log logado com sucesso e Caso der erro console P log error Beleza agora o cara vem aqui primeiro não vai acontecer nada porque não é simplesmente você vi e colocar a função que vai dar certo agora você tem que ativar ela em Onde vamos ativar quando clicar em entrar e quando nós vamos fazer isso onpress onpress do do botão então quando eu clicar pressionar o botão get login vai ativar a função quando ativar o botão entrar vai ativar a função get login e informe os campos obrigatórios porque eu não informei nada agora vamos vamos lá a em vez de ser um console Vamos colocar um alerta aqui colocar um alerta aqui padrãozinho eu vamos colocar aqui assim logado com sucesso aí ó informa os campos obrigatórios beleza só que agora vamos vamos informar todos os campos ner0 @gmail. com 1 2 3 4 5 logado com sucesso agora vamos deixar melhor isso aqui né vamos melhorar esse nosso a nossa telinha primeiro que demora não é não é rápido assim para fazer uma requisição só como não temos servidor vamos simular um aqui e como vamos fazer isso primeiro vamos transformar isso aqui em uma função assíncrona por tem que ser assíncrona porque ele vai esperar um resultado e vamos simular um set time out de 3 segundos certo 3 segundos e quando D set time de 3 segundos a gente vai lá e e coloca aqui não sei se precisa fazer isso vamos ver Não lembro tá não nada ver é beleza e vai esperar 3 segundos e vai dar essa mensagem aqui T time ter de 3 segundos vai dar essa mensagem e para simular que tá carregando vamos criar uma variável chamada const vamos chamar de ling set inicialmente use state ela vai false quando começar a função vamos ativar ela set e quando finalizar Vamos criar aqui fining aqui no tob passage nós vai fazer o seguinte vamos criar uma condição inline e vamos falar Ling é true Se eu colocar e comercial na verdade isso aqui ele é true sim então vamos criar um chamar indicator reative seão vamos colocar isso aqui vamos colocar o texto opa pera aí escrev errado aqui beleza então vamos desestruturar ISO aqui para ficar mais fácil de observar então ele tá perguntando o seguinte Ling é true se sim ele mostra Active indicator já vou te mostrar que é isso vamos dar um chamar dar um color color Branco né e o tamanho size SM né Ficar pequeninho pequeninho beleza ol vamos estar para ficar melhor para observar certo e na verdade é assim beleza E então quando essa vari tiver true ele vai deixar carregando aqui vamos observar ó primeiro ele vai vamos escrever aqui então p. b e 1 2 3 4 5 6 pera aí que deu ruim aqui vamos ver bom era para funcionar né e galera eu voltei aqui eu descobri e é óbvio é como não é uma uma requisição para um servidor não tem como eu dar um await aqui para esperar ele executa direto tá indo pro final aqui de uma vez sem sem mostrar a animação então para resolver esse problema aqui nesse caso que é só uma simulação Vamos colocar aqui como vamos só vamos dar dar falsa na verdade quando terminar tudo aquilo ali vamos tirar o final aqui eh e agora sim vocês vão ver que ó lá ó um 2 3 logado com sucesso beleza mas porém eh a senha tem que bater né então vamos fazer o seguinte vamos fazer o seguinte if Vamos colocar aqui apenas se o e-mail foi igual a igual a Caio pn0 gmail.