Utiliser un font personnalisé dans React Native version >= 0.60

  • by

Voici la procédure à suivre pour utiliser une police (un font) personnalisée dans une application mobile fait avec React Native.

Tout d’abord, il faut créer le répertoire où sera placé le font. Dans cet exemple, ce sera dans le répertoire app/assets/fonts à partir du répertoire de base du projet. Le nom de fichier du font sera NomDuFont.ttf.

Ensuite, on doit créer le fichier react-native.config.js dans le dossier principal.

Copier les lignes suivantes

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

Dans le terminal éxécuter (ceci copiera le font dans les répertoires de plateforme android et iOS).

react-native link

Utilisation du font dans un composant

const styles = StyleSheet.create({
    maclasse: {
        fontFamily: Platform.OS === "ios" ? 'NomDuFontPourIos' : 'NomDuFont.ttf'
    }
});

Il est à noter qu’Android utilise le nom du fichier alors que iOS utilise le nom de famille du font.

Et voilà!