Utilizando fontes com Expo
Tags: expo, reactnative, tutorial
Published: 2023-02-16 23:28:03

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](https://github.com/expo/google-fonts/tree/master/font-packages). Nesse exemplo usaremos a Poppins.

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

```js
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:

```js
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:

```js
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:

```js
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:

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