Au10 - Mobile - React Native - Estilizando o formulário - Mestres BEGIN

[Música] fala pessoal Janer aqui no vídeo de hoje nós vamos trabalhar aqui na estilização Desse nosso formulário né nas aulas passadas ali a gente criou a estrutura criou a funcionalidade e agora nós vamos trabalhar aqui estilizando né para deixar ele da mesma forma que nós temos o design que foi proposto ali no nosso Adobe XD Tá certo então vamos aqui já pro código né esse aqui é é o app dessa forma que tá aqui o formulário né foi o que a gente fez na aula passada né novamente ele tá com a funcionalidade né de digitar

e tudo mas o estilo tá completamente diferente né se a gente olha aqui no exd puxar aqui o celular para essa posição o XD ele vai ele tem que ficar dessa forma aqui né ou o mais próximo disso tá então vamos fazer isso vamos trabalhar aqui com essa estilização né e Começando aqui quando a gente já bate o olho aqui no formulário a gente já pode separar por exemplo o header do do formulário que seria o título né de cadastrar produto e o botão de fechar né E aí e os esses outros estilos já é

relacionado ao contêiner em si né que é esse contêiner branco que é essa distância por exemplo do do input né um pading interno né uma margem interna que distancia a borda aqui do do formulário do elemento né e cores né cores estilos de fonte enfim estilos de borda né Nós vamos estar fazendo tudo isso aí no final tem a questão também do botão né o botão adicionar produto que a gente vai tá abordando também tá beleza então vamos começar aqui separando esse esse esse header né que é o Cadastrar produto e o botão e quando

eu falo separar né Vamos aqui no código é basicamente criar um contêiner para ele né porque se a gente olhar ele tá posicionado um ao lado do outro né o botão fechar e o Cadastrar produto o o texto né então a gente pode a gente pode ver também que tem um certo espaçamento entre esse título e o início aqui dos botões né então eu vou separar esse cara aqui na verdade antes de separar né a nossa View externa que seria essa esse quadrado branco né do formulário ele já tem um a gente já pode aplicar

alguns estilos n ele tá Então nesse Styles P container navio se eu abro aqui o meu arquivo de Styles né do da componente é product form eu já tenho aqui um título pro contêiner onde eu defini a cor de fundo Branca largura e altura tá então aqui eu posso fazer por exemplo um padding e uns 10 pixis né se eu salvo ele vai distanciar né dá o PED em todos os lados distanciando o meu texto do da borda do coner o padding novamente é a margem interna né uma margem interna à Borda né Nós temos

a borda para dentro é padding para fora é margem tá então eu acredito que é vou ter que aumentar esse pading né talvez 20 é que se a gente olha no XD ó no XD ele faz a distância aqui tá de 40 né 40 Pixel mas nesse exemplo aqui vai ser bastante até que não vamos deixar 30 né os 30 Pixel tá bom além disso vamos voltar aqui no XD a borda do contêiner ele tem uma curvatura tá E essa curvatura a gente pode olhar aqui no XD que é de 20 pixs né o raio

dessa borda Então nesse contêiner Branco né eu posso passar aqui um border radius de 20 piis né e ele vai arredondar as bordas para mim beleza então feito isso aqui agora vamos partir aqui pro cabeçalho né que seria o header né que é o texto Cadastrar produto e o botão fechar né esse botão fechar eu coloquei um texto aqui com x mas na verdade ele é um ícone né e nas aulas passadas a gente já falou dos ícones e a gente já eh entendeu ali como que a gente definiu né uma forma para usar os

ícones aqui na aplicação que é usando o react Native svg se a gente vem aqui no Google ó a gente pesquisa pro react sv GR né que é basicamente o que eu a ferramenta que eu estou usando para converter um ícone svg em uma componente react tá então esse o botão né o o x o ícone x né o ícone de fechar eu já converti ele aqui para uma componente né então eu tenho aqui a componente Close icon que era um svg e que foi convertido para uma é componente usando o svgr né ali aquela

ferramenta no Browser então ao invés de eu ter esse text com x dentro eu vou ter na verdade a componente Close icon tá se eu salvo isso aqui agora apareceu ali o meu ícone né esse ícone a gente pode passar um um size para ele ou só largura né largura de sei lá colocar aqui 20 para ele fica um pouco menor né é quando eu só defino a altura ele já troca a altura também porque o Icone né ele o svg em si ele tem um viewbox né ele tem um uma caixa ali imaginária que

é onde o svg é renderizado dentro então quando eu troco uma dimensão esse vibox aqui né de 48 pixis então ele é um quadrado então se eu troco só a largura a altura também vai se ajustar tá então então agora o é o botão fechar ficou com tamanho bom E aí pra separar esses dois né eu vou criar outra View e vou colocar esse texto e esse delete dentro tá no estilo aqui no visual não vai mudar nada porque essa minha View eu não tô aplicando nenhum estilo nela né então eu posso eu vou aplicar

né o Style aqui eu vou criar um estilo pra essa View eu vou chamar isso aqui de Styles vou chamar de header né e aqui no meu arquivo de estilo eu vou criar a propriedade header tá E aqui dentro o que que eu vou fazer né O que que a gente já começa vendo que tem que fazer eh os dois tem que ser colocado um ao lado do outro né e não um sobre o outro então no Styles aqui do container daquela minha View eu vou passar o Flex Direction Row né porque aí ele vai

ser posicionado em linha né um ao lado do outro e aí dessa forma o botão X Ele já veio aqui pra direita do meu texto né Cadastrar produto certo depois disso aqui o que que a gente pode fazer eu posso usar o justify content e passar ele Space between Para quê Para ele posicionar os elementos dentro deste contêiner ou seja o texto Cadastrar produto e o botão com justificando né com o espaço esse Space bit wiin vai meio que pegar todo o espaço disponível e ao invés de colocar e esse espaço disponível à direita ele

vai colocar entre os elementos então se eu tivesse três elementos aqui ó se eu colocar se eu repetir o botão esse botão vai ter um botão no meio né entre o tipo é aqui é difícil explicar mas vocês estão vendo que ele foi posicionado no no meio daquele espaço em branco que a gente tinha quando só tinha dois elementos né então ele vai colocando espaços iguais entre os elementos tá esse Space between certo então com isso aqui feito a gente pode colocar uma margem né uma margem vamos a margem na verdade é só a margem

inferior né então eu posso passar aqui o margem borum de sei lá 20 pixels para ele dar essa distância aqui né que se a gente olha lá no XD existe uma distância né entre o texto e o a parte inferior aqui do onde já começa o input de categoria tá então com isso aqui eh Tá ok vamos partir aqui agora pro texto né o título aqui Cadastrar produto Então vou criar um Style para ele né Styles pon vou chamar de title mesmo né o título do do formulário tá então vou criar aqui no meu arquivo

de Style na minha Style sheet a propriedade title e aqui dentro se a gente volta aqui no XD E esse título Ele tem ele tá né ou seja o o fonte weight é Bolt e o tamanho dessa fonte é 16 pixis né então vamos aplicar isso aqui nesse texto F size 16 será vai ficar um tamanho bom vamos ver E também o Font weight Bold tá com isso aqui vamos ver aqui o app é ficou acho que ficou um pouco pequeno Vamos colocar uns 20 pixis de tamanho é ficou melhor o título né E tá

aqui o nosso botão também tranquilo agora que o título cresceu acho que eu vou aumentar aqui um pouco essa margem inferior de 20 para 30 do header né para ele distanciar um pouco onde começa os formulários Beleza então com isso aqui feito agora a gente já pode começar a estilizar o as nossas componentes né que seria o input select e o input text né que foi as componentes que Nós criamos aí nas aulas anteriores e com isso aqui é deixa eu pensar aqui Qual a ordem que na verdade vamos fazer o seguinte ó e tá

errado a ordem dos inputs aqui dos dos terços tá errado com o que a gente tem lá no XD se eu não me engano categoria marca loja de venda nome do produto vamos ver aqui categoria marca loja de venda nome não tá certo né Tá certo preço preço anterior isso tá correto eu que tô e pensando coisa que não existe então vamos aqui no input picker né Vamos estilizar ele tá então se eu abro a componente input picker né que foi o Que Nós criamos nas aulas anteriores e Aqui nós temos o Label né que

seria onde tá escrito aqui categoria marca loja de venda e o picker em si tá então a gente vai aplicar estilos neles n nesses nesses nesses elementos e aqui na pasta né no input picker eu só tenho o arquivo index.tsx Então vou criar aqui um novo arquivo de Styles P TS né Para nós separarmos né o estilo da componente e manter tudo organizado então aqui eu vou criar um const Styles né uma variável essa variável recebe Style sheet Style sheet do próprio react Native né est sheet P Create nós vamos criar aí nessa essa folha

de estilos e aqui no final eu vou dar um Export default Styles certo aqui na componente input picker Então o texto né esse Label ele vai ter um estilo dele né então aqui Style vai receber Styles e aqui ele já vai me sugerir para importar o Styles que eu criei nessa mesma pasta né nesse mesmo nível aqui do diretório eh vou chamar isso aqui de Styles ponto vou chamar de Label Label mesmo e aqui no arquivo de estilo dentro do objeto né na folha de estilo eu vou criar aqui a propriedade Label né Para ser

aplicado nesse meu texto tá e como que vai ser esse Label né vamos olhar aqui no o Lab né ele tá colorido e o texto tá em né se a gente dar uma olhada aqui categoria colorido e maiúsculo né então a gente vai aplicar isso aí no nosso texto aqui do projeto tá então aqui Label Vamos ver que na verdade o tamanho desse cara F size 10 né é um pouco é bem menor na real vamos passar aqui um fonte size de 10 vai ficar pequeno né olha lá ficou muito pequeno sei lá 14 é

14 fica bom e fonte size 14 o fonte weight vou deixar ele né bold que mais ele tem que ficar maiúsculo né então aqui no react Nate a gente tem aqui a propriedade text transforme né para transformar esse texto para upper Case ou seja upper Case vai ficar todos todas as letras né em maiúsculo eh lower Case tudo em minúsculo e o capitalize é a primeira letra sempre maiúsculo Então vamos deixar per cas ol lá categoria já ficou maiúsculo e agora a gente tem que colorir né o Color e a cor né se você lembra

aí das aulas anteriores a gente fez um toda a configuração de tema né a gente começou a pensar né o tema da forma que tá sendo usado aqui tá de uma forma bem eh básica Tá mas a gente já tem todo um sistema de tema né então se eu digito aqui team ele já sugera que para ser importado se a gente abre e tem um componente que decide qual tema vai retornar dependendo por exemplo da configuração do dispositivo Então se se o dispositivo tá em Dark mode ele já retorna o objeto de tema Dark né

se tá em Light ele já retorna o objeto de tema Light né E esse objeto né É um é literalmente o objeto com os exas decimais das cores tá então nós já temos aqui configurada a cor primária né que é o roxo aqui da Mestres Tá certo então aqui no meu no na cor do meu texto né vai ser team se a gente dá um ponto aqui ó team pon primary né a cor primária e aí seu salvo Olha lá categoria já ficou roxo Beleza então é basicamente isso né otil quilo para esse título eh

é isso para essa componente em si é isso né paraa componente picker né na verdade no picker em si a gente pode passar mais estilos também eh aqui ó nós temos o text ã como que é a propriedade do picker só confirmar aqui para mim essa é Style mesmo né tô ficando louco Style eu posso passar aqui por exemplo um color vamos vamos brincar aqui de red Opa errado color red E aí a cor né o texto aqui do do que está sendo exibido aqui né no no picker ficou vermelho né então se a gente

vem aqui no XD eu eu passei esse color red aqui só pra gente ver que eu consigo passar estilo pro picker que vai ser aplicado nesse texto né por isso a cor vermelha e no XD a gente pode ver que a cor em si desse do Place holder né o texto que fica que fica e da opção que tá marcada né ele é cinza só que a gente meio que tem uma diferença aqui porque o picker em si a gente não tá passando Place holder para ele né Por que que eu por que que eu

não passei Play rer para esse picker porque eu já coloco um selected value ele já vem com um valor com opção pré-definida Tá e isso é detalhe né Isso vai depender aí da regra de negócio do projeto que você tá trabalhando ele pode vir o select ele já pode vir selecionado com opção selecionada ou não né tudo depende e nesse caso aqui eu vou manter o simples né então como já tá pronto aqui ele já vem com opção selecionada a gente não vai tá se preocupando em estilizar e passar PR holder porque sempre que eu

abrir esse formulário já vai ter uma opção tá E essas opções até Nossa já não tá e coerente com o formulário né porque o formulário é de produto mas as opções aqui tá JavaScript Python Java mas não é o momento também da gente tá mexendo nisso agora tá a gente vai trabalhar com isso aí e definir de verdade essas opções mas não agora porque essa aula aqui é só de estilo Tá beleza então vamos deixar o input picker Aí e vamos partir pro input text né que é que são esses outros Campos que estão sendo

exibidos aí eh e ele a estrutura dele é parecida né ele tem o Label e tem o input em si então a gente pode muito bem passar eh estilos para esse cara para essa componente E aí ele não tem o arquivo Style né então eu vou fazer o seguinte eu vou copiar aqui o Styles do input picker e colar aqui no input text vou criar um arquivo aqui styles.ts e vou colar né pra gente não perder tanto tempo até porque né o próprio estilo do Label que foi o que a gente definiu que a categoria

é o mesmo estilo pro pra marca loja de venda para essa outra componente né muda a componente mas o estilo do Label é o mesmo então no input text né o texto aqui vai ter um Style né E aqui vai ser do Styles e ele já vai sugerir aqui para importar o Styles que eu acabei de criar né do arquivo que eu acabei de criar o arquivo irmão aqui Styles P Label né fazendo isso aqui salvando olha lá ó e já mudou o título aqui de todos os nossos inputs né então muito bom isso aí

já vai simplificar bastante o nosso trabalho aqui E além disso O que que a gente pode fazer a gente pode estilizar o input em si né que é onde eu digito o texto a gente pode aplicar eh algumas coisas até porque e nesse caso aqui ele já tem Place holder né só que o Place holder ele já tá na cor correta né já tá na cor que esse cinza né Por padrão ele já vem com esse cinza aí então a gente não vai precisar mexer na cor dele é só mesmo na questão do tamanho da

fonte então no meu text input aqui eu posso passar um Style para ele também né que vai ser Styles ponto eu vou chamar isso aqui de input né o os estilos do input tá então aqui na minha Style sheet eu vou criar aqui o input pra gente tá passando propriedad para cá como por exemplo Font size de 14 também aumentar um pouco ou vai ficar do mesmo tamanho 16 isso 16 né ficou um tamanho um pouco melhor aí E além disso vamos ver aqui no XD pra gente dar ter uma noção melhor Além disso se

a gente dar uma olhada mais a fundo aqui ó ele ele tem ele tem uma borda né no nos nas opções então a gente pode colocar a gente pode colocar essa borda também tá então no vamos fazer input aqui né já que a gente já tá nele no input eu vou passar aqui um border color eu vou passar aqui por enquanto vermelho para destacar mais né e o border wiit de um e olha lá a borda já apareceu Ele deu uma bugada no visual né nesses que ol lá voltou voltou deu um bugzinho no visual

aí mas enfim nós temos a borda ali eh essa borda ela tem um raio né Deixa eu olhar aqui esse raio dessa borda é de quantos pixis quatro pixis né então vamos voltar aqui no vs code border wid border radius de quatro pixels ele vai arredondar ali né Eh o que mais que a gente pode fazer a gente pode dar um espaçamento né porque o texto em si ó quando eu comecei a digitar ele já digitou grudado na borda né e sente olha aqui no XD tem um espaçamento tá então eu posso passar aqui por

exemplo um padding de sei lá C Pixel ã é cinco pixis ficou bom ou mais não vamos vamos deixar assim né Eh E com isso na verdade a gente pode fazer o seguinte E esse espaamento na horizontal ficou pouco na vertical ficou bom mas na horizontal não então eu posso passar um pading horizontal de 10 e um pading vertical de 5 isso agora sim ficou melhor beleza Tudo tranquilo então vamos prosseguir na verdade aqui é a cor né a cor da borda vamos olhar ali no nosso arquivo de tema e e vamos criar aqui na

verdade a gente tem que criar na interface né a interface que descreve o nosso tema então eu vou criar aqui um border color que é uma string né então se eu volto aqui no meu objeto de tema Light Ele já tá dando erro porque tá faltando a propriedade border color né é uma forma de usar o typescript para me forçar a criar objetos em uma certa estrutura a cor dessa borda eu vou pegar aqui no XD é essa cor aqui né esse ex decimal Então vamos voltar lá no app e colar esse cara aqui tá

border color então no arquivo de estilo eu ao invés da border color ser Red né eu vou ter aqui um te ponto border color E aí a borda vai ficar com esse baixo contraste né mas enfim é o que a gente a ideia que ela tem esse baixo contraste mesmo tá então essa essa questão que da borda tá feita né E com isso nosso formulário já tá com uma cara interessante né E só que com alguns problemas né com alguns problemas Qual que é o primeiro a borda do scroll né olha lá quando eu rolo

a a parte a página né Essa borda do scroll ela deveria est totalmente na direita né e não com esse espaamento E por que que tá com esse espaçamento né é por conta de no meu formulário né no View aqui no contêiner ou seja esse contêiner branco eu apliquei um pading nele então por conta desse pading ele empurrou também essa borda então a forma de resolver isso é tirar o pading do contêiner do desse meu contêiner n esse meu contêiner branco eu vou tirar o pading dele do formulário né e aplicar esse padding individualmente nos

nos elementos tá então ao invés de eu de eu aplicar aqui ó vamos lá esse pading de 30 aqui eu vou tirar ele tá E aí as coisas vão voltar para vão se expandir para fora né e agora no header tá no header eu vou aplicar aqui ó por exemplo um pading eh horizontal de 30 se eu faço isso olha lá ele já se ajustou né na verdade não seria nemum pading horizontal a gente pode aplicar um pading hã não nesse eu posso aplicar o padding de 30 pixels no header que lembra que a gente

pegou o header e separou um um contêiner né Tem esse esse estilo que eu t aplicando aqui é um vi então eu posso tirar esse marg b de 30 e deixar só o pading E aí ele voltou a posição que era antes tá só que agora se scroll dou scroll olha lá o a borda né tá na direita a borda aqui o indicador do scroll Beleza então apliquei aqui noer eu tenho aplicar também no meu Hum vamos voltar aqui no formulário no no caso eu teria que aplicar nos inputs tá só que aplicar isso nos

inputs não vai ficar legal porque eu meio que vou est quebrando entre aspas e esse input porque se eu for usar ele em outro lugar ele vai tá com um pading de 30 pixels um pading horizontal de 30 pixs e eu não quero fazer isso né não não faz sentido a gente fazer isso Então nesse caso aqui para resolver a gente pode fazer o seguinte eh eu tenho aqui uma scroll View né que eu coloquei lá na aula passada pra gente conseguir fazer o scroll eu vou fazer o seguinte eu vou tirar o header da

scroll View eu vou mover o header aqui para fora da scroll View certo fazendo isso e salvando agora quando eu rodo o scroll o meu header ele fica sempre posicionado tá ok eh E com isso a gente consegue fazer o seguinte eu posso aplicar agora um estilo na minha scroll viw Tá ok e se eu fizer isso vou chamar esse Style aqui de Styles pon scroll container se eu aplicar o padding nessa scroll View a minha borda a borda do scroll como é pading né interna a borda ela vai ficar no mesmo lugar ela vai

ficar na direita então aí eu consigo resolver o meu problema então vou criar aqui ó um scroll container com pading pading horizontal né de 30 se eu salvo eu tenho que salvar também esse arquivo aqui né onde Eu movi a scroll viw e olha lá a margem foi aplicada quando eu rolo scroll a borda o o indicador de scroll né tá na direita então né Problema resolvido eh E com isso aqui nós temos que fazer mais algumas coisas tá que é o quê preço preço e preço anterior se a gente olha aqui no XD para

esse preço anterior tá um ao lado do outro Opa tá um ao lado do outro tá beleza então paraa gente fazer isso aqui eu vou pegar preço e preço anterior e fazer como a gente fez no header né vou criar umio um contêiner né e colocar esses dois inputs aqui dentro tá OK Até então não vai ter Impacto visual por qu porque é só uma View né não tem nada nela e eu vou aplicar um estilo nessa View Style aqui vai ser Styles pon Eu Vou Chamar esse Style de horizontal contêiner por que que eu

vou chamar disso que vai ser um estilo que só vai deixar as coisas na horizontal né então vai ser só um Flex Direction Row e talvez um um justify content tá então aqui no meu arquivo de Styles eu vou criar aqui ó eh horizontal horizontal container Flex Direction roll se eu salvo isso aqui olha lá o preço e preço anterior já ficou um ao lado do outro eu poderia aplicar um um justify content Space between para ele deixar um espaçamento entre os dois Campos né E aí também ficou Ok beleza o que mais o que

que a gente tem que fazer aqui mais eh a descrição né Vamos deixar a descrição por enquanto para depois porque a o estoque também aqui estoque e o texto unidades disponíveis também tá um ao lado do outro tá então vamos arrumar ele aqui logo V voltar aqui no formulário eu tenho aqui né estoque e o o texto né unidades disponíveis Então vou criar aqui a view essa View tem o Style Styles horizontal container e aqui eu vou pegar o input e o texto e mover aqui para dentro certo e com isso aqui e nesse caso

aqui é um pouco diferente né porque não é só alinhar ã eu eu tenho que colocar um a lado do outro e alinhar eles na vertical vertical isso eu confundo sempre vertical com horizontal mas eu tenho que alinhar na vertical então aqui no estilo no horizontal container eu tô fazendo aqui um justify content um Flex Direction detif content E se a gente coloca aqui um align items Center ele vai alinhar ó lá o texto unidades disponíveis saiu saiu do Topo e veio aqui pro centro tá na verdade vamos ver que no XD ele nem fica

no centro né ele fica na parte inferior opa que ele fica no mesmo nível aqui ó do input né então não é nem Center aqui é Aine items Plex end né que é na parte inferior aqui a gente já começa a ter uns probleminhas de layout mas a gente consegue resolver tá porque a gente como que a gente vai resolver isso porque eu tenho que estilizar também o texto aqui unidades disponíveis na verdade vamos fazer o seguinte eu vou tirar esse Flex end vou deixar o Aline item Center pra gente aplicar esses estilos aqui em

unidades disponíveis e aqui unidades disponíveis eu vou criar um estilo para esse texto né um isso um estilo para esse texto pra gente aplicar lá um algum trocar ele né porque vou olhando lá no XD ele tá com um estilo diferente né o tamanho diferente e a cor E então texte aqui Style vai receber Styles ponto eu vou chamar isso de available units e vou criar esse estilo também aqui na minha folha de estilos tá E esse texto olhando aqui no XD ele tem tamanho 10 e a cor a cor dele é essa aqui tá

A5 A5 A5 eu acredito que é a mesma cor do terço secundário ou se não for é bem parecida Então vamos olhar aqui no tema na verdade não deixa eu só definir aqui o fonte size de 14 né porque 10 é pequeno acho que o 14 já é o que tá se aplicando né sei lá 12 10 eu não salvei o arquivo não salvei o arquivo Agora sim eh unidades disponíveis ficou muito pequeno né vamos vir aqui no estilo deixar a fonte size aqui 14 ficou Ok eh o o que a cor né vamos ver

a cor aqui deixa eu abrir aqui no arquivo de tema tema Light aqui eh a gente pode passar para ele essa cor de descrição né description que é um cinza né que é uma cor que não vai destoar muito do que a gente tem lá no XD tá então Font size e o Color vai ser team pon description E lá o texto já ficou eh acinzentado tá eh o align it a gente pode voltar aqui para Flex end só que ele vai ficar muito abaixo né então para corrigir isso aí eu vou vir no próprio

texto e aplicar uma margem inferior de pouca talvez uns C pixels para ele subir um pouco né Um pouquinho mais dessa isso pro pro pro texto subir um pouco e ficar alinhado com o input aqui de stoque Tá certo então com isso aqui formulário já tá estilizado né já tá eh um pouco mais bonito E agora se a gente volta aqui no XD nós temos o botão né o botão adicionar produto que esse botão a gente vai usar ele em outras ocasiões tá então isso aqui é o caso de a gente criar um componente também

pro nosso botão e quando eu falo de criar componente é exatamente o que a gente fez nas aulas anteriores relacionado aos inputs né que é uma componente ela tem uma estrutura interna e ela vai receber bastante parâmetros no caso do botão Por enquanto vai ele vai receber só por exemplo a cor do botão eh o texto do botão e uma função que vai ser executada quando eu clicar nesse botão tá basicamente pensando aqui por cima são essas três opções que a gente tem então vamos fazer isso tá eu vou tirar aqui o emulador por enquanto

para limpar um pouco aqui a nossa tela e a gente já pode criar a aqui em components né A questão do botão como ele é um botão que vai ser reutilizável em toda a aplicação eu vou criar em na components na pasta components né externa não é uma componente específica de uma tela e sim ela é geral no sistema então aqui em components vou criar uma pasta vou chamar isso aqui de Button Button já existe o botão do próprio react na né então eu posso chamar isso aqui de Custom Button já existe não acredito já

existe um Custom Button é é de se preocupar é de se preocupar tá eu querendo recriar uma componente mil desculpas mas se já tem pronta né Se nós já fizemos em aulas anteriores Quem Sou Eu para reclamar tá e olhando até melhor esse Custom Button Eu acredito que ele é o cara que nós estamos usando no que nós usamos né aqui no nos botões ali de filtro né da lista que a gente trabalhou com os estilos né agora eu tô lembrando sim e mil desculpas tá pessoal é mas enfim já que já tá pronto né

Vamos usar a vantagem da componente é essa então eu vou mencionar aqui né Custom Button ele recebe algumas propriedades né a obrigatória é o título né então title aqui vai ser adicionar produto Vou salvar o o ele vai aparecer ali o texto né e eu lembro que essa componente ela é extremamente extensível então eu eu posso passar para ela o estilo que eu quero do contêiner e o estilo que eu quero do texto que está dentro então a gente vai conseguir personalizar tudo aqui e no onepress eu já vou passar aqui ó no meu botão

aqui de baixo esse rendle submit eu vou apagar esse botão de baixo e pra gente conseguir né agora o botão azul lá do do react saiu agora nós temos aqui só o Custom Button tá então para ele eu vou dar um enter aqui para quebrar essa linha e ficar mais fácil de editar ele vai ter um título vai ter um aqui vai ter um container Style e vai ter também um text Style Tá certo então o coner Style desse botão vai ser o qu né Vamos passar o estilo aqui em linha tá Depois a gente

move lá pro arquivo de estilo o contêiner eu vou fazer aqui o seguinte vou fazer um pading de 10 pi e o background color a cor de fundo né background color vai ser team o nosso tema pon primary né porque esse esse botão ele é o o botão roxo né e tá dando erro porque o texto está aqui tá vazio eu vou passar aqui um objeto o texto agora é o texto do de dentro do botão né O texto eu vou passar só um color a cor dele vai ser branco então vou escrever aqui White

E aí agora voltou né E olha lá nós temos o botão tá com o texto adicionar produto e esse botão ele tá com a cor de fundo né do mesmo jeito que a gente definiu então perfeito né Muito bom eh aqui agora é só os detalhes né que é o quê a borda né o o contêiner ele tem uma borda a borda de quantos pixis 10 pixis né o raio da borda e o texto ele é do tamanho 12 hum semibold né que é um meio que Branco Tá então vamos fazer isso Branco ele já

tá né vamos voltar aqui eh o border radius né do do contêiner aqui são 10 pixis né para ele arredondar as bordas aqui do botão o que mais eh o texto em si né Ele é branco o texto do botão é branco com o o Font weight né Font weight é bold né Beleza agora a gente tem um probleminha aqui que é o tamanho desse contêiner né o contêiner ele está se esticando ele tá ocupando Todo o espaço vazio mas eu posso passar aqui uma largura para ele o edit e essa largura Eu posso passar

por exemplo 50% e fazendo dessa forma só colocar as aspas aqui Opa ué isso 50% eh a largura do o tipo o botão ele vai ocupar 50% do espaço aqui da da do espaço em branco né então eu posso passar por exemplo 70 ele já ficou um pouco melhor só que a gente tem que fazer isso de uma forma um pouco diferente tá que é basicamente o quê eh o nosso botão ele vai ser da largura do texto que está dentro dele né então meio que eu não vou ter que me preocupar é basicamente falar

pro pro indicar né para este contêiner para ele não ocupar Todo o espaço vazio tá e como que eu faço isso Nossa mil desculpas rapaziada e a webcam tava na frente do botão perdão perdão pelo erro mas enfim é eu acho que não não Vocês não perderam tanto assim só ficaram com um pouquinho de ódio de mim mas tudo bem eu não tinha visto Ahã mas beleza vamos lá vamos voltar aqui né é esse esse contêiner roxo Ele Está ocupando ele tá esticando ocupando Todo o espaço só que eu tenho que indicar para ele passar

alguma propriedade para que ele entenda que ele não precisa ocupar Todo o espaço né porque como eu falei no início lá no início do curso as componentes em si aqui no react Native Elas têm o comportamento de serem flexíveis já por padrão né então basicamente meio que diferente do Web né aqui já no react basicamente tudo tá com Flex um Então tá tudo sempre se esticando e tentando ocupar se ajustar ali no espaço em branco e nesse caso aqui nesse contêiner do botão tem uma propriedade aqui interessante que é o align self Ou seja é

uma propriedade que diz pro contêiner em si ou seja esse container Style se a gente volta ali ou se a gente entra dentro do botão né container Style tá aplicando no tob P em si que que é o botão né então esse align self vai falar pro botão em si como que como que ele vai se alinhar né onde ele vai se alinhar Então se a gente ver as opções nós temos por exemplo e Flex start tá se eu passo esse salvo o o botão em si ele vai se alinhar no início do Flex né

do coner flexível que nesse caso ele se inicia na esquerda tá então se eu passo aqui esse Aline selfie ao invés de Flex Start eu passo Center o botão vai se alinhar ao centro e vai eh obedecer Tipo ele não vai se esticar né ele vai se alinhar ao centro e vai parar de esticar porque não não tem mais essa essa propriedade quando eu defini que essa L self né ele meio que passa a respeitar o esse alinhamento e ele respeita o conteúdo deste contêiner né como o conteúdo é esse meu texto Então o botão

vai ficar da largura do texto né esse espaçamento que tá tendo aqui é por causa desse pading que eu dei tá beleza então dessa forma aqui eh nós já temos um botão né o botão tá estilizado já se alinhou ao centro agora se eu venho aqui no exd para dar uma olhada é só dar um espaçamento nele né ao topo aqui Opa Dea voltar então no botão eu vou fazer aqui um margem top de sei lá 20 pixels para ele se distanciar um pouco do final do formulário e outra coisa né o formulário em si

ou seja o input né o text input porque o select ele já tá com espaçamento bom mas se eu venho aqui no input text eh ele está todo em volta de uma View né então eu posso aplicar um estilo nessa View para aplicar uma margem inferior para mim espaçar um pouco esses inputs um do outro né tá muito grudado um no outro então o o essa View aqui do meu input text eu vou passar um Style para ela vou dar aqui um Styles piner né é o contêiner aqui do meu input eu vou criar ele

aqui no início né eu vou passar aqui nele um marg borom de sei lá 5 piis só para dar uma distanciada né de entre entre cada linha aqui entre cada input talvez 10 10 acho que fica muito não ficou bom Beleza então com isso aqui deu esse deu esse espaçamento agora o o botão em si né que ele não tá com espaçamento nenhum em referente ao formulário Então vamos vir aqui no botão que seria aqui no formulário aqui né no container Style ao invés de Margem top eu vou passar um margem vertical para aplicar essa

margem em cima e embaixo né E aí eu consigo rolar todo o formulário para baixo e existe né esse espaçamento aqui entre o botão e o final do formulário Beleza então com isso aqui agora é só mover esses estilos aqui desse meu botão pro arquivo de Styles e nós estamos Fin tá então chamar aqui um de Button coner o estilo né pro contêiner do botão e Button text eu vou precisar de uma vírgula ali e agora eu só vou mover o estilo né esse cara aqui do contêiner eu vou colar aqui em buton contêiner e

o estilo aqui do texto eu vou colar aqui em Button Text e agora é só mencionar né container Style Vai ser Styles P Button container e o text Style Vai ser Styles Button text salvando aqui o estilo não foi porque eu não salvei salvei aqui no arquivo de Styles salvando Olha lá botão estilizado da mesma forma que estava antes Beleza então para essa aula é isso tá nós vamos ficar por aqui e conseguimos né estilizar aqui tudo ficou bem parecido com XD Ficou bem legal gostei bastante aqui desse resultado e nas próximas aulas a gente

vai prosseguir aí com a funcionalidade do formulário com a comunicação com o backend né a busca de dados enfim a gente vai trabalhar com a listagem ainda desses dados então tem bastante coisa aí pra gente tá explorando bastante pra gente est ir descobrindo Tá certo então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]