Exemples Expo
expo/examples est la bibliothèque officielle d'Expo contenant environ 70 exemples d'intégration — des répertoires nommés with-<bibliothèque> (par exemple with-stripe, with-maps), chacun construit autour d'une bibliothèque ou d'un service. Ce ne sont pas des applications complètes : ce sont des projets gérés (pas de répertoires ios//android/ — la configuration native se fait via des plugins de configuration), et chacun se résume généralement à un seul écran d'environ 100 à 200 lignes. Utilisez-les pour trouver le modèle d'intégration canonique — l'ensemble des dépendances, les plugins de configuration app.json et le câblage minimal qu'Expo maintient avec le SDK actuel — et adaptez-le à l'application de l'utilisateur. N'espérez pas en tirer une architecture d'application complète.
Consultez un exemple avant d'implémenter une intégration manuellement. (Les types — full-stack, vitrines, démarreurs — sont répertoriés dans ./references/catalog.md.)
Deux modes
- Inspiration / adaptation (le plus courant) — l'utilisateur a déjà un projet. Trouvez l'exemple correspondant, lisez ses fichiers clés et appliquez le modèle à son code.
- Scaffold — nouveau projet. Créez un projet frais directement à partir de l'exemple.
Flux de travail
1. Trouver le bon exemple
Faites correspondre le besoin de l'utilisateur à un nom d'exemple (par exemple paiements → with-stripe, authentification → with-clerk). ./references/catalog.md est un instantané catégorisé pour un tri rapide — mais il peut prendre du retard, alors vérifiez par rapport à la liste en direct :
# Noms des exemples en direct :
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Alias (renommés) + exemples obsolètes (morts/déplacés) — vérifiez avant de recommander :
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d
meta.json est la source de vérité pour ce qui est renommé ou mort (les exemples obsolètes sont supprimés de l'arbre du dépôt mais toujours listés ici, chacun avec un message). Si un exemple est dans sa carte deprecated, ne le recommandez pas — suivez le message vers le chemin moderne. S'il est dans aliases, utilisez le destination.
2a. Mode inspiration — étudier sans toucher au projet de l'utilisateur
Le cas courant : l'utilisateur a déjà une application et veut voir comment Expo fait quelque chose. Lisez l'exemple comme référence et appliquez les modèles manuellement — ne créez jamais un exemple par-dessus son projet.
D'abord, listez l'intégralité de l'exemple en un seul appel. Le code d'intégration est souvent imbriqué (par exemple, les routes serveur de Stripe se trouvent dans app/api/), donc un listing à un seul niveau omet les fichiers importants :
gh api 'repos/expo/examples/git/trees/master?recursive=1' \
--jq '.tree[].path | select(startswith("with-stripe/"))'
Lisez ensuite les fichiers à forte valeur en premier : README.md (configuration) → package.json (dépendances) → app.json (plugins de configuration / permissions) → le code d'intégration révélé par le manifeste → .env (secrets requis). Pour chaque fichier :
gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# Pas de gh ? URL brute (la branche est master) :
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts
Vous lisez plus de deux fichiers ? De nombreuses intégrations sont réparties entre les routes serveur, un fournisseur client et la configuration (c'est le cas de Stripe). Évitez les appels fichier par fichier — extrayez l'intégralité de l'exemple dans un répertoire jetable/ignoré par git (pas le projet de l'utilisateur) et lisez-le librement avec Grep/Read, puis appliquez manuellement :
npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # copie propre, sans historique git
# alternative sans degit (sparse-checkout, sans clone complet ~64 Mo) :
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
&& (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)
Lisez à partir de là avec Grep/Read ; supprimez le répertoire temporaire une fois terminé.
2b. Mode scaffold — nouveau projet à partir d'un exemple
npx create-expo --example with-stripe # forme courte : npx create-expo -e with-stripe
bun create expo --example with-stripe # avec bun
3. Adapter à l'application de l'utilisateur — sans destruction (critique)
Quand l'utilisateur a déjà une application, n'ajoutez que ce que l'exemple introduit ; ne remplacez jamais sa configuration existante.
- Alignez les versions — ne copiez pas les versions figées. Les exemples sont basés sur le dernier SDK, donc leurs versions
package.jsonfigées ne correspondront pas à un projet plus ancien. Ajoutez seulement les dépendances manquantes avecnpx expo install <paquet>(qui résout les versions correctes pour le SDK) au lieu de copier les versions exactes. - Fusionnez la configuration, ne la remplacez pas. Ajoutez uniquement les plugins et permissions
app.json/app.config.*que l'exemple introduit et que l'utilisateur n'a pas — conservez son bloc de configuration existant intact. - Portez le code d'intégration.
- Recréez les variables d'environnement à partir du fichier
.envde l'exemple — il contient des espaces réservés, jamais de secrets réels.
Terminé lorsque le code d'intégration est porté et que chaque dépendance, plugin de configuration, permission et variable d'environnement nécessaire est pris en compte dans l'application de l'utilisateur — pas quand elle semble simplement câblée.
Points d'attention
- La branche par défaut est
master, pasmain(important pour les URL brutes et le sparse checkout). - Déploiement en un clic. Chaque exemple a une URL de lancement :
https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<exemple>.
Compétences connexes
- Composants d'interface utilisateur natifs (package @expo/ui) →
expo-ui - Style et écrans à l'apparence native →
expo-native-ui - Navigation et routage →
expo-router - Création d'un module natif →
expo-module - Mise à jour du SDK avant d'adopter un exemple basé sur le dernier SDK →
expo-upgrade
Références
./references/catalog.md— instantané catégorisé de la bibliothèque d'exemples pour un tri rapide.
Soumettre un retour
Si vous rencontrez des erreurs, des informations trompeuses ou obsolètes dans cette compétence, signalez-les pour qu'Expo puisse s'améliorer :
npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<retour actionnable>"
Ne soumettez un retour que lorsque vous avez quelque chose de spécifique et actionnable à signaler. Incluez autant de contexte pertinent que possible. Si un agent IA a échoué de manière répétée ou si l'utilisateur a dû reprendre une tâche Expo, chargez la compétence expo-skill-feedback et suivez son flux d'évaluation de candidat au lieu de réutiliser la commande ci-dessus.