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à!