Compétences React Native

Meilleures pratiques exhaustives pour les applications React Native et Expo. Contient des règles couvrant plusieurs catégories incluant la performance, les animations, les modèles UI, et les optimisations spécifiques aux plateformes.

Quand appliquer

Consultez ces lignes directrices lors de :

• La construction d'applications React Native ou Expo
• L'optimisation de la performance des listes et du scroll
• L'implémentation d'animations avec Reanimated
• Le travail avec les images et les médias
• La configuration des modules natifs ou des polices
• La structuration de projets monorepo avec dépendances natives

Catégories de règles par priorité

Référence rapide

1. Performance Listes (CRITIQUE)

• list-performance-virtualize - Utilisez FlashList pour les grandes listes
• list-performance-item-memo - Mémoïsez les composants d'éléments de liste
• list-performance-callbacks - Stabilisez les références de callbacks
• list-performance-inline-objects - Évitez les objets de style inline
• list-performance-function-references - Extrayez les fonctions hors du rendu
• list-performance-images - Optimisez les images dans les listes
• list-performance-item-expensive - Déplacez le travail coûteux hors des éléments
• list-performance-item-types - Utilisez les types d'éléments pour les listes hétérogènes

2. Animation (ÉLEVÉE)

• animation-gpu-properties - Animez uniquement transform et opacity
• animation-derived-value - Utilisez useDerivedValue pour les animations calculées
• animation-gesture-detector-press - Utilisez Gesture.Tap à la place de Pressable

3. Navigation (ÉLEVÉE)

• navigation-native-navigators - Utilisez les navigateurs native stack et native tabs plutôt que les navigateurs JS

4. Modèles UI (ÉLEVÉE)

• ui-expo-image - Utilisez expo-image pour toutes les images
• ui-image-gallery - Utilisez Galeria pour les lightbox d'images
• ui-pressable - Utilisez Pressable plutôt que TouchableOpacity
• ui-safe-area-scroll - Gérez les zones sûres dans les ScrollViews
• ui-scrollview-content-inset - Utilisez contentInset pour les en-têtes
• ui-menus - Utilisez les menus contextuels natifs
• ui-native-modals - Utilisez les modales natives si possible
• ui-measure-views - Utilisez onLayout, pas measure()
• ui-styling - Utilisez StyleSheet.create ou Nativewind

5. Gestion d'état (MOYENNE)

• react-state-minimize - Minimisez les souscriptions d'état
• react-state-dispatcher - Utilisez le pattern dispatcher pour les callbacks
• react-state-fallback - Affichez un fallback au premier rendu
• react-compiler-destructure-functions - Déstructurez pour React Compiler
• react-compiler-reanimated-shared-values - Gérez les valeurs partagées avec le compilateur

6. Rendu (MOYENNE)

• rendering-text-in-text-component - Enrobez le texte dans des composants Text
• rendering-no-falsy-and - Évitez falsy && pour le rendu conditionnel

7. Monorepo (MOYENNE)

• monorepo-native-deps-in-app - Conservez les dépendances natives dans le package app
• monorepo-single-dependency-versions - Utilisez des versions uniques entre les packages

8. Configuration (FAIBLE)

• fonts-config-plugin - Utilisez les config plugins pour les polices personnalisées
• imports-design-system-folder - Organisez les imports du design system
• js-hoist-intl - Remontez la création de l'objet Intl

Comment utiliser

Consultez les fichiers de règles individuels pour des explications détaillées et des exemples de code :

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

Chaque fichier de règle contient :

• Une brève explication de son importance
• Un exemple de code incorrect avec explication
• Un exemple de code correct avec explication
• Du contexte supplémentaire et des références

Document complet compilé

Pour le guide complet avec toutes les règles développées : AGENTS.md