CRIANDO UM APP DO ZERO que acessa os contatos do dispositivo com React Native

O que eu vou mostrar para você nesse vídeo pode te despertar uma ideia de algum aplicativo de algum projeto que você pode desenvolver utilizando o que eu vou te mostrar aqui por isso fica comigo até o final e se você ainda não é inscrito se inscreve para você receber notificação de novos conteúdos Combinado então deixa eu mostrar para você aqui te dar um spoiler do que a gente vai ver juntos aqui na prática e pass e e também No passo a passo Claro juntos hoje tá bom esse daqui é o projeto que a gente vai

desenvolver talvez você esteja olhando assim poxa só isso Calma calma que você vai ver o tanto de coisas que a gente vai ver juntos aqui tá o que que esse App tá fazendo esse App ele tá buscando os dados dos contatos que estão armazenados no próprio dispositivo do usuário então se você vier aqui na parte de contatos ó esses contatos estão cadastrados aqui e eu vou mostrar para Você como que você pode recuperar as informações dos contatos salvos no próprio dispositivo do usuário e como levar essas informações de contatos para dentro da sua aplicação como

recuperar a imagem como pegar o nome o número do telefone por exemplo se eu clico aqui no Antônio Olha só abre aqui o número do telefone dele Claro coloquei aqui dados hipotéticos tá tudo de exemplo inclusive as imagens também são todas elas de exemplo tudo hipótese Tá tem nenhum dado aqui verdadeiro clico aqui em fechar fecha também vou mostrar para você como lidar então com olha só essa parte aqui da nossa aplicação que tem essa interação com gestos inclusive se eu arrasto ela aqui também fecha vou mostrar para você como lidar com aquela parte ali

também tá fazendo ali um bottom sheet O legal é aqui é que a gente também vai recriar essas sessões e Quando um usuário não tem uma imagem vai pegar a primeira letra do nome dele aqui Inclusive aqui a gente consegue pesquisar se eu coloco aqui a n Olha só fica só Ana e Antônio seu coloco aqui por exemplo F fica Fábio e Fátima e se eu pesquiso por Fábio só fica o Fábio se eu clico aqui no xizinho limpa e aí volta a aparecer todo mundo enfim tem muita coisa legal que eu vou mostrar para

você passo a passo e na prática aqui desenvolvendo essa aplicação Então bora muito bem vamos começar criando o projeto eu já até deixei aqui o emulador Aberto pra gente ganhar um pouquinho de tempo vou usar o emulador do Android tá E aqui também eu já deixei o meu terminal aberto vamos criar aqui um projeto com npx Create Expo app E aí eu vou passar Flag de template porque dando enter vai aparecer aqui as opções para criar um novo projeto react Native com o Expo eu vou escolher aqui um projeto em branco já com typescript vou

dar enter e aqui vamos chamar de contacts tá aqui pro nosso pro nosso projeto inclusive Vou chamar de contact app tá Tá bom vou dar enter e vamos esperar agora terminar aqui de criar o projeto maravilha agora que o projeto já tá criado eu vou abrir esse projeto no vs code Tá bom então eu vou aqui acessar a pasta do projeto e agora eu vou abrir aqui no vs code e agora como eu vou usar o terminal aqui integrado do próprio vs code para executar o nosso projeto fazer a instalação dos pacotes então eu posso

Fechar esse terminal tá bom Por enquanto eu vou ah aqui fazer já uma organização no nosso projeto de início e aí daqui a pouco a gente já instala os pacotes que a gente vai utilizar Tá então vamos criar uma pasta src dentro dessa pasta src eu vou criar uma nova pasta que eu vou chamar de app dentro dessa pasta app aqui a gente vai colocar as nossas interfaces tá bom E aqui eu vou criar dentro aqui da nossa pasta vamos chamar Aqui uma nova pasta de home e aqui dentro a gente pode criar um index

p tsx a gente vai utilizar ele paraa estrutura do nosso componente e a gente vai ter um styles.ts tá bom Começando aqui pela estilização eu vou importar vou ocultar aqui do lado tá só pra gente ganhar espaço eu uso o atalho control B para ocultar ali a aqui a nossa o nosso Explorer tá do vest code e aqui vamos importar então do react Native eu vou utilizar aqui o Próprio Style sheet para poder cuidar da estilização tá aqui eu vou exportar uma constante chamada Styles e aqui a gente pode utilizar o stylesheet p Create para

poder então criar aqui o nosso contêiner que eu vou colocar por enquanto aqui um Flex de um pra gente poder utilizar agora aqui no nosso index P test x vamos importar aqui uma View também vou importar um texto eu vou importar aqui do próprio react Native Pronto agora que a gente pode Exportar a função que é o nosso componente home e aqui a gente sempre respeita a regrinha de utilizar primeira letra maiúscula na exportação do nome do componente e sempre o componente tem um retorno e dentro desse retorno a gente vai retornar o conteúdo que

a gente quer renderizar em tela então componente nada mais é do que uma função e no retorno a gente tem aquilo que deve ser renderizado em tela Então vou pedir para renderizar uma View e um texto com um ã Um teste por exemplo tá E aqui ó a gente pode também já fazer a importação do nosso Styles aqui de ponto bar Styles porque ele tá aqui na mesma na mesma raiz aqui da nossa pasta home então tanto o index quanto o Styles estão no mesmo nível né dentro ali da pasta então a gente coloca pode

colocar ponto barra E aí já vai aparecer o arquivo e aqui agora a gente pode passar pra propriedade de Style da View a gente passa Style ponto e por enquanto só tem O contêiner lá vou salvar e pronto tá agora vamos voltar aqui pro nosso app. test x e nesse app. test x que é o arquivo aqui de entrada da nossa aplicação eu vou remover todo toda essa parte de utilização também vou remover aqui ó ah esse texto vou remover também aqui toda essa parte aqui na verdade e vamos só trocar aqui pela nossa home

ó e aí eu vou dar um enter aqui e toda essa outra parte Aqui a gente pode remover então vai ficar bem mais simples esse nosso componente uma coisa que eu gosto de utilizar é as importações relativas ao invés de ficar navegando em muitos níveis na na nossa estrutura de passas e arquivos tá a gente pode fazer o seguinte aqui no nosso tsconfig.js a gente pode adicionar aqui ó a propriedade de pefs e aqui a gente pode adicionar um novo pef eu vou colocar @ bar asterisco então toda vez que eu Colocar @ barra ele

vai mostrar para mim todas as pastas que eu tenho disponíveis agora eu posso dizer para ele dentro de que lugar eu vou pegar isso como referência então aqui a gente coloca um Array porque a gente pode configurar vários pafs e aqui eu vou colocar ó ponto barra src barra e asterisco para ele mostrar tudo que que tem lá dentro tá agora voltando aqui pro nosso app.tsx a gente pode simplesmente trocar tudo isso por @ barra tá vendo que por Enquanto ele tá mostrando a pasta app é a única que a gente tem ali mas por

exemplo ó se eu vi aqui e criar uma pasta nova dentro de src chamada components que é uma pasta que a gente vai utilizar daqui a pouco por exemplo e é muito comum em um projeto react Native a gente ter essa pasta para criar os componentes que a gente quer reaproveitar ao longo da nossa aplicação então agora se eu olha aqui ó olha só @ Barra tem app e tem compon no nosso caso É app barh e aqui eu não preciso colocar barra index né porque como o arquivo aqui que tem a estrutura da nossa

interface tem o nome de index Então por padrão ele já vai carregar esse arquivo tá então isso é muito comum eh esse padrão de Sempre buscar como arquivo default ou padrão para ser carregado o arquivo que tem o nome de índex quando você não menciona o arquivo que tem que ser Car pegado dentro daquela pasta tá bom bom vamos fazer aqui a execução Agora com npx Expo a start ou você pode também executar com npm Start tá a depender aí do que você desejar porque se você olhar aqui no próprio package P json você vai

ver que tem um script de start que é o Expo start por detrás dos panos tá então aqui deixa eu utar aqui do lado pra gente ganhar um pouco mais de espaço eu vou diminuir um pouco o zoom porque tá bem grande aqui para mim letra a porque eu vou abrir aqui no emulador do Android e a nossa Expectativa é que apareça aquela mensagem aquele texto de teste né Posso até fechar o app Test config.js e e posso deixar só o index da home e o Styles da home uma outra dica do vs code tá

de produtividade detalhes que podem te ajudar bastante no seu dia a dia que é o seguinte tá vendo aqui ó nome do arquivo e na frente a pasta então index.tsx da pasta home Styles cont TS da pasta home Então isso é detalhe Mas ajuda bastante na legibilidade aí do que Você tá fazendo o texto tá bem lá no cantinho a gente pode centralizar ele aqui com justify content Center só para poder visualizar que ele tá aqui ó tá vendo ó mas eu vou remover isso daqui foi só mesmo para testar que a nossa aplicação tá

renderizando E tá executando certinho inclusive voltando aqui pra home eu vou tirar o texto porque a gente não vai usar esse texto Por enquanto só foi um teste mesmo tá vamos parar aqui de Executar a nossa Aplicação pra gente poder fazer a instalação dos pacotes que a gente vai utilizar para desenvolver esse App aqui tá então cont control c aqui no terminal ele vai interromper a execução aqui do Servidor que é quem leva Nossa aplicação ali pro dispositivo né Posso até fechar tudo aqui eu prefiro ó aqui quando eu clico nesse botão ele mostra todas

as janelas assim como é no dispositivo mesmo então eu posso clicar no clear que ele já Fecha todas as janelas De uma vez o que que a gente vai usar aqui nesse projeto tá a gente vai utilizar aqui o Expo contacts para poder acessar os contatos no dispositivo do usuário Então vamos fazer essa instalação então npx Expo install Expo contact tá então a gente vai fazer a instalação dele aqui vamos esperar ele terminar de instalar pronto instalação concluída então a gente fez a instalação aqui do Expo contents outro também que a gente Vai utilizar aqui

vai ser Ah o react Native botton eu vou até abrir uma nova aba E aí você já vai ver porquê react Native Bottom sheet a gente vai utilizar essa biblioteca aqui para poder ah fazer aqui ó deixa eu clicar nesse link porque aí ele leva pro site da documentação tá vendo ó react Native Bottom sheet a gente vai utilizar ele vai ser bem legal porque quando o usuário clicar em um contato a gente vai fazer aparecer ele na parte de baixo do App então ele vai subir e aí a gente pode usar o gesto para

poder fechar recolher de novo e essa janelinha inclusive como a gente vai lidar com gestos a gente precisa fazer a instalação aqui ó do npx com a fazer a instalação com npx Expo Install e aqui a gente vai fazer a instalação do react Native reanimated e também do re Native gest render o reanimated e por isso que eu não fechei aqui o Expo né Você pode encontrar aqui também ó o Reanimated aqui dentro da própria documentação do Expo tá a gente vai utilizar ele por essa esse movimento aqui de subir e de recolher aqui utiliza

a animação para você v ele subindo e descendo de forma suave e tudo mais e o próprio react gest render é para poder lidar com o gesto de arrastar para baixo de arrastar para cima e assim por diante tá então você encontra o rated também dentro da própria documentação do Expo tal como o gle render também você vai Encontrar aqui tá deixa eu te mostrar ele aqui eu cliquei no lugar errado gest handler aqui olha só tá então aqui ó em vez de fazer a instalação separado eu já tô fazendo a instalação numa pancada só

do handm e do gly Render Vamos dar um enter aqui agora vamos só esperar ele terminar aqui de fazer a instalação Maravilha Instalação feita e agora a gente vai fazer a instalação só do Bottom sheet então copio aqui ó aqui eu posso fazer instalação com npm install Ou npm I que é abreviação de npm Install e aí a gente vai fazer @ gorham acho que é assim que pronuncia barra botom sheet E aí ele ele recomenda fazer aqui a instalação D dessa versão então ou superior né Vamos fazer aqui a a instalação beleza posso limpar

o terminal temos tudo o que precisamos pra gente poder trabalhar no desenvolvimento da nossa aplicação Tá mas ainda falta mais uma coisinha que acabei de lembrar vamos Fazer a instalação também do Expo fontes e a gente pode fazer a instalação também de Expo Google Fontes bar Ubunto para que que serve esses pacotes o Expo fonte é pra gente poder carregar Fontes externas na nossa aplicação e usar Fontes customizadas no nosso projeto e o Expo Google Fontes permite que a gente possa utilizar Fontes que estão disponíveis ah na CDN de fontes da da própria Google se

você procurar por Google Fontes tem uma pancada aqui ó de Fontes que você pode utilizar inclusive você pode pesquisar aqui pela fonte você pode por exemplo digitar aqui alguma coisa que você quer olhar como referência para ver como que vai ficar esse texto na sua fonte tem vários filtros que você pode fazer aqui a fonte que a gente vai utilizar vai ser a Ubunto uma fonte que eu gosto bastante Claro você pode escolher a fonte que você quiser mas sempre confira dentro da fonte clicando nela se tem todos os Estilos que você quer usar no

seu app Nem todas as fontes vai ter bold medium ah por exemplo essa não tem um extra bold Então é bom você sempre olhar na nos Estilos da fonte para ver se tem o estilo que você pretende utilizar e tudo bem também se você quiser usar fonte diferentes mais de uma fonte na sua aplicação no nosso caso a gente vai utilizar o bunto tá então venho aqui coloco barra buun Se eu quisesse por exemplo usar a Roboto colocaria barra Roboto então aqui você coloca o nome da fonte que você quer usar barra nome da fonte

como a gente vai usar o bun dou enter e Bora esperar então ele fazer a instalação e agora sim temos tudo instalado que a gente precisa até antes da gente executar o nosso projeto eu vou fechar aqui o terminal por vamos primeiro trabalhar no carregamento dessa fonte Tá então vamos fazer o seguinte ó eu vou voltar aqui pro nosso app.tsx que é o arquivo de entrada da Nossa aplicação e é interessante a gente carregar a fonte nesse arquivo de entrada garantindo que essa fonte esteja disponível paraa Nossa aplicação utilizar então aqui eu vou criar aqui

ó dentro do nosso app tá posso até fechar a home posso fechar aqui o styles.ts e aqui ó vamos fazer a importação a gente vai importar de @ Expo Google Fontes barbun eu vou importar aqui o próprio use Fontes pra gente poder carregar a Fonte e agora eu vou fazer a importação aqui do Ubunto 400 Ah vamos pegar aqui o 700 que é o Bold eu vou pegar também ah o medium e eu vou pegar o regular Inclusive eu vou colocar assim ó um embaixo do outro porque aí fica mais fácil de de visualizar Tá

bom então perfeito temos aqui já as nossas Fontes importadas agora pra gente carregar elas a gente pode pegar esse Us e fontes aqui e aqui dentro da nossa função tá a gente pode aqui ó passar um objeto e dentro Desse objeto a gente pode passar aqui as fontes que a gente quer carregar e pronto A princípio é isso só que a gente precisa que a fonte tenha sido carregado a gente precisa garantir isso e cuidar disso porque o carregamento de fonte É é ele é assíncrono então ele não vai carregar no exato instante ali então

pode levar frações de segundo mas essas frações de segundos pode ser pode ser o suficiente para carregar a sua aplicação primeiro do que as fontes e aí se você Tá carregando uma fonte Eh Ou melhor dizendo né se você tá usando uma fonte que ainda não deu tempo de ser carregado que que ele vai fazer ele vai buscar pela fonte padrão do dispositivo caso a fonte não esteja disponível e vai emitir um alerta dizendo que a fonte que você você tentou usar não tá disponível então a gente precisa garantir que essa fonte seja carregado até

para não ter uma aparência indesejada e tão um pouco esses alertas aparecendo né então o que Que a gente pode fazer aqui ó a gente pode ter acesso a uma rake na primeira posição ele vai devolver pra gente se a fonte tá carregada então aqui eu vou chamar de Font loaded tá E aqui eu posso fazer uma verificação ó se a fonte não foi carregada então eu posso colocar aqui o um return não retornar nada só que é mais interessante por mais rápido que seja a gente carregar aqui um Active indicator né sinalizar que tá

carregando então para poder fazer isso a gente pode Fazer o seguinte ó dentro de componentes vamos criar uma pasta loading e aqui a gente pode criar dentro dessa pasta de loads aqui ó um index.tsx tá isso daqui é uma outra dica tá bom de produtividade também para você já criar uma pasta com um arquivo dentro o que que você você faz ao invés de você criar uma nova pasta você vem em new file Ok E aí você cria o nome da pasta por exemplo loading barra e aí o nome do arquivo então ele já vai

entender que Esse loading aqui é uma pasta e graças a essa barra que separa do arquivo que vem na sequência então a gente tá criando um index.tsx dentro da pasta load dando enter pronto e aí a gente pode sempre seguir esse padrão tá de ter um arquivo pra estrutura um arquivo pra estilização inclusive aqui ã eu vou importar aqui o Style sheet assim como a gente já fez e eu vou usar aqui o Style sheet do próprio react Native e aqui a gente pode exportar uma Constante chamada de Styles que vai usar stylesheet P Create

e aqui a gente pode passar o nosso loading tá aqui a reg você pode criar o nome tá que você quer definir aqui o seu as suas regras visuais vou chamar de loading E agora voltando aqui para nosso index vamos fazer importação aqui de dentro do react Native E aí a gente vai fazer a importação de um Active indicator e aqui agora eu posso exportar uma função chamada loading e aqui a gente retorna o Conteúdo do nosso componente que é um Active indicator tá bom a aqui ele fecha nele mesmo então ele não tem nenhum

filho né Fecha aqui nele mesmo e aí a gente pode passar aqui nas estilizações Style ponto e aí a gente pode passar aqui o loading perfeito como eu quero que ele ocupe a tela toda deixa eu aumentar aqui um pouquinho aqui encostar pronto como eu quero que ele ocupe a tela toda então aqui eu posso colocar um Flex de um Posso até colocar um justify content e Um align item Cent para ele ocupar toda a tela mas o Spinner ficar bem no centro né o o indicador de carregando até pra gente ver como vai ficar

a gente pode vir no app.tsx e ao invés de retornar nada a gente pode retornar o nosso componente de load perceba que conforme eu fui digitando o nome do componente aqui mesmo sem importar ele o próprio vs code Já identificou que eu tô me referindo a um componente chamado load e Até me sugeriu a importação eu posso dar enter ou clicar aqui você vai ver que ele também vai fazer importação aqui pra gente tá E aí a gente pode agora ã executar Nossa aplicação pra gente poder fazer aqui os nossos testes tá então vou vir

aqui npx Expo start ou npm start tá como forma você preferir vamos esperar ele carregar carregou aqui agora eu vou executar no Android letra A para poder executar Vamos só esperar ele carregar o app E maravilha o nosso app já abriu só que por que que não apareceu ainda o indicador de load ó porque a fonte Já carregou agora se eu tiro essa exclamação e agora salvo você vai ver que sempre vai ficar ele ali tá vendo ó então sempre ele vai ficar ali Inclusive a gente pode colocar aqui fazer o seguinte ó dentro de

src Vamos criar aqui uma a gente pode criar aqui uma pasta chamada team dentro da pasta Team a Gente pode criar um arquivo chamado Colors e aqui a gente pode ir colocando vou chamar ele de Colors TS arquivo typescript e aqui a gente pode ir colocando as cores que a gente vai utilizando na nossa aplicação Tá bom então maravilha então aqui a gente pode exportar uma constante chamada Colors e aqui eu já vou colocar que a gente vai ter a cor branca aqui o que a gente vai definir aqui são os tokens de cores Então

essa é Uma estratégia para você centralizar suas cores em referências e sempre que você quiser usar cores você não coloca o token eh cravado de cor e espalha isso em vários lugares né tipo coloca o hexadecimal direto né na na na propriedade ao invés disso você busca desses tokens de cores e aí a gente centraliza aqui a definição das cores por qu Se você quiser mudar um Tom acrescentar uma cor ou substituir uma cor você tem tudo isso em um único lugar Como referência tá então facilita manutenção e também escala da tua aplicação Então a

gente vai ter cor branca a gente vai ter a cor preta você pode colocar tanto com seis tá se você quiser ou no caso do Branco do preto dá para abreviar para três dígitos e a gente vai ter também o um vou criar aqui um Blue e aqui eu vou colocar quro 4 42 42 f0 vou usar esse tom de azul Pronto agora eu vou criar um index aqui e aí um index.tsx porque eu não vou ah usar direto Colors porque se eu quiser ir adicionando mais ah tokens seja tokens de cores de fonte então

eu vou centralizar tudo no index então isso também me ajuda na em reaproveitar melhor e também a escalar os meus próprios tokens tá para poder dar manutenção neles fica bem mais Simples então aqui ó eu vou fazer a importação de Colors vamos importar Colors aqui e aqui a gente exporta o nosso tema e dentro do nosso tema teremos as cores Então esse índex aqui dentro do tema vai centralizar os tokens de cores Fontes se você quiser criar tokens de espaçamento E por aí vai tá então e você pode centralizar tudo aqui agora agora lá no

nosso Styles ptest do loading eu vou também definir aqui a cor dele ó color E aí eu vou usar ó do tema Enter Tá vendo como fica mais simples só barra @ baram e aqui a gente pode pegar pon Colors ponto vou usar o Blue e aí ah ah só que aqui ó a gente vai ter que fazer estilização pela propriedade Então deixa eu tirar daqui tiro daqui venho aqui ó e trago a importação para cá essa é uma Outra vantagem né da da importação relativa E aí a gente pode usar direto aqui ó color

E aí tem pcor P Blue olha só tá vendo ó já vai ficar no tom de azul e essa é a vantagens vamos supor Que eu tô usando esse esse token aqui em 50 lugares Imagina você ter que ficar procurando em todos os lugares para poder mudar um por um então você pode vir aqui ó eu quero que seja vermelho a partir de agora olha só vai ser vermelho em todos os lugares que tá usando essa referência Então essa é a vantagem de manutenção quando você centraliza os seus tokens de cores fontes e aquilo que

é importante pro teu projeto tá então deixa eu voltar aqui pro azul porque vai Ser ele que eu vou utilizar Mas voltando agora pro nosso app.tsx eu vou colocar aqui o exclamação porque tem que carregar Nossa aplicação quando a fonte tiver então carregada então se a fonte não tá carregada mostra o loading caso contrário fonte disponível então ele não entra nessa condição então retorna aqui o nosso home ele tá aparecendo aqui porque por enquanto não tem conteúdo nenhum lá né Mas se a gente coloca aqui de volta Aquele texto ó aí ele vai aparecer lá

no cantinho Mas agora vamos trabalhar no visual aqui da nossa aplicação até pra gente poder ficar bem focado eu vou recolher aqui do lado e vou deixar só o index ptest x da home e só o o Styles então Posso até fazer o seguinte ó uma outra dica do vs code Eu quero fechar todos os outros arquivos e manter só esse aberto botão direito ele tem essa opção aqui ó Close others ou fechar outros clico nessa opção fecha todos os As outras Abas e arquivos e mantém só esse daqui muito bom né Deixa eu agora

tirar esse texto porque por enquanto a gente não vai usar e aqui dentro agora a gente pode começar a trabalhar na criação da nossa interface Tá eu vou criar aqui dentro uma outra View e eu vou dar um estilo aqui para essa View que eu vou chamar de dentro lá do Styles de header ele vai aqui dizer que para mim por enquanto o header não existe a gente já Vai criar esse esse header aqui tá bom inclusive Vamos abrir aqui o de o arquivo de estilo também o Style ptest e vamos já criar aqui o

nosso header tá pronto eu vou dizer que ele vai ter 100% da largura disponível para ele em tela e eu vou definir uma altura aqui pro nosso header de 132 e vou colocar aqui um background color vou usar lá do nosso tema pode notar que eu uso bastante o auto Import ó enter ele já fez aqui a importação Para mim só que é sempre importante você conferir tá porque você já deve ter reparado que por exemplo ó quando eu coloco aqui ó deixa eu voltar para cá para te mostrar ó text tá vendo que aparece

text de outros lugares então sempre é importante você conferir se a importação tá vindo do lugar que você deseja tá então tem pon Colors ponto vou usar o Blue E aí a gente vai ter lá o nosso o nosso header aparecendo lá Inclusive eu quero Que a status bar fique com a cor branca acho que vai contrastar melhor com esse nosso cabeçado então aqui ó no nosso app. tsx a gente pode fazer o seguinte aqui ó a gente pode fazer aqui a importação e eu posso até deixar essa importação aqui no começo eu vou importar

pode ser do próprio react Native porque tem também do expo tá você tem status bar disponível tanto do Expo quanto do react Native a gente pode usar aqui do próprio do próprio react Native Ó status bar e aqui a gente pode fazer a importação dela só que tem uma regra no react Native que eu não posso retornar ó dois componentes assim eu tenho que envolver eles embrulhar eles colocar um wrapper aí para poder meio que empacotar e devolver uma coisa só com tudo junto por isso a gente pode usar aqui ó o fragment o fragment

é como se fosse uma View só que não tem estilização nenhuma tá se eu salvar olha só já tá lá nossa status bar e aí eu posso colocar para Ela aqui ó por exemplo um estilo um bar Style E aí eu posso colocar por exemplo um Light content ó salvei e já ficou com a cor branca tá só que tá vendo que a Barrinha ficou com a cor preta a gente pode deixar ela transparente ó background color E aí eu posso passar literalmente a cor transparente salvei ela tá transparente só que agora tem uma faixinha

branca lá por quê aquela faixa branca é o fundo da nossa aplicação a gente precisa dizer para ela assim olha Eu quero que a status bar ela Fique por cima ali do conteúdo da nossa aplicação E aí o conteúdo Vai colar mesmo ali no no limite mesmo do próprio dispositivo E aí a gente pode fazer isso com essa propriedade Ó transluc você pode passar igual a true só que quando um uma propriedade ela tem valor boleano e você quer atribuir o valor verdadeiro a ela você pode simplesmente fazer assim ó ó que ele já entende

o próprio react Native que você tá dizendo que Translucid é uma propriedade que você tá passando o valor do boleano verdadeiro true então salvei e pronto tá vendo ó já temos lá a nossa status bar lembra que eu disse tem também aqui ó a status bar do próprio Expo o que muda ó Expo status bar a importação é a mesma o que muda é que aqui na propriedade é Style e aqui muda que é só liked ó salvou Então vai continuar funcionando igual Tá bom então tenha ambas disponíveis aí perfeito agora vamos criar um input

aqui pra Gente poder fazer pesquisa então deixa eu fechar tudo aqui vamos criar aqui ó dentro da pasta components eu vou criar uma outra pasta vou chamar de input e dentro aqui do nosso input vamos ter um index pon test x e a gente vai ter também dentro de input um styes p TS e aqui vamos começar pela estilização do nosso input tá então Vamos criar aqui a importação do próprio Style sheet do react Native Style sheet então Export const Vamos criar aqui o Styles stylesheet P Create e aqui a gente passa um objeto com

a nossa estilização tá Vou definir aqui que a gente vai ter um contêiner e a gente vai ter aqui também o input tá então a gente vai ter essas duas estilizações por quê deixa eu te mostrar aqui na própria estrutura do input tá vamos fazer a a importação aqui de uma View e do text input e a gente vai fazer a importação pegando aqui do próprio react Tá vou utar aqui do lado só pra gente ganhar espaço já vou exportar aqui o nosso input e aqui o nosso input vai retornar uma View e Como assim

Rodrigo o nosso input vai retornar uma View nosso input deveria retornar um text input E aí que tá eu vou mostrar para você aqui um patner chamado composição de componente que você consegue quebrar o seu componente em partes para conseguir deixar ele flexível dinâmico e eu vou mostrar isso Para você porque eu quero que esse input tenha por exemplo um ícone ou não além do do próprio input para digitar o texto eu quero por exemplo ter a opção desse input ter um ícone do outro lado como um xizinho quando tiver conteúdo para poder apagar o

todo o conteúdo de input de uma vez limpando ele contribuindo bastante com uma experiência ali pro pro usuário Enfim então eu quero quebrar em partes esse componente para poder ter flexibilidade e isso é um patner chamado De composição de componente tá e eu vou mostrar para você aqui como você pode utilizar então aqui Inclusive eu nem vou exportar tá eu só vou fazer a importação aqui do vou eu vou criar a função chamada input não vou exportar ela aqui e eu vou criar uma outra função e a outra função vai chamar Field essa função ela

sim vai retornar o nosso text input tá ela sim e aqui Que tal o que que a gente vai fazer a gente vai pegar o input e adicionar uma propriedade Dentro dele e eu vou chamar de Field o que eu tô fazendo aqui é adicionar Field como uma propriedade dentro de input e eu vou dizer que ela vai receber o próprio Field então recapitulando adicionamos uma propriedade de Field dentro de input e tô dizendo que o conteúdo dela é exatamente esse esse componente por isso que eu não exportei aqui antes porque agora eu vou exportar

aqui no final o nosso input que vai levar o fio de lá dentro só que agora o Que que a gente precisa fazer dentro aqui da nossa View a gente vai repassar aqui todos os filhos então ícone text input o que for necessário e a gente pode até tipar ele aqui ó olha só aqui ó eu posso tipar esse Children utilizando uma tipagem da própria View é muito comum você encontrar component e tipagens do componente por exemplo eu quero pegar a tipagem de uma View se você procurar por View você vai encontrar além da View

enquanto Componente também View props quando você perceber essa palavrinha aqui na frente props pode ter certeza que é tipagem do componente tanto que aqui tá vendo o símbolo ó Então posso colocar uma vírgula Rodrigo tenho curiosidade para ver o que tem lá dentro se você segurar o control e clicar ele vai te levar aqui ó para dentro da do próprio da própria tipagem olha só é uma interface tá vendo Então vou fechar só título de curiosidade tá E aí a gente pode usar a View props aqui e agora olha quem a gente consegue acessar aqui

a gente consegue acessar além de todas as outras propriedades Claro de uma View mas o que interessa pra gente é o Children aqui salvei pronto a gente já tá recebendo ele aqui inclusive já vamos passar aqui que ele vai receber Styles P container e Maravilha Pronto agora aqui no nosso text input a gente pode usar a mesma estratégia a gente tem o text input que é o componente a gente pode também Reaproveitar a tipagem de text input props ó tá E aí a gente pode repassar aqui ó também olha só nesse caso aqui eu posso

já pegar ó todas as propriedades e repassar todas elas aqui ó pronto prto aí não preciso nem deixar ah explícito né já repasso todas as propriedades ali sempre importante aqui você deixar por último tá porque se tiver alguma outra propriedade por exemplo ó um Place holder text color Se eu colocar aqui por Exemplo ó ah vamos colocar aqui um team pon Colors até vamos importar aqui o tema né Agora sim te P Colors E aí se eu colocar por exemplo Grey a gente não tem cinza aqui ainda né Então deixa eu colocar aqui em Colors

Vamos colocar aqui um Grey e eu vou colocar alguns tons de cinzas aqui para poder ter disponível aqui tá quando a gente quer trabalhar com tons eu coloco nome da cor underline e uso de 100 ou de 50 por exemplo até 900 tá ou 950 aí Conforme você preferir vou colocar aqui alguns tons que eu já até deixei copiado aqui no no bloco de nota ó eu vou usar esses tons aqui de cores e aí fica super à vontade para você pausar o vídeo agora e inclusive copiar além de copiar esses tokens de cores curtir

o vídeo compartilhar e também colocar aqui nos comentários O que que você tá curtindo aprender até aqui super importante para eu saber tá para continuar trazendo cada vez mais conteúdo me deixa muito feliz Quando eu vejo aqui e a galera interagindo nos comentários Tá bom então bora lá continuar agora eu volto aqui deixa eu salvar primeiro né agora eu volto para cá e vamos utilizar aqui ã um grade 300 aqui no place holder e salvei até pra gente ver como tá ficando a gente pode vir aqui agora no nosso index dentro da nossa home e

vamos importar o nosso componente de input aqui ó então ó input ó vou dar enter aqui tá vendo o nosso componente tá aqui importado Maravilha e aqui dentro dele ó a gente pode pegar o input ponto Olha quem tá aqui o Field e eu vou passar para ele a propriedade ó Place holder E aí eu posso passar aqui por exemplo um pesquisar pesquisar pelo nome Olha só ele vai aparecer lá em cima tá então lá em cima inclusive até pra gente conseguir visualizar ele melhor aqui no estilo ó aqui no nosso nosso próprio header eu

vou colocar para Que o alinhamento com F cont seja um Flex Eng para ele vir pra parte de baixo tá vendo ali ali ó como eu tava dizendo Agora sim eu vou conseguir te mostrar Por que que é importante deixa eu fechar essas pastinhas muita pasta aberta né pronto Por que que é importante aqui ó o o rest VM por último que é todas as propriedades que você passa no momento que você tá usando o componente lá por aqui então quando a gente coloca aqui por exemplo ó essa propriedade Place Holder a gente tá pegando

essa propriedade repassando lá pro componente então é como se ele tivesse pegando aqui a propriedade ó Place holder e fazendo isso daqui ó pegando a propriedade e repassando aqui né para Place holder e repassando aqui tá essa é a forma explícita mas a gente tá utilizando o rest aqui então quando a gente utiliza o rest Deixa eu tirar ele aqui ele já ele tá fazendo isso pra gente automaticamente pegando Qualquer outra propriedade porque imagina se você tivesse que definir explicitamente propriedade por propriedade tem muitas Olha só o tanto de propriedade que tem imagina ter que

definir uma por uma então você pode repassar todas aqui muito mais prático né E aí por que que é importante vi o rest por último tá vendo que por exemplo a gente tem aqui o Place holder text color eu defini essa cor de Cinza como um padrão se eu quiser sobrescrever essa Cor eu posso vir aqui e passar por exemplo ó a propriedade de novo ó Place holder text color Se eu colocar aqui ó Red tá vendo que ficou vermelho lá tá vendo ó ficou vermelho e por quê como a gente colocou aqui o rest

por último deixa eu colocar até assim ó para você visualizar como a gente colocou ele por último e aqui dentro foi repassado um novo Place holder test color Então esse daqui foi sobreescrito agora se o rest tivesse ó por último Que que acontece ele vai continuar cinza porque independente se eu passar a propriedade lá ele vai prevalecer a última propriedade que no caso essa daqui tá vendo por isso que o rest é importante que esteja por último Então se você nunca tinha entendido ainda por que o rest tem que vir por último Esse é o

motivo Tá mas vamos voltar aqui pra nossa home eu vou tirar esse Place holder test color foi só para poder mostrar para você lembra que eu falei Que eu queria deixar esse componente flexível PR poder adicionar um ícone por exemplo antes e depois agora a gente consegue eu posso pegar aqui por exemplo e fazer importação de @po Vector ions tem um monte de biblioteca decones aqui um monte ó eu vou usar essa daqui ó tá Rodrigo tem um lugar que eu consigo ver todos os ícones que tem disponíveis aqui dentro tem se você procurar aqui

ó por Expo Vector Icons você vai encontrar esse site aqui esse daqui e olha só tá aqui todos os ícones O legal é que você tem o nome do ícone que é esse que tá mais destacado a visualização do ícone aqui do lado e na parte de baixo você tem aqui de qual biblioteca esse ícone pertence porque por exemplo ó se você procurar aqui por Arrow você vai ver que tem um monte de ícones de flecha set enfim mas de bibliotecas diferentes Ó essas são da anti design Essa é do anpo tem aqui por Exemplo

do do próprio feeder EV Ah tem aqui também além do feeder tem fonte awesome Enfim então tem muitas opções então você pode consultar por aqui tá Então bora continuar aqui agora eu vou utilizar Então essa biblioteca de icones e aqui outra coisa legal é que a gente não precisou instalar essa biblioteca ela já tá disponível quando a gente cria um projeto react Native com o exo Tá então vamos utilizar ela aqui aqui eu posso passar a propriedade name e aqui Dentro tem os ícones que estão disponíveis dentro dessa biblioteca eu vou usar aqui um disch

e aqui a gente pode passar também o tamanho que a gente quer utilizar pro ícone aqui eu vou colocar no size 16 e a gente também pode passar Qual é a cor do ícone aqui deixa eu corrigir pronto 16 agora sim e aqui a gente passa a cor do ícone vou usar do nosso tem P Colors ó o tema eu não importei ainda você pode importar manual se você quiser tá Import team E aí from @team Conforme você preferir tá ou usar o ao Import então ponto Colors ponto e aqui eu vou usar o Grey

de 300 tá vendo Qual é a vantagem de utilizar e centralizar né os tokens de cores então ajuda muito tá então vamos só fechar aqui ó barra e aí fechamos aqui o nosso componente olha só tá vendo ó tá lá o nosso Icone Zinho E aí se eu quisesse que esse ícone viesse depois por exemplo ó olha só eu jogo ele Para baixo e pronto ó ele vai depois se eu quero que só ten um input tiro ele se eu quero que ele venha antes ó coloco antes tá vendo Então tem flexibilidade para você montar

esse componente porque a gente quebrou ele em pedaços em partes né Inclusive eu vou pegar aqui e vou duplicar essa parte porque eu vou usar um outro ícone aqui para esse eu vou usar aqui o de Close Ah deixa eu ver aqui tem um X Ah vou usar esse x aqui aqui ó 16 também e vou Usar aqui também esse grade 300 pronto então a gente vai ter a lupinha vai ter aqui o input e vai ter aqui esse outro ícone inclusive vamos estilizar o o nosso input aqui tá então voltando aqui pro styles.ts dentro

do da nossa pasta de input eu vou ocar aqui do lado no contêiner eu vou colocar um background color pegando do tem pon Colors vou usar um grade 100 Vou colocar aqui também um border radius de 18 altura eu vou definir como sendo 54 Vou colocar aqui um Flex Direction como Row para ficar um do lado do outro e por isso que eu vou usar esse conteiner tá vendo o contêiner é quem eu vou definir a cor é quem eu vou usar para fazer um alinhamento inclusive aqui ó eu vou fazer um alinhamento deles aqui

para centralizar show também vou colocar um pading aqui de 12 e vou colocar aqui um GAP de set só para ter um espaçamento mais interessante ali no input Flex de um para ocupar tudo que tiver disponível E aí aqui inclusive Deixa eu voltar aqui pro pro nosso índex porque olha só eu não apliquei aqui a estilização tá vendo ó Então vamos colocar Style Style pon input eu tinha colocado pro contêiner mas não pro input salvei Agora sim porque como eu coloquei aqui um Flex de um ele vai ocupar Todo o espaço que tá disponível né

E lembrando que no re o flexbox já é ativo por padrão na web você colocaria um display Flex né aqui ó você vai ver que não vai ter efeito Porque já é o padrão tá bom no react Native que a gente usa e abusa de flexbox para poder posicionar os elementos né Vamos colocar aqui inclusive paraa cor só para garantir tanto cor Black né cor preta e o Font size também como 16 Tá bom se você quiser você pode até criar um tamanho um você pode até criar tokens para tamanhos de fontes Tá mas eu

vou usar só o de cores e e vou colocar depois um para tipos de fontes mas você já entendeu Qual é a ideia inclusive falando de de tokens para fonte Vamos criar aqui né eu vou criar aqui um novo arquivo que eu vou chamar de fontet tracinho Family PTS tá E aqui agora eu vou exportar fonte Family e e aqui eu vou ter a regular a gente pode criar um Token para bold e um para medum né que é os tipos de fontes que a gente tem que que a gente precisa fazer lá no nosso

app.tsx a gente precisa pegar esses nomes aqui ó posso até copiar eles e trago eles para cá tá Ou se você quiser também você pode fazer um split né ó dividir com esse botãozinho no vscode ó numa aba você deixa aqui o app. test x vou até ocultar aqui para ganhar espaço e na outra aba aqui na outra parte né aqui do lado fica o fonte Family por qu ó a gente precisa precisa usar exatamente esses nomes porque é o nome que a fonte é chamada tá a família de fonte então eu vou pegar aqui

ó o regular coloco aqui o médio coloco aqui e o Bold coloco aqui pronto Salvei Agora posso fechar tudo e aí volta a ficar e sem essa divisão né agora voltando aqui ó olha só no index.ts a gente tem que disponibilizar aqui o fonte Family também né então a gente vamos vamos importar ele aqui né primeiro fonte Family E aí e a gente disponibiliza aqui ó fonte Family tá salvei essa é a vantagem de centralizar por Olha só agora se eu vier por exemplo no style.ts eu quero colocar aqui para ele um fonte Family Olha

só team ponto Olha quem tá aqui Font Family já disponível tá vendo eu não precisei também sair modificando nos outros lugares então é legal que centraliza vamos usar aqui o Regular Show agora a gente pode voltar aqui pro nosso arquivo aqui de Styles da nossa home e vamos fazer o seguinte aqui para ficar mais interessante o visual aqui desse desse header Tá eu vou colocar aqui um pading hum na horizontal só de 24 só para poder Afastar e eu vou colocar aqui eu quero descer só esse input então eu vou fazer o seguinte ó eu

vou criar aqui um input com um margem bota negativo menos e vou usar aqui 27 tá - 27 Qual que é a lógica desse - 27 bom o nosso input tem uma altura de 54 se eu divido ele na metade vai dar 27 e eu quero que ele desça exatamente a metade para ficar aqui nessa divisão Então essa é a ideia do porquê menos 27 tá como eu quero descer ele por isso negativo Então Agora eu venho aqui ó e no input a gente pode passar a propriedade de estilo aqui e aí a gente pode

passar Style ah Styles ponto e passa aqui o input e olha só ele vai aqui não desceu vamos ver por hum aqui a gente passou a Olha só o nosso input ele não desceu porque a gente precisa recuperar aqui a propriedade Também de Style por eu tenho que dizer para ele que além dessa propriedade porque tá vendo que eu não tô repassando as propriedades não tô repassando e também se eu repassar assim ó que que vai acontecer ó ó se eu repassar pegar aqui o rest e repassar Olha o que que acontece ele vai perder

a estilização porque vai sobrepor aquela lá então nesse cenário Eu Preciso combinar as duas por isso eu posso recuperar aqui voltar como tava primeiro Pego aqui o Estilo e eu deixo aqui ó com um arrei porque a gente pode passar um arrei de estilos e passar mais de um estilo pro mesmo componente então eu mantenho a estilização de contêiner e passo aqui vírgula a estilização que eu passei lá no componente e pronto então olha só essa dica que legal tá vendo Então você consegue combinar estilos tá então Maravilha Posso salvar Deixa eu só fechar tudo

isso para poder garantir que tá tudo organizado aqui eu tenho toque De deixar muita coisa aberta e vamos voltar aqui pro index.tsx da nossa home agora vamos já criar aqui um estado que a gente pode inclusive importar aqui ó o use state eu vou importar ele aqui do próprio react certo agora a gente pode criar aqui e eu vou usar esse use state vou dizer que ele começa como uma string vazia e aqui eu vou chamar ele de name set name aqui a gente vai fazer a pesquisa nos contatos pelo nome tá inclusive aqui a

Gente já pode pegar esse set name e passar aqui pro nosso a Field então aqui a gente tem a propriedade on Change Text e pode repassar o setn ok que que o onchange text faz ele é a mesma coisa se eu fizesse assim ó value e repassasse aqui ó value tá se a gente passa o mouse e olha aqui ó é uma string tá então como o retorno do on Change text é um texto porque ele fica observando toda vez que o conteúdo muda né se a gente pegar aqui por exemplo e trocar aqui por

um Console.log E aí eu até abri o terminal para você ver que conforme eu digito aqui ele vai mostrando ali embaixo ó tá vendo ó e aí se eu apago a mesma coisa e eu posso fazer desse jeito aqui direto né um console. log que vai dar no mesmo como ele já expõe o conteúdo modificado e atual do próprio input ó é a mesma coisa ó ele já entende que vai usar esse conteúdo né esse valor dentro de um console pon log então aqui a gente pode ao invés de usar o console log usar um

Estado por isso o nosso estado de setname Inclusive eu também vou passar o valor para ele como sendo aqui o nosso name pra gente poder controlar o conteúdo desse input inclusive aqui ó quando a pessoa tocar nesse xinho para poder ah limpar aqui dá pra gente usar direto uma propriedade de onpress se a gente quiser Olha só eu vou pegar aqui chamar o nosso setn e nesse caso passando de volta o valor que é uma string vazia ou seja limpando o conteúdo E como o nosso input o valor do nosso input é o conteúdo do

próprio Estado então a gente tá controlando não só pegando o conteúdo mas também mantendo ali o conteúdo do Estado dentro do input então o que que acontece se eu digito qualquer coisa clico nesse x ele apaga tá vendo Então porque resetou aqui pra gente o o conteúdo dá para fazer direto ou se você quiser também você pode importar um toub opacity que tem aquele efeito de opacidade daí o o nome de tob Pest coloco aqui por volta ó do do nosso ícone e o onepress aqui ó eu tiro ele daqui e coloco no toub opacity

que que muda ele vai fazer esse efeito de opacidade aqui se você quiser dá até para controlar o efeito aqui ó se eu coloco um Olha só nada acontece tá vendo ó se eu coloco zero é o outro extremo né que é de z0 a 1 0 0% 1 equivale a 100% se eu coloco 0.7 equivale a 70% ó ele fica um pouco mais suave então eu vou deixar aqui como tá sem colocar um um Activ Pest vou deixar o padrão mas legal você saber que também você tem essa liberdade para poder manipular isso também

então tá nosso input Já tá pronto agora a gente pode trabalhar na criação do O componente que vai representar os usuários Então olha só fecho aqui vamos criar aqui um novo componente que eu vou chamar de contact e aqui dentro a gente vai criar um index.tsx e também um styles.ts certo vamos já criar aqui a importação de dentro aqui de react Native vamos importar aqui também o Style sheet e aqui a gente exporta o o Styles igual sty sheet P Create beleza e aqui vamos colocar o nosso contêiner que provavelmente a gente vai eh utilizar

tá dentro aqui do do nosso componente já vamos também fazer aqui a importação ã e aqui vamos importar do próprio react Native e aqui eu vou fazer a importação de um touchable opacity tá e aqui a Gente pode exportar uma função chamada e aqui a gente pode retornar o o nosso touch opacity pronto até pra gente poder ir visualizando como vai ficando vamos importar ele aqui dentro da nossa home ó como essa parte aqui eu já terminei eu gosto de clicar aqui e recolher tá então isso ajuda também a você não se perder e aí

organizando aí o seu código também tá para você ficar bem focado aqui eu vou Fazer a importação do nosso componente de contato você vai ver que aqui ó o al Import agora não foi tá vendo ó então eu posso fazer manual mesmo aqui ó então contact aqui agora sim salvei tá aqui o nosso componente lá no nosso componente aqui voltando agora Vamos definir aqui dentro dele que a gente precisa ter aqui um texto esse texto vou pegar ele ali do próprio react Native e eu vou colocar por enquanto aqui o meu nome tá aqui a

gente vai ter o estilo Styles ponto e eu Vou criar aqui name tá inclusive ele já fez a importação aqui pra gente do arquivo de estilo pegando da raiz aqui da pasta sempre confira por lembra que cada pasta tem um arquivo de estilo só para não correr o risco por exemplo de pegar de outra pasta por exemplo ó de pegar lá da de input Olha só por exemplo pegar aqui da de input pegar aqui o estilo aí imagina você vem aqui e coloca por exemplo um Style ponto Lá também tem um contêiner ó olha o

que Vai acontecer tá vendo ele pegou o estilo lá do input então só cuida tá para pegar aqui sempre o estilo do componente Tá bom então voltei aqui para ponto barra sty muito bem Então temos aqui o nosso texto eu vou até colocar aqui name E aí a gente pode estilizar aqui agora o texto tá vamos colocar aqui como uma cor eu vou usar do nosso tema P Colors Black vou usar aqui fonte eg eu vou usar também do nosso tema só que fonte Family Ponto eu vou usar a medium Font size eu vou usar

18 e aqui é fonte Family na verdade ó fonte Family Agora sim salvei maravilha vamos só organizar Aqui já tá lá tá vendo ó o nosso componente Inclusive eu vou vou fazer o seguinte aqui ó deixa eu vim aqui e eu vou pegar aqui o nosso header por enquanto eu vou colocar um Margem Bottom aqui de 100 só para descer esse componente pra gente visualizar mas daqui a pouco eu tiro tá só pra gente poder visualizar eu tiro daqui a pouco porque a gente vai colocar isso dentro de uma lista né mas é importante primeiro

a gente focar em fazer o componente bom é legal também que a gente tenha um Avatar né então eu vou criar aqui um outro componente vou chamar de Avatar criar aqui como uma né Deixa eu deletar que eu criei sem querer Aqui como um arquivo mas eu quero criar agora como uma pasta dentro da pasta eu vou criar aqui o index.tsx inclusive me diz o que que vocês gostam mais vocês gostam que eu crie a pasta depois o arquivo ou vocês gostam que eu crio já passo e arquivo utilizando esses atalhos então coloa aqui nos

comentários também que é importante sabe eu saber o que faz mais sentido e principalmente pensando no Aprendizado de vocês tá então vamos lá vamos criar aqui também o arquivo de estilo mesma ideia vamos importar o nosso Style sheet aqui o nosso Style sheet do próprio react Native aqui a gente importa exporta aliás né o nosso estilo Create e aqui agora a gente tem a estilização para aplicar pro nosso Avatar eu vou colocar aqui por enquanto vou deixar assim E agora voltando aqui aqui pro pro nosso index a gente vai fazer a Importação e eu vou

importar uma imagem e também já vou pegar aqui image props que é a tipagem do próprio componente que a gente vai utilizar e vou importar do react intive né então aqui eu vou já pegar a tipagem para deixar o componente dinâmico pra gente conseguir definir imagens diferentes agora aqui eu vou exportar a função chamada Avatar e aqui dentro do nosso componente a gente vai retornar uma imagem e aqui pra imagem Ele tem uma propriedade que é propriedade de sece que a gente precisa passar aqui que que eu vou fazer eu vou fazer uma tipagem separada

aqui e para essa tipagem eu vou chamar ela de props e vou dizer que a gente vai receber aqui no nosso Avatar A gente vai receber uma image E aí a gente usa aqui image props tá Inclusive eu posso dizer que uma imagem vai ser opcional e eu posso até colocar aqui ó aqui ela pode ser também Nula tá bom E aqui agora eu posso pegar o props e aqui eu acesso a minha imagem tá vendo ó e posso repassar ela aqui pronto como a imagem aqui pode ser opcional porque nem sempre o usuário vai

ter uma imagem cadastrada que que a gente pode fazer nesse caso aqui a gente pode pegar ó e fazer uma verificação então aqui eu vou colocar inclusive uma deixa eu importar aqui uma View também eu vou fazer o seguinte ó vai ter uma View aqui eu vou verificar com Chaves se tem imagem Então se tem imagem Aí sim a gente vai renderizar uma imagem caso contrário a gente pode ter uma outra View e o que que eu vou fazer com essa outra View aqui deixa eu só fechar ela pronto que que eu vou fazer com

essa outra View eu vou colocar a primeira letra do nome do usuário no lugar da imagem Então esse é um padrão é inclusive é uma estratégia na verdade bem comum de utilizar inclusive aqui a gente pode colocar um texto e até pra Gente saber né a gente pode até colocar aqui também o name eu vou colocar o name como sendo uma string pra gente receber name e aqui ó dentro do texto vamos até importar ele aqui também ó do react Native e aqui dentro do próprio texto a gente pode pegar aqui name ponto vou pegar

aqui Lang E aí eu pego a primeira lente não vou pegar aqui direto a primeira posição tá E aí eu quero que que esse texto eu quero bom pegar aqui só a Primeira posição e pronto já fica bem melhor porque uma string também é um arrei tanto que a gente tem aqui out método de arrei ó ponto l tem aqui tá vendo ó mas no caso aqui eu quero acessar só a primeira letra Então a primeira posição inclusive Aqui Nesse estilo eu vou chamar aqui Style ponto chamar de letter Então vai ser a letra e

aqui a gente pode agora voltar para cá e também criar essa estilização aqui e aí daqui a pouco a gente já trabalha nela Tá muito bem então a gente já tem aqui o nosso a estrutura do nosso Avatar vamos utilizar ele tá então vou vir aqui no nosso contato e além do texto teremos também o avatar E aí a gente importa aqui o avatar que é o nosso componente tá eu prefiro fazer assim ó @con barra Avatar porque vai que a gente muda ele de lugar né E aqui ó a gente já precisa passar o

nome eu vou passar Rodrigo por exemplo e eu preciso passar Aqui o né a imagem aqui pra imagem eu vou passar aqui ó se eu passo o mouse aqui eu posso passar aqui PR imagem vou fazer o seginte uma foto minha do próprio github github.com Rodrigo vou pegar aqui salvar a imagem como Rodrigo deixa salvar em downloads e eu vou pegar aqui e vou criar uma pasta só provisório tá E vou pegar minha imagem aqui segur arrasto para cá pronto tá Aqui a imagem e aqui ó eu vou importar ela aqui ó tá E aí

eu coloco @ assets bar Rodrigo pjp pronto vamos voltar aqui para cá e tá lá a imagem bem grandona né Vamos trabalhar aqui na estilização dessa imagem e aqui na imagem a gente vai ter dois tamanhos possíveis um tamanho que vai ser utilizado na lista e um tamanho maior que é quando o usuário selecionar um contato vai abrir essa imagem um pouco maior e eu vou utilizar Aqui uma estratégia de criar variações então da Imagem e essa estratégia você pode utilizar para poder criar variações do seu componente eu vou criar aqui como uma constante que

eu vou chamar de variantes e aqui eu vou dizer que a gente vai ter uma variável de tamanho que vai ser um medium tá E vai ser um large e também a gente vai ter do texto variações do texto que vai seguir a mesma ideia então a gente vai vai ter para texto Ah médio e para texto grande porque a gente vai ter aqui esse texto aqui né que é quando o usuário não tem foto vai aparecer Então a primeira letra do nome e aí aqui a gente pode também dizer que a gente vai ter

como propriedade uma variante Inclusive eu vou deixar como opcional porque pode ser que eu queira definir ou não e quando eu não definir uma variante eu vou dizer para ele utilizar uma padrão tá então aqui a gente vai ter a medum e Vai vai ter a lard inclusive aqui a gente pode recuperar essa variante aqui e dizer que o padrão aqui ó vai ser a mío tá vendo ó a média né ou a Mia Enfim então a gente tá definindo aqui qual é a padrão se por algum motivo eu não informar a variante na hora

que eu for usar o componente agora aqui dentro da nossa imagem eu vou passar aqui ó na estilização dela da nossa image eu vou passar aqui usando as variantes ponto e aqui eu tenho uma variação do tamanho e Do texto me interessa Aqui é do tamanho e eu passo a variante que é o parâmetro aqui que eu tô recebendo né que é a propriedade aliás que eu tô recebendo aqui no meu componente E aí eu posso fazer aqui com texto também ó então aqui com o texto ó eu posso passar aqui a nossa variante as

pego as variantes aqui eu quero agora o texto passo aqui qual é a variante que eu quero e pronto tá inclusive aqui ó eu vou colocar um ponto tu upper case para já transformar a Letra em maiúscula tá para garantir que a letra fique em maiúscula agora vamos colocar aqui ó vamos começar aqui pelo tamanho né então se for mío ou médio eu vou definir largura como 54 Vou definir altura também como 54 E como eu não defini o padrão tá vendo que ele já desceu né então aqui deixa eu só corrigir pronto aqui faltou

na verdade aqui wiit agora sim e aqui eu vou colocar um border radius para ser 18 Pronto já vai ficar bem melhor aqui eu vou copiar toda essa parte aqui e aí eu vou colocar aqui também eu só vou trocar aqui os tamanhos tá para 100 e aqui para 100 e aqui eu vou colocar para 32 ok aqui no caso do texto eu vou colocar um Font size de 24 e aqui eu vou colocar um Font size de 32 tá então aqui é o que muda de uma variante para outra tá inclusive aqui pro texto

O que que a gente pode fazer na estilização a gente pode criar aqui um texte e colocar por Exemplo um fonte Family E aí a gente pode usar aqui do pegando do tema a gente pode pegar fonte Family e pode usar por exemplo medium e aqui lembrando aqui ó a importação tá do / team voltando aqui ó a gente pode usar aqui ó a estilização da variante por isso eu vou colocar aqui dentro de um Array mas a gente também pode pegar eu vou pegar e colocar aqui no início o o text Então qual que

é a estratégia o que varia que muda eu uso da variante e se Tiver estilização padrão que é aquela estilização que eu quero definir independentemente da da da variante né da variação então eu passo aqui está os pon text perfeito maravilha então agora vamos lá na nossa home para eu te mostrar que se por exemplo na home não né dentro do componente de contato que é onde a gente tá usando aqui o nosso Avatar então o que que acontece ó se eu mudo aqui na variante tá vendo ó e coloco para ela ser Lar Olha

só então Ela fica maior tá vendo a imagem se eu deixo aqui para ela o mío que é o padrão vai tá como vai voltar como tava né inclusive se eu omitir ele ele mantém o mesmo visual porque ele vai definir lá para usar o padrão que é o que a gente setou olha só se eu não passo aqui uma imagem ó se eu tiro a propriedade aqui de image e salvo tá vendo que ele tá aparecendo ali a letra R no lugar só que a gente pode melhorar também o visual né então aqui voltando

pro estilo né pro Styles P test do Avatar Vamos trabalhar agora aqui na estilização da visualização dessa letra que vai aparecer quando o usuário não tiver foto o que que eu vou colocar aqui vai ser um background color Vou colocar aqui usando do nosso tem P Colors pwh inclusive aqui voltando pro styles.ts da home eu vou também colocar aqui um background color só para diferenciar eu vou colocar aqui um Grey vamos ver se 200 dá bom acho que aqui um Grey de 200 já tá bom então Volto aqui pro Avatar show então voltando aqui pro

pro nosso Avatar agora a gente consegue visualizar esse background ah na cor branca que a gente definiu né então aqui eu vou colocar um eu vou usar inclusive aqui os mesmos tamanhos que a gente definiu aqui para pra imagem Então deixa eu colocar também aqui ó num arrei vírgula porque aí eu reaproveito né os mesmos tamanhos aqui pronto agora aqui a gente só centraliza então Aline Items a gente seta um Center e também um just F content a gente seta um Center Tá vendo como é muito interessante utilizar as variações a gente tá reaproveitando ela

né agora voltando aqui PR pro nosso componente de contato se a gente coloca aqui que o avatar vai usar uma variante por exemplo large Olha só então cresceu o texto e cresceu ali né Acho que o texto dá para crescer até mais hein vamos ver como que a gente colocou aqui 24 32 se a gente coloca 42 Acho que 52 Vamos ver acho que 52 é um tamanho bom né voltando aqui pro contato eu vou tirar a variante large vou até voltar aqui para com a nossa imagem e pronto agora o que a gente precisa

melhorar é colocar o texto do lado ali da imagem né então vamos voltar aqui pro nosso componente aqui de contato e agora eu vou vir aqui no styles.ts tá dentro do contato e vamos Vamos trabalhar aqui no contêiner Dele tá então aqui eu vou colocar para ele ocupar 100% do que tiver disponível para ele de espaço e aqui eu vou mudar a direção vou pedir para ficar uma coisa do lado da outra em linha por isso um Flex Direction como Row aqui eu vou colocar também o align items como Center e um border radius eu

vou colocar aqui como sendo s e vou colocar um GAP aqui de 12 só para poder tá ali maravilha então a gente já tem aqui basicamente o nosso componente Criado então definimos aqui o nosso contêiner e agora a gente pode voltar aqui pro nosso index ponto ã test x e definir qual é a tipagem aqui do nosso do nosso componente o nosso componente aqui ele tá recebendo tá vendo ó uma imagem e tá recebendo também aqui um nome só que tá fixo aqui né É legal que a gente defina essas informações dinamicamente recebendo elas aqui

então vou fazer o seguinte ó vou criar aqui um Type props que vai ser igual a e aqui eu vou criar um contact e eu vou até separar aqui tá vou criar uma tipagem que eu vou até exportar essa tipagem caso eu queira reaproveitar como tipagem nesse próprio componente E aí eu vou até usar o mesmo padrão ó contact props mesmo padrão que você já viu que é comum aqui o que que eu vou colocar aqui ó a gente vai ter um nome ã e aqui para esse nome eu vou vou colocar como uma string

e a gente vai Ter aqui um Avatar uma imag né vou chamar de image que vai ser opcional e aqui pra imagem Ó eu também posso já usar a propriedade image props também do react Native e aqui agora ó eu uso aqui Inclusive eu posso também usar a tipagem de touchable opacity props aqui e usar ela aqui ó Então posso dizer que as minhas propriedades vão ser iguais a um tob p props e essa tipagem aqui dentro que vai ter um contact que é um contact props então aqui agora a Gente pode ó usar o

props para acessar o contact e acessar todo o restante todo o restante a gente sabe que tá se referindo a todas as propriedades de um to op props né tanto que o onepress tá aqui ó tá vendo ó mas aí pra gente não pegar um a um a gente pode repassar a todos eles aqui então todo o restante e a que a gente vai usar explicitamente é a de contato né Eu prefiro Colocar assim por Olha só como fica mais simples no lugar de colocar Rodrigo aqui ó eu Coloco entre Chaves porque agora a gente

vai usar conteúdo que vem dentro da propriedade contact ponto e vai aparecer tudo para mim que tem disponível aqui eu passo name e aqui agora ó eu vou tirar daqui e vou usar contact ponto image e vou salvar vai dar erro agora por se a gente voltar lá pro index p tsx agora a gente tem que passar essas propriedades então a gente precisa passar aqui ó contact e aqui mais um um objeto aqui dentro que a gente precisa passar o nome Por exemplo Rodrigo e aqui a gente precisa passar uma imagem e aí eu vou

usar aqui ó a mesma importação que eu tava usando e pronto tá se eu não tenho uma imagem olha só aparece o o a letra né no lugar então por enquanto aqui eu vou deixar aqui e o essa imagem muito bem agora que a gente já terminou de criar os principais componentes da nossa interface chegou o momento da gente listar os contatos nessa aplicação e para listar os contatos a gente vai Buscar esses contatos do próprio dispositivo do usuário Inclusive eu vou mostrar para você como cadastrar novos contatos vai ser legal para você ver como

fazer isso no próprio emulador e a gente vai trazer os contatos que estão cadastrados ali no dispositivo para dentro da nossa aplicação listar eles vou mostrar para você também como criar sessões como fazer consulta e também como buscar os detalhes de um contato por exemplo pelo id Então bora continuar Desenvolvendo a nossa aplicação fazendo agora essa parte de integração com a lista de contatos do próprio dispositivo então continuando aqui a gente pode fazer a importação deixa eu fechar todas as outras janelas primeiro aqui as outras Abas né Agora sim eu vou ficar só com a

index ptest x aqui da nossa home e a gente pode começar agora fazendo a importação do do Expo contact Então vou importar e e aqui ó eu posso importar dessa forma né pegando aqui de Expo Contact e aqui vai ter tudo disponível aqui dentro ou posso fazer assim ó com asterisco importar tudo por isso que eu coloco S dentro de context tá então aqui a gente importa tudo e agora aqui ó dentro de Contex tem tudo disponível aqui pra gente tá ã agora aqui eu vou criar uma função que vai ser assíncrona eu vou chamar

essa função de F contacts então pra gente poder listar Os contatos perfeito e aqui eu vou até colocar por volta aqui de um bloco try catch aqui eu posso recuperar o erro e se por algum motivo der um erro a gente pode exibir aqui no console esse erro Deixa eu só corrigir aqui para error e eu vou também emitir um alerta aqui pro usuário então a gente usa aqui o console para ver aqui né enquanto tá desenvolvendo o que que pode Ter rolado e aqui pro usuário a gente exibe aqui um contatos no título da

mensagem e na descrição não foi possível carregar os contatos Pronto agora aqui dentro do try é onde a gente vai fazer a tentativa então aqui eu posso utilizar await pegar aqui aqui o contacts ponto e vou primeiro solicitar permissão para poder acessar os contatos cadastrados no dispositivo tá E aqui eu consigo ó desestruturar acessar aqui de dentro ó o tá vendo ó status para saber se eu tenho Ou não permissão aqui Inclusive eu posso verificar se o status é igual igual e do próprio Contex ponto a gente tem aqui Um permission status ponto e tem

aqui tá vendo ó uma enum que tem tem os status eu quero saber se tá autorizado se é granded tá por isso que eu importei tudo aqui dentro tá vendo porque aí a gente pode reutilizar sempre usando aqui o contacts como fonte Claro das coisas que a gente quer pegar de ex pro contact tá então se eu tenho aqui a permissão então Eu vou entrar aqui tá beleza e maravilha aqui deixa eu só dar um enter para poder separar e aqui agora eu posso utilizar aqui o await ã contacts pget e aqui eu vou pegar

get contact assn tá E aqui eu vou conseguir ó acessar o deira tá então consigo acessar o deira ã daqui de dentro e aí eu posso dar um console P log pra gente visualizar o que que vai vir aqui de conteúdo tá muito bem agora eu posso vir aqui ó e fazer importação de um use Effect e vou usar esse use effect aqui ó antes do retorno para que que serve o use effect quando o nosso componente for renderizado Então a gente vai executar aqui o que o nosso fatch contacts tá E aqui eu não

vou colocar nada não a Red dependência porque eu quero que ele Execute uma vez e eu vou abrir aqui o terminal e olha só quando eu salvar ele vai então aparecer a mensagem dizendo que o meu aplicativo tá pedindo permissão para acessar aqui ó Os e ler os contatos eu posso clicar em permitir e por enquanto tá vendo ó ele torna aqui um arrei vazio porque por enquanto não tem nenhum contato cadastrado inclusive vou mostrar para você agora como você pode cadastrar novos contatos no seu dispositivo até para fazer esse teste junto comigo tá então

vou vir aqui ó e se a gente procurar aqui ó no no próprio menu do dispositivo você vai encontrar aqui essa parte de contacts tá vendo ó você vai Encontrar aqui o o aplicativo de contatos eu vou abrir ele tá vendo ó por enquanto não tem nenhum contato aqui ó tá vazio deixa eu até recolher aqui o vs code pra gente focar mais aqui no no próprio ah emulador tá então eu vou clicar aqui ó nesse botãozinho de mais e vou adicionar um novo contato por exemplo vou adicionar aqui Rodrigo tá e eu não vou

colocar foto no Rodrigo e eu vou vir aqui e adicionar aqui no telefone eu vou Adicionar um número qualquer Vamos colocar aqui assim pronto vou adicionar um número aqui tá maravilha e show adicionamos ali o número tem várias outras informações Tá mas eu vou adicionar só nome e vou adicionar só um número clico em salvar e pronto tá vendo ó agora eu tenho um contato aqui cadastrado se eu clico aqui em voltar ele vai mostrar aqui o contato tanto que Se eu vier aqui agora e abrir o app aqui novamente ó e se eu rec

Pego aqui a aplicação Pode ser aqui pelo terminal apertar a letra R ou aqui no dispositivo duas vezes tá vendo que agora ele tá mostrando aqui para mim ó o usuário que eu tenho lá cadastrado ó então ele tá mostrando aqui o o meu primeiro nome que eu coloquei o Rodrigo tá vendo que ele tem um ID ele tem aqui também o name que é Rodrigo e é isso que ele tem tá vendo aqui em phone numers ele retorna um Objeto porque eu posso ter mais de um número de telefone se eu pegar aqui por

exemplo ó e colocar deira ah ponto e eu pegar aqui deixa eu pegar a primeira posição ponto aí tá vendo ó tem todas essas informações mas eu quero pegar phone numbers primeira posição E aí eu posso pegar aqui o Number ó se eu salvar daí ele vai retornar só o número tá vendo ó se eu quiser aqui e pegar só o nome Ó name aí ele vai retornar só o nome tá aqui por exemplo se eu pegar Imagem tá vendo ó imagem não tem não foi definido tá então a gente já tá pegando Então as

informações aqui do próprio doss próprios contatos ali do dispositivo né Deixa eu fazer o seguinte eu vou deixar só aqui od deira direto assim OK e vamos cadastrar agora algum alguns contatos de exemplo e eu vou até fazer o seguinte eu vou salvar aqui eu vou vou pegar algumas imagens de exemplo pra gente utilizar tem um site que é oif esse site aqui ele é um site que tem Faces de exemplo tá imagens de usuários de exemplo que você pode usar na sua aplicação tá vendo ó então eu vou pegar algumas aqui então vamos salvar

essa daqui e por exemplo aqui vai ser João deixa eu colocar aqui essa daqui vai ser Maria esse daqui vamos colocar como Antônio vamos pegar alguns esse daqui vai ser Esse daqui vai ser Fábio essa daqui vai ser Ana e essa daqui vai ser por exemplo Fátima pronto por enquanto esses tá beleza agora eu quero colocar essas imagens que eu fiz download no dispositivo então eu venho aqui eu posso pegar primeiro elas aqui ó todas elas aqui só o Rodrigo que não precisa porque eu não vou usar segure a rasto aqui daí que que ele

faz ó ele tá transferindo a imagem pro Dispositivo esperar ele terminar Pronto agora se eu vier aqui ó em files files tá vendo tá tudo aqui ó aqui em arquivos eu venho aqui nesses três pontinhos e seleciono tudo eu preciso mover ela ó clico aqui eu vou mover ela lá pra pasta de imagens mesmo então ven aqui ó SD Card picture aí vou tá tudo aqui ó Pronto tem até outras imagens ali de outros exemplos que eu dei agora ó vamos cadastrar Então vamos vir aqui vamos colocar A Deixa eu voltar aqui para contatos aqui

eu consigo adicionar não aqui é para ligar Ah aqui na verdade eu tava no fone então deixa eu deixa eu até fechar tudo aqui e deixa eu voltar aqui para contatos Pronto agora sim sinal de maisis vamos cadastrar aqui a Ana vou selecionar aqui uma foto ó galeria pictures tá vendo aí vai ter todas as imagens aqui vamos pegar aqui Ana choose Vamos colocar aqui um número De exemplo qualquer tá Colocar assim Inclusive eu vou mudar também lá o número do Rodrigo ó aí vai aparecer an aqui deixa eu editar aqui Porque conforme eu vou

digitando ó ele vai meio que formatando ali só para ficar bonitinho pronto então a gente já tem ali o do Rodrigo e tem ali da Ana vamos cadastrar mais um cadastra Antônio selecionar aqui deixa eu até ver que eu não o Antônio na verdade é o só para Eu Não Me Perder vou selecionar igual coloquei ali então Antônio aí eu só troquei né eu troquei ali eu coloquei a Ana a Ana eu coloquei a Fátima no lugar então agora eu vou criar Fátima usando a Ana então Fátima vai ser usando a imagem da Ana que

na verdade é essa aqui essa aqui né pronto e também vamos colocar o número aqui de Exemplo pronto então já temos Ana Antônio Fátima Rodrigo então a gente já tem não tem o Fábio ainda né Vamos colocar o Fábio agora é isso vamos cadastrando aqui alguns contatos pra gente usar de exemplo número aqui ó você vai digitando El já vai formatando boa Marcos ainda não colocamos então Marcos vamos pegar aqui Selecionar também aqui aqui no fone Vamos colocar um número show o Antônio a gente já colocou a Maria a gente não colocou ainda já selecionar

aqui a imagem escolher mudar o nome vamos digitar aqui falta o João habilitei a câmera sem querer aqui cadê o João cadê o João João é esse daqui Pronto vamos pôr aqui o número aqui salvei show e maravilha então agora a gente já tem E aí o Rodrigo tá ali sem imagem de proposta até pra gente ter ali a visualização da letrinha igual tá aparecendo aqui só que a gente cria o nosso o nosso próprio visual lá agora a gente pode fechar aqui agora eu vou abrir aqui o o nosso app novamente letra A para

ele abrir aqui novamente e você Vai ver que agora ele vai listar todos esses contatos que a gente acabou de cadastrar só que que a gente precisa fazer agora a gente precisa listar esses contatos aqui no no no nosso app é o que a gente vai fazer então aqui agora vamos fazer o seguinte aqui ó eu vou criar um estado e nesse estado aqui eu vou criar aqui os nossos contatos para carregar aqui contacts e aqui vai ser um set contacts beleza e aí a gente vai Utilizar esse estado aqui E esse estado vai começar

como um arrei vazio e o conteúdo desse estado aqui a gente vai utilizar ele com uma section list a section list Ela é bem parecida com uma flat list só que a section list a gente consegue criar sessões ali dentro então por exemplo ó se a gente vier aqui e utilizar Pode ser aqui logo embaixo do do nosso componente aqui ó utilizar section list a gente tem aqui a propriedade sections e aqui a gente pode Passar o nosso contacts Por enquanto não vai acontecer nada porque lá tá vazio a section list além aqui do dessa

propriedade de de section aqui a gente tem também na nossa section list o k extractor k extractor é qual vai ser a propriedade que a gente vai usar como identificador como ID tá então precisa ser único aqui ó a gente pode ter aqui dentro a gente pode utilizar o item.id só que tá vendo ó que que acontece aqui ó deixa eu quebrar aqui Para ficar mais fácil ainda não vai mostrar nada tá porque a gente não tem nada lá dentro do nosso Estado por enquanto ele é uma um arrei vazio além do do Case tractor

a gente vai ter aqui o render item que é o componente que a gente vai renderizar para cada item da nossa lista e aqui eu vou tirar o contato daqui e vou colocar o contato aqui ó olha só e vou colocar ele aqui e vou salvar e ele vai sumir porque a nossa lista é vazia só que qual que é a Estrutura de uma sessão ó se eu pegar por exemplo passar aqui uma Rei vazio eu posso passar aqui dentro um objeto e esse objeto ele vai ter uma propriedade de title e aqui paraa propriedade

de title eu posso colocar por exemplo nome e vamos colocar aqui por exemplo r e aqui eu vou ter uma outra propriedade que é a propriedade de deira e na propriedade de deira vai ser um arrei e aqui dentro desse arrei eu posso ter os Dados por exemplo eu vou colocar aqui o ID que vai ser um e eu vou colocar por exemplo um name que vai Rodrigo tá só para você ver a estrutura que tem uma section list tá vendo que voltou a aparecer o componente tanto que se eu colocar aqui ó vou colocar

João no lugar se eu pegar aqui ó eu consigo recuperar o item aqui de dentro se eu quiser passar aqui para ele Ó item pname tá vendo ó e só falta uma vírgula aqui se eu salvar tá vendo que ele mudou ele Tá pegando aqui o nosso a nossa propriedade de name aqui tá só que a gente precisa agora formatar a gente precisa formatar o retorno que a gente tem aqui da nossa lista de contatos nesse formato aqui o que que vai ser a sessão a sessão ela vai ser a letra então a gente pode

criar letras e por exemplo vamos supor a gente tem aqui ó deixa eu te mostrar aqui na própria lista de contatos mais fácil né Tá vendo aqui que na própria lista de contatos a Gente tem ó Ana e Antônio Eles começam com a letra A então é uma sessão dos contatos que começam com a letra A então a gente pode usar o título aqui para poder organizar essas sessões tanto que aqui ó a gente consegue Deixa eu voltar aqui pro pro app deixa eu abrir ele aqui novamente o nosso app pronto ó aqui a gente

consegue também além de renderizar o item ó a gente consegue renderizar aqui também a sessão tá vendo ó render section header e aqui a gente pode Renderizar por exemplo um texto e aqui deixa eu só importar esse texto lá do react Native ó tá vendo Então importei o texto aqui do react Native e aqui a gente consegue renderizar a sessão e aqui paraa sessão por exemplo ó a gente consegue também pegar aqui e acessar tá vendo ó section e aí a gente pode utilizar aqui de dentro de section a gente pode pegar aqui ó section

ponto e olha só a gente tem os Dados e mas o que interessa pra gente é o título então section p Tile tá vendo que tá aparecendo lá a letra R lá bem pequenininha até para ficar melhor a visualização deixa eu criar aqui uma estilização ó Style eu vou criar um Style ponto hã vamos chamar aqui a estilização de Pode ser title ou pode ser vou chamar de section que fica mais coerente né chamar de section e aqui no Styles.ts eu vou criar aqui pronto hã e aqui paraa nossa sessão eu vou colocar aqui um

fonte maior Vamos colocar um fonte size 18 um fonte Family eu vou colocar como team fonte Family pon eu vou usar b pronto vou colocar aqui uma cor para ela vou colocar até um background color background color aqui eu vou usar um tecblue E vou colocar também aqui uma largura e uma altura igual 34 34 Deixa eu subir aqui para você conseguir visualizar melhor inclusive o texto eu vou colocar para ele ficar com a cor branca então tem Colors White e eu vou centralizar ele com text Aline eu vou colocar Center e vou colocar um

text Aline vertical também como Center e um border radius eu vou colocar 12 Vou colocar aqui um Margem um margem top de 32 para sempre afastar quem tiver em cima mas para afastar ele daqui de baixo eu vou usar aqui a própria section list para poder fazer isso eu vou criar aqui ó dentro da section list a gente pode passar a propriedade aqui ó de de content com Style pra gente fazer a estilização dentro da nossa lista eu vou chamar aqui de Styles content content coner ou só content list e agora a gente pode voltar

aqui para nosso estilo e aí a gente pode também estilizar aqui a nossa content list e eu vou colocar aqui já de cara um pading de 24 e vou colocar aqui um GAP de 12 porque ele já vai dar uma afad E aí eu coloco um pading um pading top aqui de pading Toping de 64 e agora eu posso tirar esse esse margem botom de 100 do header ó posso tirar ele e pronto pronto e aí já fica bem mais interessante aqui tá vendo ó então aqui a gente tem já a nossa sessão estilizada tá

vendo se eu troco aqui por exemplo por por J que faz mais sentido porque é João tá vendo que a gente já tem aqui estilizado E aí se eu coloco aqui por exemplo ó além do João e vamos supor que a gente tivesse aqui o Jorge ó Vírgula vou adicionar mais um aqui então seria o dois é importante que seja o único ID E aí a gente teria por exemplo o Jorge ó tá vendo ó então teria dois aqui e aí e claro ele tá com a mesma imagem porque eu tô usando a mesma para

todos eles ou seja como você pode ver pra gente utilizar section list a gente precisa utilizar esse formato a gente precisa de um title para usar pra sessão Então a gente vai precisar agrupar todos os contatos por ordem alfabética Começando Ali pela letra né então João Jorge começa com letra j é um grupo Rodrigo Rafael começa com letra R é um grupo e por aí vai e Ana Angelo começa com letra A é um grupo então a gente vai precisar agrupar em sessões E aí o title vai ser a primeira letra do do do nome

referente àquele grupo né que começa com aquela letra e aqui vai ser os dados do contato então a gente precisa fazer essa formatação aqui então o que que a gente vai fazer ó vamos pegar aqui voltar aqui Para contacts que é o nosso estado lá inclusive aqui ó no nosso estado de ah de contatos vamos já definir a tipagem que a gente vai utilizar aqui dentro e aqui a tipagem que a gente vai utilizar pros contatos eu vou criar aqui ó uma uma nova tipagem Type props vou até criar na verdade esse Type com section

list para ficar bem detalhado ó o que que é então é a tipagem da nossa section list a gente vai ter um título Que vai ser uma string e a gente vai ter um data que vai ser um contact props lembra dessa tipagem Essa tipagem ela tá dentro do próprio componente ó então quando eu clicar aqui ele vai trazer para cá por que que eu vou usar a tipagem do próprio componente porque eu preciso dessas informações aqui para repassar pro componente Então posso reaproveitar elas aqui copio ó e aí eu venho aqui e agora na

tipagem aqui eu vou dizer que vai ser uma section list Data props Só que não é um Um só né é um Array uma lista por isso eu coloco aqui o arrei dizendo que começa como um arrei vazio legal né então vou até deixar aqui o name primeiro porque aí fica mais fácil pra gente poder visualizar agora a gente pode focar na na formatação aqui que a gente precisa fazer porque se eu colocar direto aqui ó que que vai acontecer ó ele vai dar erro de tipagem porque o que vem aqui não é o mesmo

que a gente tá esperando aqui então por isso Que agora a gente vai trabalhar nessa tipagem então agora a gente vai ver muita coisa legal para você manipular esse O Retorno ali dos contatos Então a gente vai formatar agora esses dados para ele ficar no padrão que a gente precisa para section list mas mas é muito importante que para dar tudo certo tá para funcionar aí com você tudo que a gente vai fazer é importante que você dê um like aqui nesse vídeo poxa se você chegou até aqui não clicou no like faz Esse favor

e também compartilha para aquele amigo ou amiga que você sabe que que poderia aprender isso aqui também tá bom então bora continuar muito bem no lugar desse console.log eu vou criar um const list aqui eu vou dizer que vai ser igual a deira e eu vou primeiro fazer um map aqui no deira para pegar só os dados que me interessa tá então vou pegar aqui percorrer os contatos e aqui ó eu vou colocar entre parênteses já direto o objeto para já retornar tá então aqui eu Vou querer pegar o id e pro ID eu vou

fazer o seguinte ó eu vou ter um contact pid só que tá vendo que o ID é opcional então caso o id não exista eu vou utilizar aqui ó do próprio react ou US ID então não sei se você sabia mas tem um userid aqui que ele gera um ID eh pra gente aqui e eu vou utilizar ele aqui então Ó tá então se não tiver o ID do contato então eu vou usar um ID gerado aqui tá bom também vou precisar do name Então vou pegar aqui o contact pname e Eu vou precisar da

imagem então aqui a imagem eu vou pegar de contact pimage tem outras informações aqui né então se você quiser usar mas eu vou recuperar somente essas três informações Inclusive eu vou até fazer o seguinte aqui no componente ó eu vou fazer aqui eu também vou adicionar o ID como sendo uma uma string aqui ó na tipagem do componente tá porque aí agora ó a gente vai ter aqui ó se eu passo na o mouse em cima da tipagem aí aparece o ID disponível aqui tá como uma string então perfeito então a gente já tem aqui

aqui recuperando só o que a gente precisa mas agora eu vou fazer um ponto reduce para percorrer e e retornar o com o formato que a gente precisa tá inclusive aqui eu posso dizer ó qual que vai ser a tipagem que eu espero ó que é uma section list Data props E aí eu digo que é um Array não uma específico e aqui no reducer a gente tem o acumulador posso colocar aqui por exemplo que ele Vai ser um n e o próprio item a gente tem aqui e aqui a gente tem o retorno da

nossa da função e aqui a gente tem qual é o valor inicial eu vou falar que é um Array vazio tá aqui agora aqui dentro eu vou criar aqui um const vou chamar de F first ah letter para eu pegar aqui do item pname aqui eu vou pegar a primeira letra Então posso fazer assim tem também aqui um outro método que é o char at aí você pode colocar por exemplo quero pegar a primeira letra o primeiro Caracter né então zerer Case é o que eu vou usar aqui para poder deixar ele com a letra

maiúscula ou se você quiser pegar aqui direto então aí aqui no caso você pega como uma arrei tá maravilha então a gente tem aqui a primeira letra para ele parar de dar esse Alerta aqui eu vou pedir aqui no final para retornar próprio acumulador aqui tá maravilha agora eu vou criar aqui um const eu vou chamar de ex ver se já existe então aí eu posso Pegar o próprio acumulador e fazer um find nele e aqui eu vou ter o próprio ent posso até utilizar tipagem aqui ó de section list Data props Deixa eu só

corrigir aqui foi 1 g a mais pronto e aqui agora eu posso ó aqui dentro verificar se entry ponto e aqui deixa eu colocar aqui entre parênteses para poder pronto e aqui agora sim eu posso pegar aqui ó entry ponto aí eu posso Pegar o title e verificar se é igual a first letter então quero saber se já tem essa letra né adicionada Então vou verificar aqui ó se tem então eu vou pegar ex entry pon data pon pon push e eu vou adicionar o item caso contrário Então se não tem ainda sessão criada Então

vou pegar e criar aqui a sessão que vai ser first letter pegando a primeira letra e preira eu adiciono o item já que ele vai ser o primeiro tá Então o que a gente fez aqui agora foi formatar a nossa listagem e agora para poder finalizar aqui ó eu vou fazer o seguinte deixa eu recolher aqui toda essa parte do Map do reduce tá E aqui agora eu posso usar o set contacts passando a nossa lista nosso list salvei e olha só já tá lá o os nossos usuários então bem legal né agora aqui ó

que que a gente pode fazer eh a gente pode pegar aqui tirar essa parte de contato e agora a gente pode Passar aqui ó direto pro contato o próprio item da ele já vai trocar aqui ó colocando as imagens e os os nomes certinhos mesmo só que ele tá dando ainda esse Alerta deixa eu ver por quê hum por conta de tipagem vamos ver aqui na tipagem a gente colocou aqui o title Ah aqui ó no deira faltou colocar um arrei por isso tá então é um arrei de contact props tá salvei E aí ele

vai ele vai já parar aqui de de dar o alerta então a gente já Tem aqui os contatos aparecendo tá vendo ó a gente já tem ali a sessão Ó Ana então ficou Ana Antônio F Fátima Fábio Marcos Maria e só que não tá Por enquanto organizado em ordem alfabética pra gente poder organizar em ordem alfabética a gente pode vir aqui no no nosso fat content e aqui ó no get content ass a gente pode passar aqui um objeto e aqui dentro a gente pode passar alguns parâmetros entre eles Olha só o de short esse

daqui a gente pode passar Ó por exemplo para usar aqui o o próprio first Name E aí se eu salvar Olha só agora sim organizou por ordem alfabética então muito legal né então a gente já tem o próprio método aqui para poder organizar por ordem alfabética tem outras opções aqui também se você quiser de organizar mas aqui eu vou usar o próprio primeiro nome outra coisa Tá vendo que tá acontecendo ó quando a gente rola olha só ele tá deixando a nossa lista assim um pouco meio zoada né Eu vou pegar aqui o nosso header

aqui e eu vou colocar um z index de um E aí ol El já vai passar por trás tá vendo ó Então já fica bem mais interessante outra coisa eu não eu não quero que essa Barrinha apareça então aqui eu vou colocar tá vendo essa barra de rolagem aqui eu vou colocar aqui um vertical um show vertical scroll indicator como falso Pronto agora não vai aparecer essa Barrinha e o último lá como não tem esse Daqui como não tem imagem né que foi aquele que eu cadastrei sem imagem tá aparecendo Então a primeira letra agora

o que a gente pode fazer é a pesquisa né Por exemplo quando eu digitar aqui Ana ou a quero que apareça só os que tem a letra A né então vamos fazer agora essa consulta aqui a gente tem em fat contact a gente tem aqui o nosso get contact ayc e aqui a gente já tá dizendo para ele trazer né organizado por pelo first Name a gente consegue também passar aqui além Dessa propriedade a gente pode passar aqui ó um name e olha só se eu coloco aqui por exemplo Ana e salvo aparece só a

Ana só que o legal é que se eu coloco só a letra A ele lista todo mundo que tem letra A se eu coloco a n Olha só fica a e o Antônio então a gente já tem aqui também a possibilidade de fazer uma consulta tipo like sabe de se você já usou um banco de dados skl da vida mas ao invés da gente digitar aqui Manual a Gente pode pegar do próprio Estado aqui name né então eu coloco ele aqui como o nome do estado que a gente tá usando né para atribuir o valor

tem o mesmo nome da propriedade para não ficar name dois p name Nesse caso a gente pode usar a forma curta né ou a a short syntax que é usando aqui name então ele já entende que a propriedade name vai receber como valor o conteúdo do Estado name e como a gente já tá pegando o conteúdo desse estado com setn aqui ó quando o estado Muda aqui dentro do nosso input né ó quando o estado não né quando o texto muda ali dentro do quando o input muda né o conteúdo do input muda Então olha

só vou salvar apareceu todo mundo agora se eu pesquisar aqui por Rodrigo ó Olha só pesquisei pro Rodrigo tá vendo que não mudou por que não mudou porque no nesse momento a nossa função fat contact só executada uma vez que é com us effect Mas a gente pode adicionar aqui o name que é o nosso estado como Uma dependência do use effect o que que isso significa significa que toda vez que o conteúdo de name mudar ele vai executar o fat contact novamente e a nossa lista consequentemente vai atualizar Vou salvar e olha só agora

só apareceu o Rodrigo então quando eu apago aqui ó ó tô apagando apareceu o restante se eu procurar por fa apareceu Fátima o Fábio e a Fátima se eu procurar por Marcos Olha só apareceu Marcos se eu procurar aqui por Fulano não tem então Não aparece nada então se eu coloco aqui Ana ó se eu coloco aqui Maria se eu coloco aqui Pedro também não tem se eu clico no xizinho limpa e aí volta todo mundo então muito legal a gente consegue fazer essas caries né Pesquisar pelo nome organizar o O Retorno né da da

lista de contatos Então isso é muito legal porque você pode criar aplicações que usam os contatos do do próprio dispositivo do usuário outra coisa também que a gente pode aproveitar aqui E fazer é criar uma divisória aqui entre os contatos eu vou fazer o seguinte aqui ó eu vou utilizar o item separator component e aqui eu vou utilizar uma vi e eu vou usar essa View só criar essa divisão mesmo essa divisória questão de estilização eu vou usar aqui Styles ponto e vou chamar de parator vou pegar aqui vamos lá Nossa estila tá dando esse

Alerta aqui ess erro porque não existe ainda né então aqui agora no final a gente pode Adicionar ela tá então esse separator aqui vou colocar aqui uma largura de 100% e uma altura só de um vai ser o suficiente tá pra gente poder utilizar e eu vou colocar aqui um background color pegar aqui te pon Colors ponto pegar aqui um grade 300 só que faltou aqui só dois pontos ó salvei Agora sim tá vendo Então tinha faltado ali os dois pontos Vamos colocar aqui o margem top de 12 só para poder afastar e pronto Olha

só entre os componentes coloca a linha quando o componente é só só tem ele dentro da sessão então não coloca a linha tem uma outra que é o separator mas tem um que é por sessão que é esse aqui ó section separator component só que aí ele coloca ó entre as sessões tá mas aí eu quero usar esse que é o aí tem separator component que aí fica entre o componente só para poder dar um charme agora o que que a gente pode fazer quando eu clicar em um Determinado contato abrir aqui os detalhes do

contato aqui na parte de baixo tá então a gente pode fazer o seguinte deixa eu fechar tudo aqui vamos voltar aqui pro nosso app. test x porque agora como a gente vai lidar com gestos então eu vou fazer aqui a importação de dentro aqui do react Native gest render e aqui eu vou importar o gessler handler root viw e esse gest vi eu vou usar ele aqui ó no lugar do fragment vou colocar ele aqui tá então a Gente abre ele aqui e fecha ele aqui inclusive aqui eu vou colocar na propriedade de Style um

Flex de um tá para ele pegar toda a área disponível da tela a gente precisa utilizar esse gest render hot viw para que toda a nossa aplicação consiga lidar com gestos então por isso que a gente coloca ele pegando todo o contexto do nosso app Então nossa home né que é a interface que a gente tem fica aqui dentro exat pra gente poder lidar com gestos tá então posso Fechar aqui agora e vamos voltar aqui pra nossa home e agora a gente pode fazer aqui a importação e aqui eu vou importar o Bottom sheet usando

aqui @ gorhom e aqui eu pego só barra Bottom sheet pronto e aqui agora a gente pode utilizar ele aqui embaixo ó vamos utilizar ele aqui eu vou colocar ele logo depois da nossa section list tá a gente vai colocar ele aqui o botom sheet abro e fecho ele tá a gente pode colocar aqui para ele pro pro nosso Botton sheet a gente precisa colocar para ele uma referência essa referência é o que a gente vai utilizar para poder controlar a abertura e o fechamento dele então eu vou utilizar aqui do próprio react o use

hef para poder criar essa referência e aqui ó deixa eu só tirar esse espaço eu vou criar essa referência aqui e aqui eu vou criar com const botton sheet igual use ref E aí a gente vai ter aqui a nossa referência Inclusive eu vou passar aqui Como tipagem para para essa referência ó o próprio Bottom sheet e digo inclusive que ele começa como nulo agora eu vou atribuir ele aqui ó aí eu passo aqui a referência para ele tá pro nosso Bottom sheet outra propriedade que a gente precisa passar aqui para ele é o Snap

points e aqui é um Array aqui eu vou colocar como 100 e 200 tá aqui são as posições de abertura dele eu vou colocar 100 agora vou colocar até menos colocar 30 só para para você visualizar tá E vou Colocar 30 e vamos colocar 284 tá então aqui são as posições de de abertura dele então na posição zero desse desse arrei ele vai ter uma altura de 30 na posição um né no índex um melhor dizendo vai ter vai ter então a gente consegue criar aqui colocar aqui definir né tamanhos diferentes de acordo com o

índice que a gente quiser utilizar para trabalhar com abertura e com fechamento dele tá e com A manipulação como um todo e aqui a gente precisa também passar o filho aqui né então aqui pro filho vou colocar o avatar deixa eu usar aqui o nosso componente de Avatar Vamos só ver aqui se ele importou certinho ó tá aqui o nosso componente de Avatar Maravilha e aqui noss lente de Avatar eu vou passar aqui para ele a gente precisa do nome Deixa eu colocar Rodrigo e só né porque aí ele pode carregar o a Letra lá

de se eu deixar aqui sem a imagem Vou salvar e tá vendo que tá ali ó se eu coloco aqui por exemplo ó 100 Esse é o tamanho Inicial dele e aí eu consigo ó tá vendo ó arrastar ele se eu só que aqui ó não consigo colocar zero tá se eu coloco zero ó ele dá erro o truque aqui pra gente colocar o primeiro a primeira posição dele como fechada é 0.0.1 E aí ó ele não vai aparecer uma outra propriedade interessante aqui é a Propriedade índex se eu coloco aqui por exemplo um ele

vai então usar como padrão o index um aqui do arrei de Snap Point se eu tiver aqui uma terceira posição por exemplo 50 e eu coloco aqui no caso index 2 ó tá vendo ó aí vai ser ela se eu coloco o zero vai ser essa primeira que é o 0.0 um tá mas aqui eu vou tirar esse índex porque a gente não vai controlar por ali ele vai já pegar essa primeira posição e o 50 Então eu só vou trabalhar com 0.01 e 284 tá 284 então só com essas duas com esses dois tamanhos

agora pra gente poder controlar a abertura e o fechamento dele a gente pode usar a própria referência aqui eu vou criar como métodos separados Então olha só eu vou criar um eu vou chamar handle bton sheet Open por exemplo E aí eu vou criar aqui usando a própria Er function vou usar o Bottom sheet Half pegar aqui Bottom aqui Inclusive eu Vou colocar como Bottom sheet Half para ficar bem explícito que aqui é a referência e deixa eu também colocar aqui ó pronto e aí então mudei aqui tá então na referência como Bottom sheet he

e aqui também PR Bottom shit have aqui eu vou pegar então ponto e vou usar aqui o current aqui eu vou colocar interrogação porque ele pode ser nulo né e aqui eu vou usar o expand para poder expandir ele e agora que a gente já tem esse que Abre ó eu vou duplicar ele tá então cont CRL ctrl v Então vou duplicar só vou trocar aqui para Close porque a gente vai fazer agora o de fechar e aqui ó a gente vai ter current ponto e eu vou usar o Snap to index e aqui vai

ser a o index zero Tá bom agora a gente pode fazer o seguinte ó quando eu clicar em um quando eu tocar né em um em um desses contatos aqui a gente pode usar o onepress eu vou até criar como uma função separada também para ficar bem Organizada a nossa aplicação Tá eu vou criar aqui uma função vou chamar ela de Random Open details e aqui eu vou receber inclusive o ID do do contato como uma string pra gente visualizar Vou colocar aqui inclusive um console.war pra gente ver qual é o ID que tá chegando

aqui e aí a gente pode chamar o o handle Bottom sheet Open para poder abrir vou usar agora a função aqui ó ele tá dando esse erro Porque ó tá vendo a gente precisa passar aqui a função e aí como a gente vai passar aqui um parâmetro então eu faço com myon function E aí a gente passa aqui o item.id e vou salvar então quando eu clico na Ana tá vendo que aqui ó A Ana é o 11 quando eu clico no Antônio o Antônio é o 12 e tá vendo que ele abriu deixa eu

fechar ó quando eu clico na Fátima abriu de novo e a Fátima é 13 então a gente já tá abrindo aqui ó olha Que legal e aí a gente pode também constatar que a gente já tá recebendo também o id o que eu quero até aproveitar para mostrar para você é que a gente também consegue buscar os contat os detalhes do contato usando o próprio ID vou mostrar para você agora Como que você pode fazer isso primeiro eu vou transformar essa função em uma função assíncrona tá E aqui ó deixa eu tirar esse console. warn

aqui eu vou agora pegar aqui ó criar um con response igual A wiit vou utilizar aqui contact pget e aqui eu vou pegar ó content e a gente tem aqui ó buy id assn e aqui eu passo o próprio id e olha só o que que a gente tem aqui ó console.log aqui a gente tem o response olha só quando eu clico aqui ó deixa eu deixar aqui no final ó quando eu clico na Ana ó quando eu clico aqui na Ana não tá dando console P Log em response deixa eu ver por quê aqui

a gente pega aqui o contato Passa aqui Deixa eu recarregar aqui a aplicação Ah já tava retornando ó na verdade tinha travado o meu consol log aqui o meu terminal aliás Então o meu terminal tinha travado por isso que não tava aparecendo Mas vamos lá quando eu clico na Ana agora sim tá vendo ó vamos ver o nome dela ó tá aqui o nome dela Olha a imagem dela aqui também então se eu clico aqui ó no Fábio tá vendo que aqui ó Fábio então a gente já tá recuperando as informações Do usuário pelo id

se você quisesse você poderia fazer assim também né pegar por exemplo Ah eu quero pegar já o contato direto Você poderia pegar contact direto e pegando aqui do próprio ah contact props aí aqui ó deixa eu deixar aqui o contato direto tá E aí você poderia aqui repassar o próprio contato então ao invés de você passar o item pid poderia passar o item inteiro Olha só quando eu clico na Fátima só que aí ele vai Retornar só aquelas informações que a gente tr que a gente tá usando na section list lembra por isso que eu

vou aqui usar essa estratégia de pegar só o ID aqui é string daí eu uso aqui get contact by ID aí eu pego aqui ele tá E aqui ao invés de passar o item inteiro eu pego aqui o próprio item.id tá então por isso que eu usar essa estratégia aqui mas a gente pode agora exibir essaa Mas vamos dar uma Mexida aqui ó eu não quero que apareça por exemplo esse esse risquinho aqui né que é do do próprio Bottom a gente consegue remover ele através dessa propriedade aqui Hand component e aqui eu só coloco

que ele vai retornar aqui nulo já vai sumir ali aquele componente e agora vamos trabalhar na esza aqui então a gente vai ter deixa eu colocar além do Avatar aqui uma outra View eu vou colocar aqui um texto e aqui pro texto Eu quero pegar o contato né o nome do contato Então vou até fazer o seguinte aqui ó eu vou criar um outro estado Esse vai ser o contato selecionado tá então vou chamar de contact set content a função para atualizar ele e aqui eu vou aproveitar para te mostrar uma coisa olha só a

gente pode usar uma tipagem que tem dentro do próprio context aqui do próprio Expo content ele tem uma tipagem ó que é essa daqui ó content tá vendo ó Se eu passo o mouse aqui agora ó deixa eu passar aqui dentro mais fácil tá vendo ó todas as informações do contato como a gente vai ter ele aqui retornado pelo id então a gente pode usar essa essa informação aqui inclusive agora eu vou usar ele aqui esse set content E aí eu posso passar ele aqui ó então no lugar de de poder retornar deixa eu achar

aqui a função deixa eu recolher aqui o fat Content aqui né a gente estava passando para esse consol log então a gente passa a resposta aqui do contato que a gente buscou pelo id pro set de content agora a gente pode usar ele aqui ó como ele pode ser ó se a gente olhar na tipagem dele ele pode também ser undefined então vou fazer o seguinte ó vou pegar todo esse Bottom sheet vou envolver entre Chaves porque aí eu vou exibir esse vou usar o Bottom sheet se realmente tiver um contato Selecionado tá agora no

texto a gente usa contact pname tá vendo todas as informações do contato elas estão aqui mas aí me interessa aqui mais o nome do contato e aqui eu vou até colocar vou criar uma estilização Style ponto vou chamar essa estilização aqui de Bottom sheet content V até copiar ela aqui e vamos criar ela al ali dentro Lembrando que agora a gente tá no Styles P test da Home tá vou criar essa estilização aqui que ela não existe por enquanto não existia né também vou criar aqui para esse texto eu vou chamar aqui como user ou

como deixar como contact name vou criar ela aqui também e a gente também pode exibir o o telefone do usuário inclusive pro telefone do usuário vou criar uma View vou criar um estilo aqui também que eu vou chamar de fun Number eu vou criar Como uma View por aí eu vou ter aqui dentro um ícone também vou importar aqui da biblioteca de ícones que já tá do do próprio feer e aqui eu vou usar o ícone de phone Deixa eu só corrigir aqui ó feeder name e aqui vai ser fone pro tamanho eu vou colocar

18 e pra cor eu vou usar tem pon Colors pon vamos pegar aqui um Blue pronto fechar aqui o ícone E aí a gente vai ter aqui o texto vou colocar como Styles PF e a gente pode colocar aqui o número aqui pro número vou pegar tá vendo ó o fun numbers porque ele pode cadastrar mais de um número mas aí eu vou pegar aqui a primeira posição o Number inclusive aqui ó vamos criar esse fun Number que ainda não tem não tem ainda o próprio fone também não tem e e aqui Eu vou também

renderizar toda essa parte aqui ó porque se não tiver um número ele vai mostrar só o ícone né então para garantir toda essa parte aqui também entre Chaves e aí eu só vou renderizar se contact P fun Number existir aí a gente renderiza essa parte aqui também perfeito então maravilha então agora voltando aqui vamos trabalhar nessa estilização vou deixar aqui por exemplo a Ana aberta aqui Inclusive a gente pode agora notar que ele carregou o r vamos Ver por que ele carregou o r carregou o r por quê Ah porque no Avatar tá aqui o

o name né então vamos já passar aqui como contact pname e aí pr imagem a gente passa contact P image Pronto agora sim Maravilha inclusive aqui a gente vai passar pra imagem a variante de large para ser uma imagem grande show agora vamos trabalhar aqui na estilização do do bot vamos começar pelo boton sheet content aqui eu vou passar Aqui um Flex de um vou colocar um background color eu vou colocar como sendo te. Colors PG 100 E aí você vai ver que ele vai ficar com esse cinza aqui só que que eu quero fazer

eu quero que o fundo fique transparente porque eu quero fazer um efeito com a imagem ficar no centro e como se ela tivesse um pouco fora então aqui no próprio Bottom sheet eu vou passar aqui PR background Style eu vou passar aqui aí eu vou criar uma Estilização com esse nome aqui ó Bottom sheet tá E aí o background vai ser transparente tá salvei e aí a gente só usa aqui ó ele agora ponto botom sheet salvei e olha só tá vendo a imagem agora é como se elae para fora né mas agora aqui ó

no nosso Bottom sheet content voltando paraa estilização pro nosso arquivo de Styles tá pon TS aqui dentro da nossa home Inclusive eu criei Esse arquivo aqui sem querer deixa eu apagar ele que eu crii sem querer pronto Nem sei como que ele apareceu ali sei lá se eu digitei rápido acabo criando Mas enfim ah vamos colocar aqui um border top ã Start radius eu vou colocar de 32 você vai ver que lá de um lado ele vai fazer deixar um pouco arredondado vou duplicar aqui porque eu vou fazer a mesma coisa do outro lado no

lugar de start coloco End eu vou colocar aqui também um pading top de 64 vou dar uma afastada e também vou alinhar tudo no centro ó Então vou usar aqui um Center e vou colocar um pading aqui de 32 tá maravilha agora agora aqui pra imagem eu quero levar a imagem aqui pro centro só que se a gente olhar lá no Avatar de imagem ó aqui no próprio Avatar A gente não tem uma propriedade para poder manipular a estilização no lugar onde a gente tá usando componente Que que eu vou fazer ó vou criar aqui

uma propriedade que eu vou chamar de container Style vou até deixar ela como opcional e vou utilizar aqui ó a tipagem Style props aqui ó a Style na verdade ela chama essa pagem Style prop ela não tem um s tá Style prop E aí eu vou usar ela aqui tá E aqui ó eu passo um generic e digo qual é o a o qual é o componente que eu quero usar as estilizações então eu vou usar aqui uma View Style também essa View Style a gente importa aqui do React Native tá então esse Style props

ele permite que eu consiga pegar as estilizações de uma View então por isso que eu passo ela como uma generic aqui agora eu posso pegar o container Style aqui ó e aí eu posso repassar aqui para essa View não ven aqui ó aí eu vou ter aqui o o estilo né E aí eu repasso aqui agora voltando aqui pra nossa home eu posso passar aqui para esse Avatar agora eu vou criar aqui pro contêiner Style vamos Chamar aqui de de Avatar vou chamar aqui na verdade de image tá ficar mais fácil vou voltando aqui pra

estilização a gente pode também trabalhar com ela até deixar ela aqui antes do contato para seguir essa ordem de de estilização que a gente tá fazendo e agora aqui pra imagem eu vou colocar o margem Bottom de men 50 para ela descer e aí eu vou Você viu que ela foi para trás né então vou colocar um z índex de um para ela vir pra frente e vou colocar uma Aline self Para ela ir pro centro E aí ela já vai vir pro centro e olha só que legal conforme a gente abaixa daí a imagem

já vai acompanhando ó se eu arrasto ela fecha se eu abre o Antônio por exemplo aí abre o Antônio o que a gente precisa agora é trabalhar na na estilização aqui e agora vamos focar aqui no Contact name no Contact name vou colocar um Font size de 18 18 não vou colocar bem grande 32 e vamos colocar aqui também um fonte Family da a Gente pode usar aqui tem P Font Family vou usar aqui B perfeito e agora aqui vamos focar aqui agora no phone number só que ele não tá aparecendo aqui o telefone né

do Antônio Será que eu não coloquei deixa eu ver vamos vir aqui em contatos Antônio e olha só o Antônio não tem mesmo deixa eu editar e deixa eu colocar aqui pronto volta para cá vamos recarregar aqui o app Ó você pode apertar o r aqui Duas vezes e pronto agora se a gente clica no Antônio ó agora sim inclusive tá vendo que eu tô tendo que clicar duas vezes para não fazer isso vou fazer o seguinte ó Por que que isso tá acontecendo porque no primeiro momento quando eu clico o como atualização aqui do

nosso Estado ela também não acontece no exato momento deixa eu pegar aqui aqui ó bem nessa parte aqui ó no handle open the Tails que que acontece aqui ó deixa eu recarregar o app para te Mostrar quando eu clico ó cliquei uma vez ó não carregou por qu ele atualiza aqui o nosso estado e logo em seguida vai abrir ali o nosso Bottom sheet só que quando ele abre o Bottom sheet não deu tempo ainda de refletir a atualização no estado né porque leva Questão questão aqui de milisegundos né então ela não acontece no exato

momento agora na segunda vez como ele já tem conteúdo ó se eu clico no Fábio por exemplo aí dá certo então só para ele Para poder contornar isso eu vou setar aqui ó pro set content e aqui pro set content eu vou pegar o data e aí eu vou pegar aqui a posição zero Pronto agora se eu recarregar aqui ó Isso é só para ser o valor inicial quando eu clico no Antônio tá vendo Antônio já de primeiro ó vou recarregar se eu clico aqui na Ana Ana de primeira tá então Ana Antônio Fábio ó

João tá então vamos agora voltar aqui pra estilização no style.ts aqui da nossa Home e aqui no fun Number eu vou colocar aqui um Flex Direction como sendo Row para ficar um do lado do outro também vou colocar aqui Um align item Center para poder centralizar Vou colocar aqui um GAP de c e o margem aqui nem precisa né Por enquanto agora aqui pro fone eu vou colocar um fonte size de 18 um fonte Family eu vou colocar team Font Family bold para ele ficar um pouquinho maior acho que eu vou colocar Um medium eu

vou colocar aqui até pra cor um team P Colors pon Vou colocar aqui um Gray de 400 e aí acho que aqui no no telefone também eu acho que eu vou fazer o seguinte no telefone se eu usar um Blue vamos ver como fica com Blue para ficar com a mesma cor do do ícone ou eu deixo aqui também como vou deixar assim ó como um Grey de 400 e aqui também no eu vou colocar Também um grade 400 pronto que aí fica padrãozinho show então muito bem a gente já tem aqui ó o nosso

visual já Prontinho só que vamos criar um botão pra gente também usar aqui o método de de fechar cadê ele aqui ó o de fechar Daí pode ser um um botão né então vamos criar um componente aquiar um componente buton Button dentro da pasta Button a gente vai ter o index.tsx e a gente vai ter Styles.ts aqui no na nossa estilização Então vamos importar o Style sheet aqui ó do próprio react Native vamos exportar a estilização usando stylesheet P Create e aqui a gente pode criar o nosso contêiner aqui pro nosso botão aqui agora vamos

trabalhar na estrutura do nosso botão Então vamos importar aqui ó do react Native a gente pode importar o tob opacity o tob opacity props que a tipagem que a Gente vai usar e o texto aqui a gente vai exportar o botão e a gente vai retornar vai retornar aqui o tob opacity e dentro do tob op a gente vai ter o texto inclusive Vamos definir aqui a tipagem ó Type props posso dizer que a tipagem vai ser igual a um t Pest e a gente pode pegar o title aqui como uma string E aí a

gente pode repassar aqui ó pegando title e todo o restante E aí a gente usa a props a gente passa aqui PR Estilização a propriedade deer Lembrando aqui de ortar estilização ó ele já fez o al Import mas sempre bom confirmar aqui do styles.ts dentro da mesma pasta do nosso componente e a gente passa aqui também o restante aqui eu também vou colocar Active indicator aqui ou melhor dizendo activ Pest como 0.7 e aqui a gente passa o title Inclusive eu vou também criar uma estilização aqui pro título Style p title não existe ainda né

Vamos criar aqui a estilização então title e agora acho que a gente pode importar O componente lá para dar uma olhada como ele vai ficando né conforme a gente vai estilizando então voltando aqui pro index da home vamos fazer a importação desse componente que é o componente aqui de buton e a gente pode usar esse componente aqui aqui é com B minúsculo pronto então aqui agora a gente pode usar o componente bem aqui embaixo Ó Depois aqui dessa View a gente pode usar a gente pode até usar dentro dela aqui ó Button a gente passo

o title vou chamar de fechar Pronto já tá ali o fechar Então vamos trabalhar agora na estilização desse botão então aqui no contêiner Vou colocar aqui para ele uma largura de 100% para ele ocupar do que tiver disponível ali para ele na onde ele tiver sendo utilizado e para altura eu vou colocar aqui um 54 um border Radius Vou colocar aqui como 12 pra gente ver como fica aqui 12 pronto vou centralizar aqui tanto na vertical quanto na horizontal no centro agora vamos colocar um background color team Colors pon vou usar blue Vamos só importar

o tema aqui só trazer o tema para cá ó para ficar mais fácil de visualizar e aqui é Colors Pronto já tá lá ah eu vou agora pro título aqui eu vou colocar aqui um color te. Colors White fonte size eu vou aumentar para 18 aqui foi uma vírgula a mais ó pronto e o fon Family team fontfamily PB ou podemos tentar aqui com medium pronto perfeito agora eu vou colocar aqui um espaçamento nesse botão posso até vi aqui no estilo da home e aqui ó no fun Number vou margem Bottom vamos 32 E aí

já desceu legal acho que talvez 24 já fica com tanto melhor agora a gente pode usar aqui o nosso método handle bot Close aqui no botão ó então aqui a gente pode passar e passa handle Bottom sheet Close então se eu clico no botão fechou massa né inclusive lá no botão Vamos trabalhar aqui ah já tinha colocado né o Active Pest ali como 0.7 então achei que não tinha colocado então maravilha então dessa forma terminamos aqui a nossa aplicação Então nossa aplicação tá listando aqui os contatos então a gente tá acessando a lista de contatos

ali do dispositivo carregando imagem carregando Aqui a foto né do do usuário o nome do usuário Inclusive a gente recriou aqui Uma uma sessão né agrupando aqui os contatos pela letra que começa o nome a gente tem aqui a possibilidade de fazer pesquisa olha só a gente consegue pesquisar clicando no x aqui ele limpa e aí volta como tava Então isso é muito legal né então a gente consegue aqui fazer pesquisas Olha só né e a gente também trabalhou aqui com usuários né contatos que não tem Imagem então a gente tá mostrando aqui a primeira

letra do nome quando o usuário não tem uma imagem né E também se a gente clica aqui ó no contato também Você viu como recuperar as informações né os detalhes do contato aqui a gente usou imagem nome e número do telefone mas você viu que tem muitas opções de de informações aqui que você pode pegar e utilizar do do próprio contato né então ou criar aqui novos contatos também foi uma coisa que você viu aqui como fazer No próprio emulador então muito legal essa aplicação que a gente desenvolveu o objetivo dessa aplicação Era exatamente esse

tá mostrar para você que você consegue manipular os contatos do próprio dispositivo Espero que você tenha gostado do conteúdo de hoje e deixa aqui nos comentários sugestões inclusive de próximos conteúdos que você gostaria de ver por aqui é sempre um prazer poder trazer conteúdo aqui pro Canal tá então curta compartilha e Também se inscreve no canal caso você ainda não seja inscrito para você receber notificação de conteúdo novo Beleza então parabéns por ter chegado até aqui mais um conteúdo bastante intenso Então parabéns por ter concluído e por ter chegado até aqui e muito obrigado por

me acompanhar Tá eu vou ficando por aqui um forte abraço para você e até o próximo vídeo aqui no canal