Fähigkeiten react-native-dev
📱

react-native-dev

Sicher ⚙️ Externe Befehle

React Native und Expo Apps entwickeln

Die Entwicklung mobiler Apps mit React Native erfordert das Navigieren durch komplexe Entscheidungen bei Komponenten, Zustandsverwaltung, Animationen und Bereitstellung. Dieses Skill bietet einen strukturierten Entwicklungsleitfaden mit bewährten Mustern, empfohlenen Bibliotheken und produktionsreifen Beispielen für Expo- und React Native-Projekte.

Unterstützt: Claude Codex Code(CC)
🥉 76 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "react-native-dev". Erstelle ein Tab-Navigation-Layout mit Home-, Such- und Profil-Tabs mit Expo Router.

Erwartetes Ergebnis:

  • Eine Tab-Layout-Datei (app/(tabs)/_layout.tsx) mit Tabs-Komponente von expo-router
  • Drei Tab-Bildschirmdefinitionen mit Ionicons-Icons
  • Header-Konfiguration mit Large Title-Unterstützung und gestaltetem Header
  • Einzelne Routendateien: app/(tabs)/home.tsx, app/(tabs)/search.tsx, app/(tabs)/profile.tsx

Verwendung von "react-native-dev". Zeige, wie man Zustand mit Persist-Middleware für Benutzereinstellungen verwendet.

Erwartetes Ergebnis:

  • Eine Zustand-Store-Definition mit create und Persist-Middleware
  • Typsichere State-Interface mit Theme-, Sprach- und Benachrichtigungseinstellungen
  • Verwendung des Selector-Patterns in Komponenten, um unnötige Re-Renders zu verhindern
  • Storage-Backend-Konfiguration mit MMKV oder AsyncStorage

Sicherheitsaudit

Sicher
v1 • 4/16/2026

This skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.

12
Gescannte Dateien
3,050
Analysierte Zeilen
1
befunde
1
Gesamtzahl Audits

Risikofaktoren

⚙️ Externe Befehle (4)
SKILL.md:88-98 references/animations.md:14-16 references/testing.md:7-26 references/networking.md:337-344
Auditiert von: claude

Qualitätsbewertung

45
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Ein neues Expo-Projekt von Grund auf starten

Ein Entwickler muss eine produktionsreife React Native-App mit korrekter Projektstruktur, Routing, Zustandsverwaltung und CI/CD-Pipeline aufsetzen.

Komplexe Animationen und Gesten implementieren

Ein Entwickler muss flüssige Animationen, Gestensteuerung und scrollgesteuerte Effekte mit Reanimated 3 und Gesture Handler hinzufügen.

App-Performance optimieren und auf Release vorbereiten

Ein Team muss seine App profilieren, Scroll-Ruckeln beheben, die Bundle-Größe reduzieren, EAS Builds konfigurieren und CI/CD für die Bereitstellung im App Store und Play Store einrichten.

Probiere diese Prompts

Anfänger: Neues Expo-Projekt erstellen 
Richte ein neues Expo-Projekt mit TypeScript ein. Füge Expo Router für die Navigation mit einem Tab-Layout, FlashList für Listen, expo-image für Bilder und Zustand für die Zustandsverwaltung hinzu. Zeige die empfohlene Projektstruktur.
Anfänger: Login-Formular erstellen 
Erstelle ein Login-Formular mit React Hook Form und Zod-Validierung. Füge E-Mail- und Passwort-Felder mit Fehlermeldungen, einen Submit-Button mit Ladezustand und API-Integration mit einem Fetch-Wrapper hinzu.
Fortgeschritten: Animierte Übergänge hinzufügen 
Implementiere einen Shared Element-Übergang zwischen einer Listenansicht und einer Detailansicht mit Reanimated 3. Die Liste verwendet FlashList mit memoisierten Elementen. Beim Antippen eines Elements animiere es mit einem Fade- und Scale-Übergang zum Detailbildschirm.
Experte: CI/CD-Pipeline konfigurieren 
Richte eine EAS Build und Submit-Pipeline mit GitHub Actions ein. Füge separate Build-Profile für Entwicklung und Produktion, automatische App Store-Übermittlung bei Merges in den Main Branch und Umgebungsvariablen-Verwaltung für verschiedene Stages hinzu.

Bewährte Verfahren

  • Verwende immer FlashList statt FlatList für Listen und expo-image statt RN Image für bessere Performance und Caching
  • Animiere mit Reanimated nur transform- und opacity-Eigenschaften, um Animationen GPU-komponiert zu halten und Layout-Neuberechnungen zu vermeiden
  • Verwende das EXPO_PUBLIC_-Präfix für clientseitige Umgebungsvariablen und behalte serverexklusive Geheimnisse ohne das Präfix in API-Routen

Vermeiden

  • FlatList ohne memoisierte Elemente oder RN Image ohne Caching für Produktionslisten und Bildergalerien verwenden
  • Importe aus Barrel-Dateien (index.ts), was die Bundle-Größe erhöht – immer direkt aus den Quellmodulen importieren
  • Platform.OS für Plattformprüfungen verwenden statt process.env.EXPO_OS und useContext statt React.use für React 18

Häufig gestellte Fragen

Wann sollte ich Expo Go gegenüber einem eigenen Build mit EAS Build verwenden?
Verwende Expo Go für schnelles Prototyping und Testen mit standardmäßigen Expo-Modulen. Verwende EAS Build, wenn dein Projekt eigene native Module, spezifische native SDK-Versionen, Apple Targets oder Drittanbieter-Module erfordert, die in Expo Go nicht verfügbar sind.
Welche Zustandsverwaltungsbibliothek sollte ich für mein Projekt wählen?
Verwende useState oder useReducer für lokalen UI-State. Wähle Zustand oder Jotai für gemeinsamen Anwendungszustand über Komponenten hinweg. Verwende React Query für Server- und asynchrone Daten mit Caching. Vermeide Redux, es hat deine App extrem komplexe Zustandsanforderungen.
Wie gehe ich in einer Expo-App sicher mit Umgebungsvariablen um?
Variablen mit dem Präfix EXPO_PUBLIC_ werden in das Client-Bundle eingebettet und sind für öffentliche Konfigurationen wie API-URLs sicher. Variablen ohne das Präfix (wie LLM_API_KEY) laufen nur auf serverseitigen API-Routen und erreichen niemals den Client. Setze Produktionsgeheimnisse über eas env-create in CI/CD.
Warum empfiehlt dieses Skill FlashList statt FlatList?
FlashList von Shopify bietet eingebautes View-Recycling, was den Speicherverbrauch erheblich reduziert und Scroll-Ruckeln bei langen Listen verhindert. FlatList rendert alle sichtbaren Elemente ohne Recycling und verursacht Performance-Probleme bei Listen mit mehr als 20 Elementen.
Wie teste ich React Native-Komponenten effektiv?
Verwende Jest mit React Native Testing Library für Unit- und Komponententests. Teste benutzersichtbares Verhalten (Textinhalt, Button-Interaktionen) statt Implementierungsdetails. Für End-to-End-Tests verwende Maestro, was keine Build-Konfiguration erfordert und mit Expo funktioniert.
Was ist die empfohlene Projektstruktur für eine skalierbare React Native-App?
Organisiere Code in: app/ für Expo Router-Routen, components/ui/ für atomare Komponenten, components/shared/ für zusammengesetzte Komponenten, stores/ für Zustandsverwaltung, services/ für API- und Native Module-Wrapper, hooks/ für Custom Hooks, constants/ für Theme-Werte und types/ für TypeScript-Definitionen. Verwende Pfad-Aliase, um fragile relative Imports zu vermeiden.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/MiniMax-AI/skills/tree/main/skills/react-native-dev

Ref

main

Dateistruktur

📁 references/

📄 animations.md

📄 components.md

📄 engineering.md

📄 forms.md

📄 native-capabilities.md

📄 navigation.md

📄 networking.md

📄 performance.md

📄 state-management.md

📄 styling.md

📄 testing.md

📄 SKILL.md