Utilizando fontes com Expo

Nesse post usaremos de 3 pacotes:

• expo-splash-screen: permite-nos manter a SplashScreen (tela de abertura) até terminarmos de carregar os recursos da aplicação;
• expo-font: permite que utilizemos de fontes da web ou customizáveis em nossos componentes;
• @expo-google-fonts/fonte-desejada: nos oferece cobertura para todas as fontes encontradas no Google Fonts.

vamos seguir então com suas instalações:

1- Iniciando projeto:

npx create-expo-app myProject

2- Instalando expo-splash-screen:

npx expo install expo-splash-screen

3- Instalando expo-font:

npx expo install expo-font

4- Instalando @expo-google-fonts:

npx expo install @expo-google-fonts/poppins

obs: o módulo @expo-google-fonts oferece suporte para várias outras fontes, basta que você coloque o nome da fonte desejada após o nome do pacote, você também pode encontrar uma lista com as fontes suportadas no seguinte repositório: Clique aqui. Nesse exemplo usaremos a Poppins.

Após a instalação dos módulos acrescente o seguinte código a raiz do seu projeto:

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  // ...
}

O método SplashScreen.preventAutoHideAsync() chamado acima, faz com que a tela de abertura da aplicação permaneça em execução até chamarmos o outro método SplashScreen.hideAsync() que nesse caso será chamado quando já estivermos com a fonte carregada.

Para organizar melhor nosso projeto podemos criar um Custom Hook que será encarregado de carregar as fontes e chamar o método que esconderá a tela de abertura, vamos chamá-lo de useLoadFonts:

1. Crie uma pasta para os hooks do seu projeto;
2. Crie um arquivo chamado useLoadFonts.js;
3. Copie o seguinte código:

import { useCallback } from "react";
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from "expo-font";
import { Poppins_400Regular, Poppins_500Medium } from '@expo-google-fonts/poppins';

const useLoadFonts = () => {
    const [fontsLoaded] = useFonts({
        'Poppins_Regular': Poppins_400Regular,   
        'Poppins_Medium': Poppins_500Medium
      });

    const onLayoutRootView = useCallback(async () => {
        if (fontsLoaded) {
          await SplashScreen.hideAsync();
        }
    }, [fontsLoaded]);

    return { fontsLoaded, onLayoutRootView };
}

export default useLoadFonts;

Caso deseje utilizar de fontes customizadas, basta trocar a linha da chamada do hook useFonts para uma estrutura semelhante à seguinte:

const [fontsLoaded] = useFonts({
    'Nome-Fonte': require('caminho_para_a_fonte')
  });

Após isso basta importarmos o hook criado e utilizarmos na raiz do projeto, segue o exemplo:

import { Text, View } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import useLoadFonts from './src/hooks/useLoadFonts';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const { fontsLoaded, onLayoutRootView } = useLoadFonts();

  if(!fontsLoaded)
    return null;

  return (
    <View
      onLayout={onLayoutRootView}
    >
      // ...
    </View>
  );
}

Agora a sua aplicação já deve ser capaz de utilizar dessa fonte e precisamos apenas passar da chave que colocamos no hook useFonts para o fontFamily do componente, ex:

<View
      onLayout={onLayoutRootView}
    >
      <Text
        style={{
          fontSize: 34,
          fontFamily: 'Poppins_Medium'
        }}
      >
        Hello world!
      </Text>
    </View>