Installation de polices locales sur React Native

1.Identifier via Figma Toutes les Polices Utilisées et Tous les Poids

Avant de plonger dans l'installation des polices, identifions les polices utilisées dans votre application et leurs différents poids. Figma est un excellent outil pour cette tâche.

1. Ouvrez votre projet dans Figma.
2. Explorez les différentes pages de votre maquette.
3. Sélectionnez le texte pour identifier la police et son poids.
4. Notez toutes les polices et poids utilisés dans votre application.

2.Télécharger via Google Fonts

Maintenant que vous avez identifié les polices nécessaires, le prochain pas consiste à les télécharger depuis Google Fonts.

1. Accédez à Google Fonts.
2. Recherchez les polices que vous avez identifiées dans votre Figma.
3. Sélectionnez les poids de chaque police dont vous avez besoin.
4. Cliquez sur "Sélectionner cette police" pour chaque police choisie.
5. Cliquez sur l'icône panier en haut à droite pour ouvrir le panneau de téléchargement.
6. Téléchargez les polices dans un dossier dédié sur votre machine.

3.Configuration des Assets dans React Native

Maintenant que vous avez téléchargé les polices, passons à la configuration des assets dans votre projet React Native.

1. Créez un dossier "assets" à la racine de votre projet.
2. Dans le dossier "assets", créez un sous-dossier "fonts".
3. Copiez les fichiers de police téléchargés depuis Google Fonts dans le dossier "fonts".

Maintenant, ouvrez le fichier 'react-native.config.js' à la racine de votre projet et ajoutez la configuration des polices :

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

Après avoir intégré avec succès les fichiers de police dans notre projet React Native, l'étape suivante cruciale consiste à lier ces ressources pour les rendre accessibles dans l'ensemble du projet. Suivez les étapes ci-dessous pour lier les polices et commencer à les utiliser dans vos fichiers de projet React Native: 1. Ouvrez votre terminal et exécutez la commande suivante :

npx react-native-asset

2. Une fois exécuter, vous devriez voir un message de confirmation dans votre terminal, indiquant que les ressources ont été liées avec succès. comme cet exemple:

3. Dans votre fichier App.js, vous pouvez désormais utiliser les polices liées. Voici un exemple de code :

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.quicksandRegular}>
        Ce texte utilise la police Quicksand Regular
      </Text>
      <Text style={styles.quicksandLight}>
        Ce texte utilise la police Quicksand Light
      </Text>
      <Text style={styles.ralewayThin}>
        Ce texte utilise la police Raleway ThinItalic
      </Text>
      <Text style={styles.ralewayItalic}>
        Ce texte utilise la police Raleway Italic
      </Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'lavande',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  quicksandLight: {
    fontFamily: 'Quicksand-Light',
    fontSize: 20,
  },
  quicksandRegular: {
    fontFamily: 'Quicksand-Regular',
    fontSize: 20,
  },
  ralewayItalic: {
    fontFamily: 'Raleway-Italic',
    fontSize: 20,
  },
  ralewayThin: {
    fontFamily: 'Raleway-ThinItalic',
    fontSize: 20,
  },
});

En suivant toutes ces étapes, vous pouvez installer et utiliser des polices locales dans votre projet React Native, offrant ainsi une personnalisation accrue de l'interface utilisateur. Cette approche améliorera l'esthétique globale de votre application et contribuera à une expérience utilisateur plus immersive.

Assurez-vous de suivre ces étapes méticuleusement pour garantir le succès de l'intégration des polices dans votre application React Native.