💻 Développement

react-native-guide

Guide de développement React Native avec Expo et navigation.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- react-native-guide --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } react-native-guide -Launch"

🚀 Déjà installé ?

claude "/react-native-guide"

Ou tapez /react-native-guide dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

React NativeExpoRNreact-navigationnative modulesbridgemobile JavaScriptHermes

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/react-native-guide ~/.claude/skills/

Source : dev-skills/react-native-guide

📖 Manuel

React Native Guide

Workflow

  1. Setup du projet — Choisir entre Expo (Managed Workflow pour démarrage rapide sans configuration native) ou Bare Workflow (accès complet aux fichiers natifs iOS/Android). Configurer Expo Router pour le file-based routing, sélectionner un template TypeScript adapté, et initialiser les outils de qualité (ESLint, Prettier, Husky).
  2. Navigation — Implémenter la navigation avec React Navigation (v6+) : Stack Navigator (transitions d'écrans), Tab Navigator (bottom tabs, top tabs), Drawer Navigator (menu latéral), ou Expo Router (routing basé sur les fichiers, idéal avec Expo). Configurer le deep linking (scheme URI, Universal Links/App Links) et les typages TypeScript des routes.
  3. State management — Sélectionner la solution selon la complexité : React Context + useReducer (simple, sans dépendance), Zustand (léger, API simple, performant), Redux Toolkit (projets complexes, DevTools, middlewares), React Query/TanStack Query (cache serveur, synchronisation, revalidation), ou Jotai (state atomique, simple et composable).
  4. UI et styling — Construire l'interface avec StyleSheet natif (performant, compilé nativement), NativeWind (Tailwind CSS adapté React Native, className), react-native-paper ou React Native Elements (composants Material Design), et react-native-reanimated 3 + Gesture Handler pour les animations fluides 60fps sur le thread UI.
  5. Native modules — Intégrer les fonctionnalités natives : Expo modules (caméra, notifications, biométrie, localisation — couverture 90% des besoins), Turbo Modules (nouvelle architecture, JSI, performances améliorées), ou ponts natifs personnalisés (Swift/Kotlin) pour les modules non disponibles dans l'écosystème Expo.
  6. Data et storage — Gérer la persistance : AsyncStorage (simple, clé-valeur, asynchrone), MMKV (synchrone, très performant, recommandé), expo-sqlite ou op-sqlite pour les bases relationnelles, et Axios ou fetch natif avec interceptors pour les appels API REST, avec gestion d'erreurs et retry automatique.
  7. Performance — Optimiser avec Hermes (moteur JS optimisé, activé par défaut), Flashlist à la place de FlatList (performances 10x supérieures pour les longues listes), React.memo/useMemo/useCallback pour éviter les re-rendus inutiles, Reanimated pour les animations sur le thread UI, et le profiler React DevTools pour identifier les goulots d'étranglement.
  8. Build et déploiement — Automatiser avec EAS Build (Expo Application Services, cloud build iOS/Android sans Mac requis), EAS Update pour les mises à jour OTA (over-the-air) sans passer par les stores, CodePush (Microsoft, alternative OTA), configuration des build profiles (development/preview/production), et publication sur l'App Store et le Play Store avec les métadonnées et captures d'écran.

Règles