fala Mestres beleza no vídeo de hoje nós vamos ver aqui como instalar e como usar as fontes fontes diferentes né no nosso aplicativo a gente vai estar usando aqui um pacote que é o Expo Google Fontes né Que são fontes da Google disponibilizadas para serem usadas no Expo a gente vai ver como é que é que o o processo disso tudo né e na próxima aula a gente vai ver como fazer a instalação das fontes usando um arquivo de fonte que aí você pode pegar qualquer arquivo de fonte que você tem aí qualquer arquivo na
internet e instalar no no projeto no aplicativo e usar essas Fontes aí dentro da nossa aplicação Beleza então antes da gente ir pro vídeo Eu gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também acompanha a gente o nas nossas redes né os links estarão todos aí na descrição o meu nome é jancer eu sou desenvolvedor aqui na Mestres e bora lá para mais um conteúdo [Música] então como eu disse nós vamos usar um pacote né que é esse Expo Google fontes e aqui vai ter um barra o nome
da fonte né então quando a gente pesquisa aqui no npm por Expo Google Fontes nós temos aqui vários pacotes né várias famílias de fontes diferentes que a gente pode estar simplesmente instalando e usando no nosso projeto aqui que a gente vai usar aqui essa inter tá mas vocês vocês podem usar qualquer um desses e e as fontes elas possuem um um nome né que a gente vai usar esse nome para identificar o tipo da fonte lá na hora no no CSS nosso mas é basicamente a gente vai instalar o pacote com as famílias de fontes
e e através de um Hook que o próprio Expo vai est dentro né do Expo Google Fontes a gente usa esse Hook E aí passa lá as famílias das fontes que nós queremos carregar no projeto e ele vai fazer isso pra gente tá então tem aqui o exemplo ó do do uso e nós vamos fazer isso aqui na nossa aplicação tá então vocês vão começar instalando o pacote eu já instalei tá para economizar o nosso tempo aqui eu simplesmente rodei aqui ó o npm install né Expo Google Fontes barin ele fez a instalação rapidinha não
tem problema nenhum e aqui eu já coloquei o projeto para rodar tá então o que que a gente vai fazer né a gente precisa carregar essas Fontes assim que a aplicação inicia né ou melhor antes mesmo da AP enquanto a aplicação tá carregando eu quero também fazer o carregamento dessas minhas Fontes Então tem um momento aí específico para isso que a gente pode separar em o load do aplicativo antes do load e depois do load E para isso nós usamos a Splash screen tá então o aplicativo já tá rodando aqui e Se eu reiniciar recarregar
ele né eu vou pressionar aqui R duas vezes a gente pode ver que fica essa tela né esse círculo aqui que na verdade é a Splash screen do Expo que não tem ícone nenhum não tem nada né a gente pode personalizar esse Splash screen eu posso colocar ali uma imagem do ícone da minha aplicação alguma coisa eu posso colocar aqui nessa tela e essa tela é é o que vai tá ela vai ficar aparente enquanto o aplicativo está carregando depois que ele carrega a Splash screen some e aí sim a gente já tem o nosso
aplicativo aí carregado tá então o que a gente vai atacar é basicamente esse momento antes da Splash screen sumir né o que eu quero é carregar as fontes antes da Splash screen sumir porque quando ela sumir o aplicativo já vai est todo bonitão lá com as fontes que eu tô usando né que eu estou carregando então para fazer isso é eu vim aqui no meu arquivo de layout esse arquivo de layout ele tá dentro aqui de app né então é o layout da raiz é onde nós estamos definindo aqui o nosso stack naveg da raiz
né o stack naveg ator principal e Então nesse esse arquivo ele é o primeiro que vai ser pego e que vai ser lido que vai ser interpretado e carregado aí pela nossa aplicação Então antes mesmo da minha da minha componente né de eu exportar aqui a minha componente que que é referente a esse layout eu vou definir aqui o o Splash screen a gente digita aqui Splash screen ele vai sugerir pra gente importar aqui do Export router e Aqui nós temos o um método que é o prevent auto hide ayn tá então esse método o
que que ele vai fazer ele vai prevenir que a Splash screen suma então ele é bugado tá Às vezes aqui em desenvolvimento quando a gente dá o fast refresh aqui né que eu recarregar a aplicação às vezes ele não vai funcionar muito bem Tá mas em teoria a ideia o funcionamento dele é esse tá é para prevenir que a Splash screen suma e a gente vai definir quando que eu quero que essa Splash screen apareça nov novamente tá então agora que em teoria eu estou prevenindo né que a Splash screen suma eu vou fazer o
carregamento das fontes tá então nós temos um método que é o use fontes e ele já vai importar aqui do pacote que nós instalamos né o Expo Google fontes barin e aqui eu passo um objeto onde nesse objeto eu vou definir as fontes que eu quero as famílias de fontes que eu quero carregar então aqui dentro do Import né do Expo Google Fontes eu posso importar aqui também as famílias de fontes Ó tem o Inter 100 né Inter 200 300 400 isso aqui é o nível de espessura né da fonte quanto maior que o caso
que o Inter 900 é a fonte bem negrita né o que eles chamam de black aqui ou no caso negrita seria bold Black seria de fato aí o mais que o né Muito sentido isso Mas beleza então nós temos aqui a inter 700 eu vou carregar ela vou carregar outra também a inter 100 e aqui dentro do US Fontes eu vou passar esses objetos que eu importei ó lá Inter 100 e o Inter 700 tá E aí esse Hook ele vai me retornar dois valores tá que nesses valores aqui basica ah na verdade a gente
tem que fazer um destructuring num Array né tô vendo aqui que ele retorna 0 E1 então é um destruct no arrei E aí cada o os dois valores desse desse Array vai ser basicamente a gente pode chamar aqui de fontes loaded e e por exemplo load erro seria basicamente um sucesso e erro tá se deu se deu erro vai tá definido aqui no meu load erro né se deu sucesso eu vou ter o fonte loaded é definido né Ele é um boleano load erro vai ser um objeto de erro ou nulo que vai descrever ali
o que que aconteceu que deu problema no carregamento dessa fonte então uma vez que eu uso o Hook aqui eu vou usar um US effect é lembrando aí o use effect é um Hook que vai ser nesse caso aqui né Eu quero que ele Execute somente uma vez né somente quando essa minha aplicação iniciar que na verdade aqui dentro Eu vou fazer uma verificação em cima desses caras né em cima de fonte loaded e de load error então basicamente eh como eu vou usar isso aqui dentro do effect eu vou ter que definir esses dois
caras aqui num arrei de dependências tá mas aqui eu vou eu vou verificar né se a minha fonte foi carregada que que eu vou fazer eu vou chamar o Splash screen e vou dar aqui um Hide ayn né que é basicamente se ele carregou as fontes eu posso remover a Splash screen porque ã as fontes estão estão carregadas beleza e aí se acontecer algum erro né que na verdade se acontecer um erro a gente precisa tratar né tratar esse erro de alguma forma eu tento carregar novamente as fontes ou eu vou carregar a aplicação com
com outro outra família de fonte a gente pode tratar esse erro aí de alguma forma mas é basicamente o que que eu tenho que fazer aqui né como isso aqui é uma componente a ordem que as coisas são executadas é um pouco diferente né Então essa componente né ela vai ela vai ser carregada pela pela aplicação né porque a aplicação ela está iniciando ela vai carregar essa componente ele vai chamar esse US effect e aqui eu tenho que fazer umas verificações do da seguinte forma eu verifico se aconteceu algum erro né então se a fonte
não foi carregada né e aconteceu algum ou na verdade né se a fonte não foi carregada então aqui ó vou verificar ó Fontes loaded né Se ela não foi carregada ou teve algum erro que que eu vou fazer eu posso retornar nulo e o que que eu tô o que que tá acontecendo aqui na verdade né e eu vou retornar nulo enquanto a minha as minhas Fontes não foram carregadas né então ele vai ficar ele vai essa componente né como ela é é a raiz da aplicação a aplicação tá carregando ele tá montando tudo enquanto
a minha fonte não for carregada eu vou ficar retornando nulo na verdade aqui é se não tiver erros né então se não tem se eu não tenho erros e as fontes não foram carregadas eu vou ficar retornando nulo aí retorna nulo nulo nulo nulo E aí quando as fontes for carregad ou quando não tiver erro né quando um dos dois acontecer quando não acontecer né ele vai retornar aqui a a nossa que é no caso a nossa aplicação Beleza então eu posso salvar isso aqui ele vai recarregar aqui a minha aplicação vamos aguardar aqui ele
carregar tá ele não quer carregar Então vamos debugar né vamos entender o acontecendo aqui e primeiro aqui de cara eu vou fazer o seguinte eu vou dar um console Log em fontes loaded e load erro então ele está carregando as fontes né e não tem erro então as fontes estão carregadas né no caso aqui as fontes não estão carregadas Isso aqui vai retornar falso né load error load error é nulo né não tenho erro então essa negação vai me retornar true e ele tá caindo aqui dentro então aqui não é negação né É só Lad
erro salva isso aqui e a nossa aplicação volta a funcionar né aqui é coisa de de detalhe de de lógica booleana né E foi até bom ter acontecido isso aqui porque é sempre interessante quando nós temos esses exemplos aí ao vivo de de problemas né de debug aí beleza então agora que nós estamos carregando as fontes né Vamos usar Então eu tenho aqui a tela inicial a tela inicial ten aqui um Hello from home um perfil um Edit vamos mexer nesses textos aqui eu vou vir aqui na home eu tenho aqui ó o Hello from
home vamos vamos mexer nele então eu vou passar um estilo aqui direto nele e esse estilo eu vou passar aqui ó o fonte Family né a família de fonte vai ser qual e aqui é uma string né e o nome dessa família de fonte é o nome da família que eu importei aqui pelo Expo e pelo Expo Fontes né então aqui se eu passo interc né que seria o fino a fonte quase que some né o o texto aqui porque realmente é uma fonte bem fina n deixa eu aumentar aqui o tamanho da fonte Olha
lá é uma fonte bem fininha né e eu posso carregar aqui também o Inter 700 bold né E olha lá já é a fonte tá então PR para ajudar o uso aqui dessas Fontes eu gosto de criar um enum e aqui eu criaria um enum um arquivo né eu teria aqui um arquivo aqui dentro de src eu posso ter aqui por exemplo um diretório chamado comon que é as coisas em comum né ou shared que são os arquivos compartilh dados e aqui dentro de shared eu vou criar um arquivo chamado interfones pn1 TS né um
arquivo TS aqui e aqui desse arquivo eu vou exportar o N1 Inter Fontes N1 ou eu gosto de colocar o prefixo né E então tudo que começa com e é um N1 né mas enfim só detalhezinhos e aqui eu colocaria as chaves né Por exemplo B team né ou eu posso colocar aqui o número né de 100 a gente viu lá que vai de 100 a 700 né Então nesse N1 a chave 100 vai ser igual ao a string né interin ele vai reclamar ele vai reclamar por causa do número né então eu posso colocar
aqui o s né ou em maiúsculo e o outro seria o Bold né só para nos ajudar aqui na hora de usar o Bold é esse cara aqui 700 bold E aí com esse en1 criado eu simplesmente importo o en1 Quando eu for usar a fonte né eu importo aqui o o e Inter Fontes pon bold né E aí ele já vai trazer para mim a fonte bold se eu quiser o tin que é a fonte fininha ele vai trazer aqui para mim e basicamente vai ficar me ajudando aí na hora de de definir os
nomes para mim não ter que ficar sempre digitando esse nome estranho aqui eu ter que ficar lembrando disso tá certo mas para essa aula aqui é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima n
