Technologie React Native
Le kit React Native du Design System de l'autonomie est conçu pour fonctionner sur les technologies Expo Go et React Native CLI.
Une fois en place, vous pouvez installer le Design System ainsi que ces dépendances.
Installation du Design System
Pour utiliser le Design System de l'autonomie en React Native, il vous faut deux packages:
- @ds-autonomie/assets : contient tous les design tokens nécessaire pour styliser une application ainsi que les polices de caractères.
- @ds-autonomie/react-native : contient tout les composants du design système React Native.
Pour ajouter ces dépendances à votre projet, lancer la commande suivante:
pnpm install --save @ds-autonomie/assets @ds-autonomie/react-native
Ligne de commande à lancer pour ajouter les dépendances
Dépendances
Il est nécessaire d'installer ces dépendances afin que le Design System fonctionne correctement.
Configuration des animations
La plupart de nos composants comportent des animations, et se basent sur react-native-reanimated pour un rendu correct. Certaines étapes sont nécessaires afin d'utiliser correctement le design system.
Veuillez suivre les étapes d'installation fournies par la documentation officielle de react-native-reanimated.
Configuration des icônes
Nos icônes se basent sur la bibliothèque react-native-vector-icons pour un rendu correct. Si vous utilisez Expo ou React Native, certaines étapes supplémentaires sont nécessaires.
Expo
Sur un projet Expo, il est nécessaire d'installer @expo/vector-icons afin de pouvoir utiliser correctement les icônes.
pnpm install --save @expo/vector-icons
Ligne de commande à lancer pour permettre l'utilisation des icônes
React Native
Installer le package:
pnpm install --save react-native-vector-icons
Ligne de commande à utiliser pour permettre l'utilisation des icônes
En fonction de la plateforme visée (iOS/Android/Windows), suivez les instructions de configuration appropriées.
iOS
Sur iOS, il est nécessaire de suivre les étapes indiqués par la librairie react-native-vector-icons que vous pouvez retrouver ici.
Android
Sur Android, vous devez suivre les étapes données par la librairie react-native-vector-icons que vous pouvez retrouver ici.
Installation des polices de caractères
Le Système de Design de l'Autonomie nécessite les polices Cabin et Montserrat.
Vous aurez besoin des styles suivants:
|
Nom |
Style |
Graisse |
|---|---|---|
|
Cabin |
Regular, Italic |
400, 700 |
|
Montserrat |
Regular, Italic |
400, 700 |
Vous pourrez trouver les fichiers dans le package @ds-autonomie/assets au chemin suivant: @ds-autonomie/assets/fonts.
Exemple:
Cabin bold italic (Cabin-BoldItalic.ttf) => fontFamily: "Cabin-BoldItalic"
Utilisation des fonts en fonction de la technologie utilisée :
Expo
Dans le cadre d'une application Expo, l'utilisation des fonts se fait via le package expo-fonts. Suivez la documentation pour la mise en place sur votre projet.
Le Design System fourni une hook utilitaire pour la configuration des polices:
import { useFonts } from '@ds-autonomie/react-native';
function App() {
const [fontsLoaded] = useFonts({
'Cabin-Regular': require('@ds-autonomie/assets/fonts/cabin/Cabin-Regular.ttf'),
'Cabin-Bold': require('@ds-autonomie/assets/fonts/cabin/Cabin-Bold.ttf'),
'Cabin-Italic': require('@ds-autonomie/assets/fonts/cabin/Cabin-Italic.ttf'),
'Cabin-BoldItalic': require('@ds-autonomie/assets/fonts/cabin/Cabin-BoldItalic.ttf'),
'Montserrat-Regular': require('@ds-autonomie/assets/fonts/montserrat/Montserrat-Regular.ttf'),
'Montserrat-Bold': require('@ds-autonomie/assets/fonts/montserrat/Montserrat-Bold.ttf'),
'Montserrat-Italic': require('@ds-autonomie/assets/fonts/montserrat/Montserrat-Italic.ttf'),
'Montserrat-BoldItalic': require('@ds-autonomie/assets/fonts/montserrat/Montserrat-BoldItalic.ttf'),
});
// ...
return (
<View>
<Text style={{ fontFamily: 'Montserrat' }}>Montserrat</Text>
<Text style={{ fontFamily: 'CabinBold' }}>CabinBold</Text>
</View>
);
}
React Native
Dans le cadre d'une application React Native, nous vous recommandons d'utiliser l'utilitaire react-native-assets.
Ajouter le chemin vers les polices dans votre fichier react-native.config.js comme par exemple :
module.exports = {
assets: [
'./node_modules/@ds-autonomie/assets/fonts/'
]
}
Ensuite, lier les assets avec votre application:
$ npx react-native-assets