Fähigkeiten react-native-architecture
📦

react-native-architecture

Sicher ⚙️ Externe Befehle🌐 Netzwerkzugriff

Erstelle produktionsreife React Native Apps

Auch verfügbar von: wshobson

Architekturiere React Native Apps mit Expo, Navigationsmustern, nativen Modulen und Offline-First-Synchronisation. Diese Skill bietet produktionsreife Muster für die Entwicklung plattformübergreifender mobiler Anwendungen.

Unterstützt: Claude Codex Code(CC)
🥉 73 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-architecture". Erstelle einen Auth-Provider mit Routenschutz

Erwartetes Ergebnis:

AuthContext mit SecureStore für Token, useAuth-Hook, Routen-Wächter prüfen Segments, Weiterleitung zu Login bei nicht authentifiziertem Zugriff

Verwendung von "react-native-architecture". Offline-First React Query einrichten

Erwartetes Ergebnis:

QueryProvider mit AsyncStorage-Persister, networkMode: offlineFirst, gcTime: 24 Stunden, staleTime: 5 Minuten

Verwendung von "react-native-architecture". EAS Build für iOS konfigurieren

Erwartetes Ergebnis:

eas.json mit development-, preview- und production-Profilen. Development verwendet Simulator, preview verwendet interne Distribution, production aktiviert autoIncrement

Sicherheitsaudit

Sicher
v1 • 2/24/2026

Security audit complete. Static findings are false positives triggered by documentation examples containing terminal commands (npx, eas), documentation URLs (official Expo/React Native sites), and example configuration paths. No actual code execution, network requests to external domains, or real credentials present. Skill is a legitimate React Native architecture guide with safe-to-use code patterns.

2
Gescannte Dateien
707
Analysierte Zeilen
2
befunde
1
Gesamtzahl Audits

Risikofaktoren

⚙️ Externe Befehle (2)
resources/implementation-playbook.md:50-58 resources/implementation-playbook.md:608-633
🌐 Netzwerkzugriff (1)
resources/implementation-playbook.md:667-670
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
33
Community
100
Sicherheit
100
Spezifikationskonformität

Was du bauen kannst

Ein neues mobiles Projekt starten

Initialisiere ein neues Expo-Projekt mit geeigneter Architektur, TypeScript und Navigation-Setup nach industriellen Best Practices.

Authentifizierungs-Flow implementieren

Füge sichere Authentifizierung mit Routen-Wächtern, Token-Speicherung über SecureStore und geschützten Navigationspfaden hinzu.

Offline-First-Datenschicht hinzufügen

Implementiere persistente Daten-Caching mit React Query, AsyncStorage-Synchronisation und optimistischen UI-Updates.

Probiere diese Prompts

Expo-Projekt initialisieren 
Create a new Expo project with TypeScript. Set up the folder structure with app/, components/, hooks/, services/, stores/, and types/ directories. Include Expo Router with auth and tabs groups.
Authentifizierung hinzufügen 
Implement authentication flow in the React Native app using SecureStore for token storage. Create auth context with signIn, signOut, and user state. Add route guards to protect tabs from unauthenticated access.
Offline-Sync konfigurieren 
Set up React Query with AsyncStorage persister for offline-first data. Include network status detection with NetInfo and configure stale times and retry logic for production use.
Native Features integrieren 
Add biometric authentication using expo-local-authentication, push notifications with expo-notifications, and haptic feedback with expo-haptics. Create a clean service abstraction for each.

Bewährte Verfahren

  • Verwende Expo Router dateibasiertes Routing mit Gruppen für Auth- und Tabs-Trennung
  • Memoisiere Komponenten und verwende FlashList für lange Listen, um 60fps zu halten
  • Speichere Tokens und sensible Daten in SecureStore, niemals in AsyncStorage

Vermeiden

  • Tokens oder Geheimnisse in plain AsyncStorage speichern statt in SecureStore
  • Inline-Styles statt StyleSheet.create für Performance
  • Daten direkt im Component-Render fetchen ohne useEffect oder React Query

Häufig gestellte Fragen

Was ist der Unterschied zwischen Expo und Bare React Native?
Expo bietet verwaltete Workflows mit einfacherem Setup und integrierten OTA-Updates. Bare React Native gibt direkten Zugriff auf nativen Code, erfordert aber komplexeres Setup und manuelles natives Linking.
Kann ich diese Skill mit React Native CLI verwenden?
Die Muster konzentrieren sich auf Expo Router und Expo-Bibliotheken. Einige Muster wie Navigation und State-Management gelten auch für Bare React Native, aber Native Module-Beispiele verwenden Expo-Pakete.
Wie handhabe ich den Offline-Modus in React Native?
Verwende React Query mit offlineFirst networkMode und AsyncStorage-Persister. Der queryClient gibt zwischengespeicherte Daten zurück, wenn offline, und synchronisiert Mutationen, wenn wieder online.
Was ist Expo Router?
Expo Router ist eine dateibasierte Routing-Lösung für React Native Apps. Sie verwendet eine Ordnerstruktur in app/ zum Definieren von Routen, ähnlich wie Next.js Pages oder App Directory.
Wie speichere ich Auth-Tokens sicher?
Verwende expo-secure-store, das Daten im iOS Keychain oder Android Keystore speichert. Verwende niemals AsyncStorage für sensible Daten, da sie nicht verschlüsselt ist.
Was ist EAS?
EAS (Expo Application Services) bietet Cloud-Builds, Updates und Submit-Funktionen. EAS Build kompiliert Apps in der Cloud, EAS Update liefert JS-Updates OTA, und EAS Submit verwaltet App Store-Uploads.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-native-architecture

Ref

main

Dateistruktur

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md