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:
- Crie uma pasta para os hooks do seu projeto;
- Crie um arquivo chamado useLoadFonts.js;
- 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>
Top comments (0)