Utilizando fontes customizadas no React Native

As fontes customizadas são uma forma simples e eficaz de personalizar a aparência do texto num aplicativo React Native. Quando utilizadas, você pode garantir que o texto tenha a aparência desejada e ajude a criar uma experiência diferente para o usuário final.

Felizmente, implementar fontes personalizadas em um aplicativo React Native é bastante simples. Neste artigo, vamos ver como fazer isso e usar fontes personalizadas em seu aplicativo React Native.

Adicionando fontes personalizadas -

Tudo o que precisamos fazer é criar um diretório de fontes, adicionar as fontes desejadas que queremos usar, criar um arquivo de configuração, adicionar o caminho e vinculá-los ao projeto. Veremos todo esse processo no decorrer deste artigo:

O Google Fonts é um local excelente para baixar fontes. Você pode visualizar e baixar as fontes de sua preferência no formato .ttf

Depois de baixar as fontes desejadas, criamos um diretório de fontes asset reservado para as fontes. O caminho deve ser assim:

Directory/assets/fonts

Ele ficaria parecido com isso:

Dentro da pasta fonts é onde ficará guardada todas as nossas fontes baixadas no Google Fonts, vamos apenas mover as fontes baixadas para lá.

Com as fontes movidas, criamos um arquivo chamado: react-native.config.js ele terá as configurações do projeto. O código deve ser assim:

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['assets/fonts'],
}

Vincule os Assets ao projeto -

Depois que as etapas acima forem concluídas, podemos simplesmente executar um comando para vincular as fontes que acabamos de adicionar.

Para versões Reac-native abaixo: 0.69

npx react-native link
yarn  react-native link

Para versões superiores a 0.69 ou iguais, comando é:

npx react-native-asset

Feito isso,basta adicionar as configurações de fonte na estilização, veja meu exemplo:

topoTitulo: { 
    fontFamily: 'Roboto-Black',
    fontSize: 25, 
    marginTop: 18,
    marginBottom: 10, 
    color: '#fff', 
    textAlign: 'center'},

Espero que os passos acima mencionados tenham ajudado você. Com isso, poderá customizar seu aplicativo com diversas fontes