Un guide sur l’utilisation de polices personnalisées dans React Native

React Native propose plusieurs styles de polices par défaut à choisir lors de la construction de votre application. Cependant, pour offrir à votre application l’originalité et l’individualité dont elle a besoin pour se démarquer sur un marché encombré, vous pouvez parfois avoir besoin d’utiliser des polices personnalisées.

Découvrons comment appliquer des polices personnalisées lors de la construction de votre prochain projet React Native.

Comprendre les formats de fichiers de polices

Avec React Native, vous pouvez ajouter des fichiers de police personnalisés à un projet et personnaliser l’apparence des éléments textuels dans vos applications. Ces polices personnalisées se présentent sous la forme de fichiers de polices de différents formats. Les fichiers contiennent des informations de style codées pour une police de caractères spécifique.

Les formats de fichiers de police les plus courants que vous utiliserez dans le développement mobile React Native sont :

• Police TrueType (TTF) : Il s’agit d’un format de fichier de police courant que la plupart des systèmes d’exploitation et des applications prennent en charge. Les fichiers TTF sont relativement petits et peuvent contenir de nombreux caractères.
• Police OpenType (OTF) : Elle est similaire à la TTF mais peut également contenir des caractéristiques typographiques avancées. Les fichiers OTF sont plus volumineux que les fichiers TTF et ne sont pas pris en charge par toutes les applications.
• Embedded OpenType Font (EOT) : les fichiers EOT sont compressés et peuvent inclure des informations de gestion des droits numériques (DRM) pour empêcher toute utilisation non autorisée. Cependant, tous les navigateurs ne supportent pas l’EOT et il n’est généralement pas recommandé de l’utiliser dans les projets modernes.

Lors de l’utilisation de polices personnalisées dans un projet, il est important de choisir un format de fichier de police qui réponde aux besoins du projet. Cela peut impliquer des facteurs tels que la prise en charge de la plate-forme cible, la taille du fichier, les exigences en matière de licence et la prise en charge de fonctions typographiques avancées.

Importation et application de fichiers de polices dans React Native

Vous pouvez télécharger un fichier de police de n’importe où sur Internet et l’importer dans votre projet React Native personnel pour l’utiliser. Cependant, il existe de nombreux sites web de qualité et sûrs à partir desquels vous pouvez télécharger des polices gratuites en toute sécurité.

Pour importer un fichier de police dans votre projet React Native, créez un fichier assets/fonts à la racine de votre projet, et déplacez-y les fichiers de polices.

Les étapes nécessaires à l’utilisation de polices personnalisées varient selon que l’on travaille avec un projet purement généré par React Native ou avec un projet React Native géré par Expo.

CLI React Native

Si vous travaillez avec un projet généré par l’interface de programmation de React Native, créez un fichier react-native.config.js et définir ces paramètres à l’intérieur de celui-ci :

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

Cette configuration indique au projet d’inclure les polices stockées dans le fichier « ./assets/fonts/ » afin que l’application puisse y accéder lors du rendu des éléments de texte.

Vous pouvez ensuite lier le répertoire actifs dans votre projet en exécutant ce qui suit :

 npx react-native-asset
 

 npx react-native link
 

Vous pouvez maintenant utiliser les polices personnalisées liées comme vous le feriez normalement dans votre style CSS en appelant leur nom exact dans le style font-family :

 <Text style={styles.fontText}>Hello, World!</Text>

const styles = StyleSheet.create({
    fontText: {
      fontFamily: 'Tilt Prism',
      fontSize: 20,
    },
});
 

Expo-CLI

Pour les projets générés par Expo-, vous devez installer la bibliothèque expo-fonts en tant que dépendance pour importer et appliquer des polices personnalisées. Installez-la avec cette commande :

 npx expo install expo-font
 

Vous pouvez maintenant utiliser expo-fonts dans votre fichier de projet comme suit :

 import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';

const CustomText = (props) => {
  const [fontLoaded, setFontLoaded] = useState(false);

  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });

      setFontLoaded(true);
    }

    loadFont();
  }, []);

  if (!fontLoaded) {
    return <Text>Loading...</Text>;
  }

  return (
    <Text style={{ ...props.style, fontFamily: 'custom-font' }}>
      {props.children}
    </Text>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <CustomText style={styles.text}>Hello, world!</CustomText>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;
 

Vous pouvez remanier et améliorer le bloc de code ci-dessus en appliquant le modèle de conception des conteneurs et des composants de présentation.

Voici le résultat des applications React Native CLI et Expo CLI :

2 Images

Définir une police personnalisée comme police par défaut pour votre application Expo

Il se peut que vous souhaitiez utiliser une police personnalisée comme police par défaut pour l’ensemble de votre application React Native plutôt que de l’appliquer à chaque Texte individuellement. Pour ce faire, vous pouvez utiliser la fonction Texte du composant defaultProps pour définir la famille de polices par défaut pour tous les Texte dans votre application.

Utiliser l’option Texte.defaultProps pour définir la propriété fontFamily au nom de votre police personnalisée.

Voici un exemple :

 import React, { useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';

const App = () => {
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });

      Text.defaultProps.style.fontFamily = 'custom-font';
    }

    loadFont();
  }, []);

  return (
    <Text>Hello, world!</Text>
  );
};

export default App;
 

Définition de la famille de polices par défaut à l’aide de Text.defaultProps n’affectera que les composants Texte créés après la définition de la valeur par défaut. Si vous avez déjà créé des composants Texte avant de définir la famille de polices par défaut, vous devrez définir la propriété fontFamily sur ces composants individuellement.

Création d’une famille de polices personnalisée avec plusieurs styles de polices

Pour créer une famille de polices personnalisée avec plusieurs styles de polices dans une application générée par React Native CLI, vous devez d’abord importer les fichiers de polices dans votre projet. Créez ensuite un objet de famille de polices personnalisé qui associe les poids et les styles de polices aux chemins d’accès des fichiers de polices correspondants.

Par exemple :

 import { Text } from 'react-native';
import CustomFonts from '../config/Fonts';

const App = () => {
  const CustomFonts = {
    'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
    'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
  };

  async componentDidMount() {
    await Font.loadAsync(CustomFonts);
  }

 return(
    <Text style={styles.text}>
      Hello, world!
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontFamily: 'CustomFont-Regular',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

export default App;
 

Notez que les chemins d’accès et les noms des fichiers de police dans cet exemple ne sont que des caractères de remplacement et que vous devrez les remplacer par les chemins d’accès et les noms de vos fichiers de police réels. En outre, vous devez vous assurer que vos fichiers de police personnalisés sont correctement importés dans votre projet et que leurs chemins d’accès correspondent à ceux définis dans votre objet de famille de polices.

Dernières réflexions sur les polices personnalisées dans React Native

Les polices personnalisées peuvent ajouter une touche unique et personnalisée à votre application React Native. Dans cet article, nous avons vu comment utiliser les polices personnalisées dans React Native, notamment en important des fichiers de polices, en définissant une police personnalisée comme police par défaut pour l’ensemble de l’application, en créant une famille de polices personnalisées avec plusieurs styles de polices et en chargeant des polices personnalisées sans utiliser Expo.

Vérifiez toujours les restrictions de licence des polices que vous utilisez et assurez-vous que vous avez l’autorisation de les utiliser dans votre application. Il est également important de garder à l’esprit que le chargement de plusieurs polices personnalisées peut augmenter la taille de votre application, vous ne devez donc inclure que les polices dont vous avez réellement besoin.