React Native & Expo Skills

React Native Skills

Umfassende Best Practices für React Native und Expo-Anwendungen. Enthält Regeln für mehrere Kategorien, die Leistung, Animationen, UI-Muster und plattformspezifische Optimierungen abdecken.

Wann anwenden

Beachte diese Richtlinien, wenn:

• Du React Native oder Expo-Apps erstellst
• Du Listen- und Scroll-Performance optimierst
• Du Animationen mit Reanimated implementierst
• Du mit Bildern und Medien arbeitest
• Du native Module oder Schriftarten konfigurierst
• Du Monorepo-Projekte mit nativen Abhängigkeiten strukturierst

Regel-Kategorien nach Priorität

Priorität	Kategorie	Auswirkung	Präfix
1	Listen-Performance	KRITISCH	list-performance-
2	Animation	HOCH	animation-
3	Navigation	HOCH	navigation-
4	UI-Muster	HOCH	ui-
5	Zustandsverwaltung	MITTEL	react-state-
6	Rendering	MITTEL	rendering-
7	Monorepo	MITTEL	monorepo-
8	Konfiguration	NIEDRIG	fonts-, imports-

Kurzreferenz

1. Listen-Performance (KRITISCH)

• list-performance-virtualize – Verwende FlashList für große Listen
• list-performance-item-memo – Memoisiere Listenelement-Komponenten
• list-performance-callbacks – Stabilisiere Callback-Referenzen
• list-performance-inline-objects – Vermeide Inline-Style-Objekte
• list-performance-function-references – Extrahiere Funktionen außerhalb von Render
• list-performance-images – Optimiere Bilder in Listen
• list-performance-item-expensive – Verschiebe aufwändige Arbeit außerhalb von Elementen
• list-performance-item-types – Verwende Elementtypen für heterogene Listen

2. Animation (HOCH)

• animation-gpu-properties – Animiere nur transform und opacity
• animation-derived-value – Verwende useDerivedValue für berechnete Animationen
• animation-gesture-detector-press – Verwende Gesture.Tap statt Pressable

3. Navigation (HOCH)

• navigation-native-navigators – Verwende nativen Stack und native Tabs anstelle von JS-Navigatoren

4. UI-Muster (HOCH)

• ui-expo-image – Verwende expo-image für alle Bilder
• ui-image-gallery – Verwende Galeria für Bild-Lightboxen
• ui-pressable – Verwende Pressable statt TouchableOpacity
• ui-safe-area-scroll – Behandle sichere Bereiche in ScrollViews
• ui-scrollview-content-inset – Verwende contentInset für Kopfzeilen
• ui-menus – Verwende native Kontextmenüs
• ui-native-modals – Verwende nach Möglichkeit native Modale
• ui-measure-views – Verwende onLayout, nicht measure()
• ui-styling – Verwende StyleSheet.create oder Nativewind

5. Zustandsverwaltung (MITTEL)

• react-state-minimize – Minimiere Zustandsabonnements
• react-state-dispatcher – Verwende das Dispatcher-Muster für Callbacks
• react-state-fallback – Zeige Fallback beim ersten Rendern
• react-compiler-destructure-functions – Destrukturiere für den React Compiler
• react-compiler-reanimated-shared-values – Behandle Shared Values mit dem Compiler

6. Rendering (MITTEL)

• rendering-text-in-text-component – Umfasse Text in Text-Komponenten
• rendering-no-falsy-and – Vermeide falsy && für bedingtes Rendern

7. Monorepo (MITTEL)

• monorepo-native-deps-in-app – Behalte native Abhängigkeiten im App-Paket
• monorepo-single-dependency-versions – Verwende einheitliche Versionen über Pakete hinweg

8. Konfiguration (NIEDRIG)

• fonts-config-plugin – Verwende Konfigurations-Plugins für benutzerdefinierte Schriftarten
• imports-design-system-folder – Organisiere Designsystem-Importe
• js-hoist-intl – Hebe die Erstellung von Intl-Objekten heraus

Verwendung

Lesen einzelne Regeldateien für detaillierte Erklärungen und Codebeispiele:

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

Jede Regeldatei enthält:

• Kurze Erklärung, warum sie wichtig ist
• Falsches Codebeispiel mit Erklärung
• Korrektes Codebeispiel mit Erklärung
• Zusätzlicher Kontext und Verweise

Vollständiges kompiliertes Dokument

Für die vollständige Anleitung mit allen erweiterten Regeln: AGENTS.md