Au 07 - Mobile - React Native - Criando modal - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos trabalhar um pouco aqui com modis tá na verdade a gente vai criar uma modal aqui pro sistema né e eu tava pensando em prosseguir ali no que a gente estava estilizando o subheader e já criar a parte da lista só que a gente ia focar bastante em visual E aí eu decidi fazer aa parte de modal agora que a gente vai criar os nossos formulários e depois a gente volta eh naquela na parte ali da lista vazia pra gente começar a trabalhar com a lista

depois que o formulário estiver pronto tá beleza então se a gente vem aqui ó no nosso na verdade vamos olhar aqui no XD né No que a gente tem planejado eh nós fizemos na aula passada né essa parte aqui do mudar isso nós fizemos essa parte superior aqui né do o subheader da aplicação tava pensando nessa aula fazer isso aqui né esse indicador de lista vazia né só que para não ficar tanto preso nessa parte de de estilo Agora vamos pular um passo aqui vamos criar a parte dos formulários né Vamos trabalhar com formulário pensar

no no fluxo do formulário como que ele funciona E aí uma vez que nós tivemos o formulário pronto a gente volta para criar essa componente para criar o botão novo produto né que é o botão que a gente vai clicar para abrir o formulário E aí uma vez que o formulário é tá aberto aí a gente linca tudo e faz a funcionalidade né que é realmente criar um produto né e depois a gente prossegue aí com a estilização da listagem né que seria essa lista aqui tá certo então pensando aqui no modal né o modal

o o modal não no formulário né esse formulário ele tá dentro de um modal tá e o que que é esse modal é basicamente essa o que que é um modal na verdade né ele é uma componente né no no aqui no no mundo react ele vai ser algo uma componente que tem alguma coisa dentro e a ideia do modal é que ele vai sobrepor o que está embaixo né então por exemplo na nossa tela aqui de de produtos se eu abro um modal aqui o modal vai ficar por cima do da da tela de

produtos né ele vai sobrepor e dentro desse modal vai ter um componente um algo visual né então o modal é a ideia dele é ficar por cima para direcionar totalmente o foco para aquela componente que a gente tá trabalhando Então esses formulários eles estão dentro de modais né Eh a gente tem essa modal que tá com esse fundo cinza né que é um preto com opacidade e a componente que tá dentro do modal é o formulário então nessa aula aqui a gente vai tá criando o modal a gente vai pensar ali na lógica dele como

que ele funciona e criar ele de uma forma eh reutilizável né na aplicação E aí nas próximas aulas a gente vem pensando no formulário Tá beleza então vamos aqui pro código tá porque no código vou fazer o seguinte eu vou fazer aqui uma demonstração do modal tá do usos do modal E aí depois a gente refat pegando essa demonstração e criando uma componente tá vamos fazer assim para dar uma variada aí no nas formma que a gente tá fazendo as coisas eh se a gente vem aqui na no Google pesquisa aqui por react Native Model

a gente vai encontrar a documentação do próprio react Native falando sobre modal tá então o próprio react Native já tem de forma Nativa uma componente modal paraa gente trabalhar e e tá fazendo a criação né dessas modais Então aqui tem toda documentação tem exemplos vai ter eh a referência aqui da da a documentação né quais os atributos ela recebe o que que cada atributo faz tem atributo específico para iOS atributo específico para Android né que tem as tags aqui então tem bastante coisa aqui e na documentação mas a gente vai fazer eh bem mais manual

aqui né então vou fazer o seguinte né Eu já vou usar aqui ó modal e ele já o vs code já me sugere aqui para importar do próprio react Native né a modal e uma vez com essa modal aqui se eu salvar vamos ver aqui no nosso app ficou tudo branco tá então a modal ela foi renderizada ela já ocupou Todo o espaço da tela tá por cima da tela né só que ela tá toda branca e vamos fazer o seguinte então vamos colocar uma View aqui dentro e dentro da View vou colocar um texto

esse texto que eu vou editar Hello from modal e salvar e olha lá o nosso texto Hello from modal Então já a modal já tá aí né Eu já tenho um ela já tá ocupando espaço já tá no topo de tudo né E a gente vai ter que mexer com ela aqui para meio que estilizar n mas explorar mais as funcionalidades dela então aqui dentro da modal eu vou fazer o seguinte a gente ter essa vi né eu vou passar uns estilos aqui e o estilo eu vou passar em linha também tá porque depois a

gente vai refaturar então a modal tem essa vi dentro que tem um texto o estilo dessa viu eu vou passar um background color eh vermelho e olha lá ficou uma listrinha vermelha né que é realmente a view né então a view que eu coloquei aqui dentro ela tá ocupando só essa listrinha vermelha né todo esse outro espaço em branco é a modal que tô ocupando só que não tem nada né E se a gente explora aqui a modal em si se a gente olha as opções que ela tem aqui ele vai me sugerir muita coisa

né vamos ver L na documentação aqui na documentação Eu tenho algumas opções que eh se ela é animada ou não né o o tipo de animação Animation Type tem alguns tipos a gente vai tá explorando eles aí eh logo logo e o que o que nos interessa aqui agora é essa propriedade transparent que é um boleano é visible também né que vai definir se a modal está visível ou não e nós temos aqui também vamos Vamos explorar melhor só essas duas tá vamos vir aqui no nosso código eu vou vir aqui no abrir o meu

emulador né e eu vou falar que essa modal aqui ó ela é transparent esse trans eu posso fazer transparent é igual a true né ou então eu só posso escrever transparente aqui que ela funciona e olha lá eu já consigo ver né o a minha aplicação o que estava por baixo daquela parte e daquilo daquilo em branco né que estava sendo exibido aqui então a gente tem essa parte aqui do transparente eu ten outra coisa aqui também que é bem interessante que é o visb né esse visible o que que o que que é isso

é que ele que vai controlar se a modal está visível ou não então se eu passo o visible true né que é o que já vem pro padrão a modal tá sendo exibida se eu passo o visible false sumiu né Sumiu lá a parte superior ali a o a view vermelha né com o texto Hello dentro então esse visível também visible né a gente vai fazer o uso dele para controlar quando exibir ou não a modal e a gente tem aqui também por exemplo o Animation Type né O que que é isso que que é

esse tipo esse tipo de animação eh quando eu dar um visible true que eu for mostrar a modal ou quando eu fazer um visible fals que eu for tirar ela da tela eu consigo animar is deixar dar uma animação né então eu posso falar por exemplo slide se eu sal isso aqui e coloco o visible true Opa visible true Olha lá deu para ver uma animação né Ele veio de baixo para cima né E essa essa View vermelha eh vou fazer de novo colocar aqui um falso e salvar Olha Ela desceu né animado então tem

a animação slide eu ten animação Fade né que são as duas mais interessante eu vou colocar aqui true e vai ter essa animação de Fade né de é tipo um Gradiente né ele começa com a opacidade zero e vai até 100 né aumentando ali a opacidade então tem esse Animation Type que é interessante também que a gente a gente pode deixar aqui O slide o que mais a gente tem também o status bar aqui ó status bar translucent O que é isso deixa eu salvar status bar translucent é meio que eu vou ignorar a status

bar quando a minha modal estiver visível né isso aqui é um bolean também tá se eu tiro ele agora o a viio vermelha né ela respeita a nossa barra de status do do Android né do dispositivo se eu passo opa se eu passo isso aqui o status B true ele vai ignorar essa minha status bar mas mas isso aqui ele é essa opção né status bar translucent ela é específica do Android tá então no iOS isso aqui não vai funcionar Então eu vou deixar sem tá deixa status bará só que eh o que eu quero

o que o que a gente vai fazer aqui agora né o que eu quero explorar aqui agora nessa componente é a questão do fundo fazer aquele fundo cinza né o fundo é fundo cinza vai preto com com opacidade que seria é seria essa View que eu tô colocando background color vermelha ela seria o Na verdade o preto né então aqui eu colocaria o rgba rgba eu posso definir cores né passando RGB 0 0 0 que é o preto né e eu posso ter também o rgba que eu posso passar um quarto valor aqui que é

opacidade então sei lá 0.5 e olha lá o tava Preto né a status bar e ela ficou transparente eu vou fazer o seguinte ó eu tô passando o background color vou fazer um Flex um aqui passar aqui um Flex um Lembrando que o Flex um né Eu já falei emem aulas passadas aí mas a questão do contêiner flexível né quando eu passo um Flex um e ele não tem nenhum irmão flexível né o a Vi a nossa View aqui não tem nenhum irmão que também é um contêiner flexível esse Flex um aqui ele vai ocupar

Todo o espaço vazio Todo o espaço em branco então quando eu passo Flex um aqui só tem essa View aqui nesse nível ela vai ocupar Todo o espaço tá então agora ó RGB é eu vou passar o RGB né 00 ele vai ficar preto totalmente né e com o rgba a gente consegue definir a opacidade esse meu texto eu vou passar um Style para ele também que eu vou passar a cor dele Branca a gente conseguir ver ele melhor ali tá então o que mais de estilo que eu vou aplicar aqui nesse meu View né

esse View que tá com esse fundo cinza eu vou alinhar né porque a um padrão que a gente sempre tem nos modais é que depende né Vai depender do estilo do modal Nesse estilo desse modal que a gente tem aqui no XD todo o conteúdo que tá dentro dele vai ser alinhado horizontalmente e verticalmente Então vai tá sempre no centro né do modal todo conteúdo que eu passar para ele tem aquele outro estilo de modal que ele ele é um modal inferior que ele começa sempre debaixo né como se fosse uma nova aba que abre

por cima e aquele mod n el não necessariamente tudo o conteúdo dele vai est Centralizado vai Centralizado horizontalmente e verticalmente nesse aqui Sim então vamos vir aqui no passei Flex background color vou fazer aqui também um justify content né justify content Center ou seja ele vai alinhar na vertical tá e eu vou passar aqui agora um align items Center e ele vai se alinhar esse texto na horizontal Tá certo então a ideia da componente modal é essa tá e uma componente que vai est por cima que a gente vai controlar quando ela tá visível ou

não com o fundo cinza preto com opacidade e algum conteúdo dentro né aqui eu tenho esse text né que é um Hello from modal mas a gente vai alterar isso para deixar dear isso dinâmico Tá certo então vamos fazer o seguinte vamos pensar agora na componentização que é o quê é eu pegar esse essa modal que eu fiz agora e criar um componente para ela né para facilitar aqui pra gente usar então aqui dentro de src né Nós temos aqui a pasta components eu vou criar aqui uma nova pasta eu vou chamar isso aqui de

Custom modal tá eu não vou chamar de modal Porque nós já temos a modal aqui do próprio react Nate né para não confundir os nomes Então vou criar aqui um Custom modal aqui dentro vou criar o index tsx né const Custom modal é uma função essa função retorna um viw um viw do react Native e no final dou Export default Custom modal dentro dessa View eu vou colocar aqui um text Hello from Custom modal e a gente tem que importar o text né react E além disso né criar também Styles e o Styles n v

fazer o seguinte vamos copiar e colar aqui o pra gente não perder tanto tempo aqui n a gente poar snippet né eu mostrei nas aulas passadas a questão dos snippets a gente pode criar um snippet que já cria esse default aqui pra gente né mas enfim eu não vou est fazendo isso agora e Mas vamos lá no Custom modal criar componente criei o Styles o que que eu vou fazer aqui agora aqui em produtos eu vou comentar esse modal que acabei de criar tá ele vai sumir aqui da tela e eu vou importar aqui o

meu Custom modal e importar ele né da minha da pasta component ali que eu criei aqui né component Custom modal se eu salvo apareceu ali ó hello from Custom modal apareceu abaixo do meu subheader né que faz todo sentido já que ele tá embaixo e aqui dentro C modal só com texto então se eu copiar esse modal que eu comentei cortar né e vir aqui no meu Custom modal vou colar ele vou descomentar né aqui eu tô comentando várias vezes tiar aqui e aqui e agora eu tenho que importar o modal né do react n

se eu Salv isso aqui olha lá o modal apareceu de novo né vou salvar aqui a a tela de produtos também que eu tinha recortado né E ó lá o modar apareceu de novo do mesmo jeito que era antes só que esse modal tem alguns detalhes nele né que é o quê na verdade esse modal vai receber algumas propriedades tá E uma delas é um Children né e o que que é esse Children vamos fazer o seguinte ao invés de eu chamar de eu invocar essa minha componente custa modal dessa forma com self Close né

eu vou chamar ela as duas tags né uma tag abrindo e uma tag fechando e aqui dentro eu vou passar uma tag Text e vou escrever aqui dentro né Hello from f Ou seja quando eu faço isso dessa forma esse meu texto que eu defini aqui essa tag text ela vai ser enviada como propriedade desse meu Custom modal e ela vai chegar lá dentro da propriedade chamada Children tá que é um componente né esse texto aqui ele é um elemento pode ser um elemento um componente enfim que é filha do modal né o o Custom

modal seria componente pai e esse text vai ser uma um elemento filho né então o react ele já entende quando a gente passa dessa forma e envia né então dentro de curom modal se eu acessar aqui a propriedade children esse tiren aqui desse com esse nome com esse exato nome aqui vai ser um elemento text que eu enviei tá então aqui eu ó se eu se eu remover o tentro daqui a gente vê que curto modal que tá com erro e ele fala ó deixa eu tirar aqui O emulador e o próprio typescript né já

reconhece falando que a a componente né Custom modal ela não tem o tipo né não não existe a tipagem que falando que ela vai receber uma Children que é do tipo Element esse tipo Element aqui é por causa do meu text né esse text aqui ele é um elemento né um elemento jsx então o próprio typescript ele já percebe que não tem essa tipagem e já dá erro e isso aqui já vai me forçar né a a criar essa tipagem então aqui no meu Custom modal né eu vou criar essa tipagem eu tenho que criar

essa interface né que vai falar que eu vou receber esse essa Children então eu posso criar aqui né em cima do do da função né da componente Custom modalar aqui a interface pros né as propriedades do meu do meu Custom modal aqui dentro vai ter um Children e esse Children né o tipo dele é um jsx P Element Beleza então com isso aqui eu falo que a a componente C C modal vai receber aqui tá obrigatório né então toda vez que eu for usar o custo modal eu tenho que passar um Tier né alguma coisa

para ser exibida dentro desse modal que é um elemento jsx então aqui Custom modal vai receber um objeto do tipo props e eu sei que aqui dentro Eu tenho um Children tá então com isso aqui dessa forma com isso aqui que a gente fez a gente já tá tendo a tipagem né eu já tô usando react para enviar o Children e já falei pro typescript que essas minhas essa minha componente custa modal vai receber esse Children tá então aqui ao invés do text aqui ser um Hello from modal eu vou renderizar aqui que tá dentro

da minha View né a view com background preto cinza então aqui dentro ao invés de eu renderizar o texto eu vou renderizar aqui a gente coloca Chaves né para mencionar alguma coisa do JavaScript dentro aqui do retorno da componente né do do jsx do tsx né eu vou colocar aqui dentro a variável tien né que eu tô recebendo que via parâmetro da função Custom modal então salvando isso aqui e se a gente vem aqui no nosso emulador agora a gente tem um texto ali ó hello from Children o texto tá preto né porque ele não

tá com estilo aqui então se eu passar aqui um Style para ele a cor dele vai ser White é branco Olha lá Hello from Children então recebendo um elemento enviando para outra componente e renderizando dentro dessa componente tá então isso é uma forma uma ferramenta muito poderosa pra gente tá usando tá de essa essa possibilidade de passar ti passar elementos filhos para outras componentes e e renderizando manipulando de alguma forma essa essa componente que eu tô recebendo para mostrar ela exibir ela pro usuário de outra forma Tá certo então com isso aqui dessa forma eu

já tenho uma componente Custom modal que recebe qualquer tipo de coisa e renderiza dentro dela então se aqui dentro ao invés do text eu tenho por exemplo uma View dentro dessa View eu tenho o meu Text e a minha View tem por exemplo Style ela vai ter uma altura altura aqui de 200 pixs e o background color vai ser vermelho se eu salso aqui olha lá a minha View foi renderizada dentro do meu modal então só simplificando aqui dentro do modal né agora o que eu tenho que fazer é basicamente mover esse estilo aqui pro

meu arquivo de Styles né então eu vou copiar aqui o objeto de estilos vi aqui no meu arquivo de Styles aqui dentro do da Style sheet né eu vou ter vou ter um estilo chamado modal background que é esse estilo que eu recortei então aqui no meu curo modal essa minha vi o estilo dela vai ser Styles e eu tenho que importar do lugar certo né do arquivo que tá ao lado Styles P modal background E com isso aqui tudo se mantém né Não é para ter diferença nenhuma e dessa forma eu tenho uma componente

né Custom modal que eu vou utilizar para renderizar dentro dela o formulário tá esse formulário aqui que nós temos no XD Tá certo então para essa aula é isso tá vamos parar por aqui eh na próxima aula a gente já começa a pensar aí no formulário nos tipos dos Campos no fluxo dos dados enfim a gente vai pensar isso aí eh futuramente na próxima aula 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]