Header/Cabeçalho Personalizado com Expo Router e React Navigation!

[Música] fala Mestres beleza no vídeo de hoje nós vamos criar aqui um header né um cabeçalho aqui pra nossa aplicação customizado né Nós vamos criar ali tudo pra gente ter essa experiência não é para ser um header completo Um header todo ali bonitinho mas é pra gente ter de fato ver como é feito né entender a ideia por trás aí desse header customizado Beleza então antes da gente ir pro vídeo gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também siga a gente nas redes sociais os links estarão toos

aí na descrição meu nome é Janer sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo bom então cá estou eu no nosso projeto o que eu fiz aqui foi basicamente remover as opções que nós deixamos na aula passada né onde a gente estava explorando aqui essas opções e basicamente o que nós vamos usar aqui nessa aula é o header né A header aqui que nós vamos enviar para ela uma função tá que basicamente é uma componente lembrando aí que componentes são funções que Retornam um jsx onde esse jsx vai ser vai

descrever né a nossa interface então olhando a tipagem aqui né a a função ou seja a componente que vai ser usada como header ela recebe como propriedade esse Native stack header props tá que são as propriedades que vão dar informações pro nosso cabeçalho que ele precisa né informações como o objeto de navegação a rota que está eh sendo renderizado ali atualmente então a gente usa bastante dessas propriedades para manipular de fato o navegador e retornamos né o react node que seria aí o jsx com o visual aí da nossa do nosso cabeçalho tá então nós

vamos criar a componente né a componente que recebe essas propriedades e retorna jsx pra gente passar aqui como header tá então eu vou criar aqui um dentro de src eu vou criar aqui um novo arquivo vou chamar de header ptsx é vamos criar na verdade um diretório chamado components né e dentro de components eu vou mover aqui o meu header então aqui no cabeçalho no arquivo né eu vou criar aqui a função header esse header ele retorna Vamos botar para retornar uma vi né do react Native dentro aqui um texto também do react Native ã

com escrito Mestres tá E aqui no final eu dou um Export Export default header Salv isso aqui eh uma vez salvo a gente já vai conseguir importar lá no nosso layout tá então aqui o header vai ser essa componente que eu acabei de criar Vai importar aqui de src componentes header eu já consigo usar tá só que eu vou criar aqui a tipagem das propriedades pra gente saber o que que o que que eu estou recebendo né o o que que o stack Navigator está enviando pro meu cabeçalho que seriam essas props né e o

tipo das props é vamos olhar aqui é o Native stack header props Então vamos colocar falar que essas props né é um Native stack header props ele não vai me sugerir eu vou ter que importar isso aqui manualmente e o vs code tá até sugerindo aqui algo parecido ou é isso mesmo se eu não me engano é isso Native stack header props É isso mesmo correto Obrigado code e Beleza então eu posso salvar isso aqui e a já pode ver que o cabeçalho na aplicação já foi substituído né Ele tá cortando ali em cima o

Mestres mas já existe um cabeçalho aqui então o que que eu vou fazer de cara vamos criar uns estilos aqui os Styles é o Style sheet pon Create e aqui eu vou ter um estilo do contêiner vou chamar isso aqui de contêiner que seria essa View externa né o estilo que eu vou passar para ela ela é basicamente a margem né para descolar ela do Topo descolar ela da da barra de status E aí sim a gente aplica algum estilo aqui no texto Então vou ter aqui o contêiner e vou ter o estilo também do

título né que seria o texto aí que vai ser exibido dentro do cabeçalho então na vi aqui eu vou passar Style Styles coner e no texto aqui tit tá então para esse contêiner o que que eu vou fazer eu preciso saber qual que é a altura da barra de status do dispositivo porque se por exemplo eu passar aqui o marg top de sei lá 60 pi né se eu salvo isso aqui vamos recarregar o aplicativo a gente pode ver que 60 é um número bom né Mas dependendo do dispositivo se eu troco de dispositivo vez

60 seja muito Talvez seja pouco vai depender né então esse valor aqui ele não é fixo ele varia e como ele varia a gente tem acesso a ele através de um api do react Native que api da status bar tem a status bar do Expo e tem a status bar do react Native no caso aqui a gente vai usar a do react Native então a status bar ponto current height né altura atual dessa forma eu vou ter sempre o valor correto né a altura precisa aí da barra de status independente do dispositivo que eu estou

beleza e pro título aqui eu vou passar um fonte size talvez uns 25 pix e o Font weight bold para ficar em ali o texto também tá então eu vou deixar menor um pouco acho que 20 fica bom e beleza temos aqui já um contêiner com título a gente pode utilizar isso aqui mais né que seria adicionar um weding de talvez uns cinco pixis ã e mais margem na esquerda o título se distanciar um pouco da esquerda né a gente isso tá bom pedem de CCO pixis Beleza então vamos manter assim e vamos continuar aqui

desenvolvendo esse header né então o que que a gente vai fazer agora olhando aqui props se eu digito aqui não props ponto nós temos aqui o back que seria a função de Navegar para navegar para trás né para voltar naveg que é o objeto de navegação que a gente pode navegar para outras rotas navegar de volta também options que são as opções da navegação e route também que é a informação da Rota que eu estou atualmente né a gente pode até fazer um console logo aqui ó props vamos salvar isso aqui e ele já vai

fazer um log aqui de bastante coisa porque o que que acontece e como na primeira renderização esse header aqui a gente usa ele dentro do navegador navegador ele recarrega algumas vezes então aqui ó logou quatro vezes né Então essa componente ela foi carregada quatro vezes e por isso esse console logo foi executado quatro vezes né Caso contrário eu teria aqui um US effect e dentro do US effect eu passaria esse log aqui mas para agora não tem problema né Vamos navegar aqui eu ten um botão de Navegar aqui que a gente vai paraa outra tela

e nos logs nós temos aqui né algumas outras coisas ele preencheu o back né back aqui no início tava undefined certo esse back na verdade esse back é a informação da rota para trás né a rota anterior mas eu tenho aqui o Nav tem tem bastante informação né esse log aqui ele não tá muito bem pra gente visualizar as coisas nele mas dá para ver que tem bastante informação e a gente vai acabar usando algumas dessas informações aqui porque o que que eu quero fazer eu quero colocar o ícone a setinha né para voltar então

quando eu pressionar nessa ess setinha eu quero voltar para para trás né Navegar para trás então para fazer isso o que que eu tenho que fazer né dentro de props a gente viu que quando eu navego para uma tela esse back aqui ele fica ele fica definido né então eu posso verificar se props PB né ou seja se isso aqui está definido eu eu tenho a opção de Navegar para trás né eu tenho essa possibilidade e dentro de navigation nós temos também uma função que é essa função ó can go back que isso aqui vai

retornar um boleano indicando se eu posso ou não se o meu navegador né ele tem condições ou não de Navegar né de fazer a navegação para trás aí a navegação voltando então eu vou usar isso aqui esse can go back eu vou criar aqui uma variável e vai ser essa can go back e baseado nessa variável eu vou fazer aqui uma verificação dentro do meu jsx né que seria a renderização condicional então que eu passo Chaves e eu vou verificar o can go back está definido ou seja ele é verdadeiro né como ele é um

boleano ele é true ou falso então se ele for verdadeiro eu vou retornar um ícone que seria o ícone de voltar sen não eu vou retornar nulo eu não quero não quero que apareça nada né então retorno nulo e esse ícone de voltar eu já tenho ele separado aqui é o ícone do material icons né que a gente importou lá do Expo Vector icons tem toda uma lista né de de ícones que a gente pode utilizar e o ícone em si ele é esse aqui [Música] ó trazer ele para cá colocar aqui né em ent

no meu ternário né material icons o nome do ícone né S Arrow back iOS um tamanho e cor para ele eu vou salvar isso aqui e recarregando a nossa aplicação a gente já pode ver que a aplicação não está recarregando vamos voltar aqui então no início né só tenho Mestres ali Navegar eu já tenho o meu ícone de voltar aí então ele já esse can go back está funcionando e agora para melhorar isso aqui vamos estilizar né porque eu quero colocar o ícone de voltar ao lado do meu texto Então a gente vai ter que

passar alguns estilos aqui no nosso contêiner né Eu quero que esse contêiner ele seja eu vou deixar claro aqui né que ele é flexível display Flex né e o Flex Direction vai ser Row né Eu quero que as coisas fiquem um ao uma ao lado da outra né E com isso aqui a gente na verdade a gente vai precisar também de alinhar esses itens item Center né para alinhar eles na na horizontal né para ficar para não ficar um para eles não ficarem horizontalmente desalinhados o meu Expo aqui ele tá testando né me testando aqui

mas quando eu clico em Navegar nós já temos aí o ícone de voltar e o título Mestres todos alinhados Beleza então feito isso vamos aqui no ícone né Ou seja quando eu pressionar no item no ícone onpress eu vou simplesmente executar uma função que vai chamar eu vou criar uma função tá que seria o handle back handle back pode ser isso const handle back essa função vai simplesmente chamar props pnation pon gob que é a função que navega para trás né que volta aí uma tela então salvando isso eu já consigo vamos recarregar aqui né

Eu já vou conseguir pressionar o ícone lá e voltar um uma tela né voltar pra tela inicial Tá então eu vou deixar aqui para como a na verdade como a gente já usa né o o stack Navigator ele já tem essa integração com o Android ele já funciona o botão de voltar aqui do meu do meu sistema do meu do meu celular né do meu emulador Android aqui então a gente não precisa implementar nenhum código específico para esse botão de voltar aqui mas a gente consegue também se você é da sua curiosidade interagir com esse

ícone com esse botão de voltar né que o Android tem a gente consegue interceptar ele e fazer tirar esse comportamento por exemplo de quando pressionar aqui voltar né caso eu queira a gente consegue sim controlar o que que acontece quando eu pressiono esse botão mas não é o foco desse vídeo Vamos deixar do jeito que está e vamos prosseguir aqui no nosso cabeçalho tá então É que na verdade nós já criamos né o uma estrutura a estrutura que eu tinha que eu queria propor aqui que é um cabeçalho simples com esse botão com essa funcionalidade

de voltar né ele detecta que nós tem nós estamos em uma tela que consegue voltar de volta e quando ele detecta isso ele coloca o ícone pra gente e a vantagem de ter isso aqui é basicamente que eu consigo personalizar ele do jeito que eu quiser tá então por exemplo vamos supor que a minha aplicação ela tem no cabeçalho um campo de busca ou um ícone de busca né um ícone que quando eu clico ele navega para alguma tela de busca alguma coisa do tipo eu conseguiria eh simplesmente implementar isso aqui né então eu poderia

por exemplo colocar aqui um um text input do próprio react Native né com o Place holder aqui de busca ou pesquisar né alguma coisa do tipo vamos ver como é que ele vai renderizar esse cara aqui para mim mas basicamente eu iria ó já colocou ali um campo de busca eu iria aplicar alguns estilos nele aqui né jogar ele pra direita e enfim né aplicar os meus estilos os estilos que me interessa aqui então eu teria um estilo aqui esse estilo seria Styles in né E aqui no na minha Style sheet eu teria aqui por

exemplo um Flex 1 border n largura da borda de um Piel a cor da borda cinza né que mais hum o border radius né sei lá uns C pixels vamos ver como é que fica isso eu basicamente iria personalizando isso aqui do jeito que me interessasse Eu quero uma margem na esquerda né margem left de coisa de uns 20 pixis talvez fique bom enfim né aqui vocês já pegaram a ideia de que a gente iria implementando e personalizando customizando da forma que nos interessasse E também dependendo aí da tela a gente personalizar também específico para

cada tela Beleza então para essa aula aqui é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentári a logo abaixo e é isso aí muito obrigado e até a próxima [Música] n