Comment configurer Nativewind dans un projet React Native, qui utilise Expo et Expo Router

Mise en ligne : samedi 24 août 2024

image de Comment configurer Nativewind dans un projet React Native, qui utilise Expo et Expo Router}

Création du projet

NativeWind nous permettra d'utiliser Tailwind CSS pour styliser nos composants dans React Native. Les composants stylisés peuvent être partagés entre toutes les plates-formes React Native, en utilisant le meilleur moteur de style pour chaque plate-forme :

  • CSS StyleSheet sur le web
  • StyleSheet.create pour native.

Ses objectifs sont de fournir une expérience de style cohérente sur toutes les plates-formes, en améliorant l'expérience utilisateur des développeurs, les performances des composants et la maintenabilité du code.

1. Mise en place de NativeWind

Utilisation d'un template

Nous allons utiliser un template, afin de gagner du temps dans la création du projet et de sa configuration.

bunx create-expo-app -e with-router-tailwind

Nous allons utiliser bun, mais vous pouvez, bien entendu, utiliser npm ou yarn, si vous préférez.

Ce template va nous permettre d'éviter d'avoir à setup le projet de base. Si vous partez d'un projet existant, ou que vous désirez vous-mêmes procéder aux premières étapes de configuration, voici ce qu'il vous faudra faire.

Installation manuelle

Je vous renvoie vers la documentation officiel de NativeWind, qui vous explique, pas à pas, comment configurer votre projet : configuration manuelle de NativeWind

2. Utilisation de NativeWind

Le template utilisé contient déjà une page stylisée grâce à NativeWind, ce qui nous permet de constater que c'est vraiment du tailwind et que ça fonctionne parfaitement.

Il y a une classe utilitaire très intéressante, c'est native, elle permet de ne cibler que les systèmes Android et iOS, et d'exclure donc le web. Si nous affichons notre projet sur le web, avec la commande w, nous voyons que les styles de notre application sont corrects. Le Footer, par exemple est caché sur iOS et Android, car nous lui appliquons native:hidden.

3. Le dark mode avec NativeWind

Pour utiliser le dark mode, rien de plus simple, il suffit de rajouter dark: devant la classe utilitaire pour conditionner son utilisation au dark mode. Prenons notre code et faisons quelques modifications. Mettons un background noir à notre application, lorsque nous sommes en dark mode.

app/index.tsx
export default function Page() {
	return (
		<View className="flex flex-1 dark:bg-black">
			<Header />
			<Content />
			<Footer />
		</View>
	);
}

Nous ne voyons plus notre titre et notre Header, ce qui est logique.

Changeons donc la couleur du texte de notre titre, lorsque nous sommes en dark mode, avec dark:text-yellow-500 par exemple.

app/index.tsx
<Text
	role="heading"
	className="text-3xl text-center native:text-5xl font-bold tracking-tighter sm:text-6xl md:text-5xl lg:text-6xl dark:text-yellow-500">
	Welcome to Project ACME
</Text>

Modifions également notre Header, en ajoutant dark:text-slate, par exemple, à tous ses Links.

Vous pouvez constater, également, qu'il y a une jolie animation, lorsqu'on switch du light au dark mode.

4. Conclusion

Il y aurait énormément de choses à dire sur NativeWind, et nous n'avons qu'effleurez les possibilités que cette librairie nous offre. Pour améliorer encore notre développer expérience, il existe des bibliothèques de composants, tels que :

5. Quelques liens utiles