Compétences react-native-architecture
📦

react-native-architecture

Sûr ⚙️ Commandes externes🌐 Accès réseau

Créer des applications React Native prêtes pour la production

Également disponible depuis: wshobson

Architecturer des applications React Native avec Expo, des modèles de navigation, des modules natifs et une synchronisation offline-first. Cette compétence fournit des modèles prêts pour la production pour créer des applications mobiles multiplateformes.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "react-native-architecture". Créer un fournisseur d'auth avec protection des routes

Résultat attendu:

AuthContext utilisant SecureStore pour le jeton, hook useAuth, gardes de routes vérifiant les segments, redirection vers la connexion lorsque non authentifié

Utilisation de "react-native-architecture". Configurer React Query offline-first

Résultat attendu:

QueryProvider avec persisteur AsyncStorage, networkMode: offlineFirst, gcTime: 24 heures, staleTime: 5 minutes

Utilisation de "react-native-architecture". Configurer le build EAS pour iOS

Résultat attendu:

eas.json avec les profils development, preview et production. Development utilise le simulateur, preview utilise la distribution interne, production active autoIncrement

Audit de sécurité

Sûr
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
Fichiers analysés
707
Lignes analysées
2
résultats
1
Total des audits

Facteurs de risque

⚙️ Commandes externes (2)
resources/implementation-playbook.md:50-58 resources/implementation-playbook.md:608-633
🌐 Accès réseau (1)
resources/implementation-playbook.md:667-670
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
33
Communauté
100
Sécurité
100
Conformité aux spécifications

Ce que vous pouvez construire

Démarrer un nouveau projet mobile

Initialiser un nouveau projet Expo avec une architecture appropriée, TypeScript et une configuration de navigation en suivant les meilleures pratiques de l'industrie.

Implémenter un flux d'authentification

Ajouter une authentification sécurisée avec des gardes de routes, stockage de jetons via SecureStore et chemins de navigation protégés.

Ajouter une couche de données offline-first

Implémenter la mise en cache persistante des données avec React Query, la synchronisation AsyncStorage et les mises à jour optimistes de l'interface.

Essayez ces prompts

Initialiser un projet Expo 
Créer un nouveau projet Expo avec TypeScript. Configurer la structure des dossiers avec les répertoires app/, components/, hooks/, services/, stores/ et types/. Inclure Expo Router avec les groupes auth et tabs.
Ajouter l'authentification 
Implémenter le flux d'authentification dans l'application React Native en utilisant SecureStore pour le stockage des jetons. Créer un contexte d'auth avec signIn, signOut et l'état utilisateur. Ajouter des gardes de routes pour protéger les onglets des accès non authentifiés.
Configurer la synchronisation offline 
Configurer React Query avec le persisteur AsyncStorage pour les données offline-first. Inclure la détection du statut réseau avec NetInfo et configurer les temps d'obsolescence et la logique de réessai pour une utilisation en production.
Intégrer les fonctionnalités natives 
Ajouter l'authentification biométrique avec expo-local-authentication, les notifications push avec expo-notifications et le retour haptique avec expo-haptics. Créer une abstraction de service propre pour chacune.

Bonnes pratiques

  • Utiliser le routage basé sur les fichiers d'Expo Router avec des groupes pour séparer auth et tabs
  • Mémoriser les composants et utiliser FlashList pour les longues listes pour maintenir 60fps
  • Stocker les jetons et données sensibles dans SecureStore, jamais dans AsyncStorage

Éviter

  • Stocker des jetons ou secrets en clair dans AsyncStorage au lieu de SecureStore
  • Styles en ligne au lieu de StyleSheet.create pour les performances
  • Récupérer des données directement dans le rendu des composants sans useEffect ou React Query

Foire aux questions

Quelle est la différence entre Expo et Bare React Native ?
Expo fournit des workflows gérés avec une configuration plus simple et des mises à jour OTA intégrées. Bare React Native donne un accès direct au code natif mais nécessite une configuration plus complexe et un linking natif manuel.
Puis-je utiliser cette compétence avec React Native CLI ?
Les modèles se concentrent sur Expo Router et les bibliothèques Expo. Certains modèles comme la navigation et la gestion d'état s'appliquent à bare React Native, mais les exemples de modules natifs utilisent des packages Expo.
Comment gérer le mode offline dans React Native ?
Utilisez React Query avec le mode réseau offlineFirst et le persisteur AsyncStorage. Le queryClient renverra les données mises en cache lorsqu'il est offline et synchronisera les mutations lors du retour en ligne.
Qu'est-ce qu'Expo Router ?
Expo Router est une solution de routage basée sur les fichiers pour les applications React Native. Il utilise une structure de dossiers dans app/ pour définir les routes, similaire aux pages Next.js ou à l'App Directory.
Comment stocker des jetons d'auth de manière sécurisée ?
Utilisez expo-secure-store qui stocke les données dans le trousseau iOS ou le Keystore Android. N'utilisez jamais AsyncStorage pour les données sensibles car il n'est pas chiffré.
Qu'est-ce qu'EAS ?
EAS (Expo Application Services) fournit des builds cloud, des mises à jour et des soumissions. EAS Build compile les applications dans le cloud, EAS Update distribue les mises à jour JS en OTA, et EAS Submit gère les téléchargements sur les stores d'applications.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md