Exemples Expo

expo/examples est la librairie officielle d'Expo avec ~70 exemples d'intégration — des répertoires nommés with-<library> (par ex. with-stripe, with-maps), chacun construit autour d'une librairie 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 le cas typique est un écran unique d'environ 100–200 lignes. Exploitez-les pour trouver le pattern d'intégration canonique — l'ensemble des dépendances, la configuration des plugins app.json, et le câblage minimal qu'Expo maintient face au SDK courant — et adaptez cela à l'application de l'utilisateur. Ne vous attendez pas à transposer une architecture d'application complète depuis eux.

Consultez un exemple avant de développer une intégration à la main. (Les types — full-stack, showcases, starters — sont notés dans ./references/catalog.md.)

Deux modes

Inspiration / adaptation (le plus courant) — l'utilisateur possède déjà un projet. Trouvez l'exemple correspondant, lisez ses fichiers clés, et appliquez le pattern à son code.
Scaffold — terrain vierge. Démarrez un nouveau projet directement depuis l'exemple.

Flux de travail

1. Trouver le bon exemple

Mappez le besoin de l'utilisateur à un nom d'exemple (par ex. paiements → with-stripe, authentification → with-clerk). ./references/catalog.md est un snapshot catégorisé pour un triage rapide — mais il peut diverger, donc confirmez par rapport à la liste en direct :

# Noms d'exemples en direct :
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Alias (renommés) + exemples dépréciés (inactifs/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 les exemples renommés ou inactifs (les exemples dépréciés sont supprimés de l'arborescence 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 jusqu'au chemin moderne. S'il est dans aliases, utilisez la destination.

2a. Mode inspiration — étudier sans toucher au projet de l'utilisateur

Le cas courant : l'utilisateur possède déjà une application et veut voir comment Expo fait quelque chose. Lisez l'exemple comme référence et appliquez les patterns à la main — ne scaffoldisez jamais un exemple par-dessus son projet.

D'abord, listez l'exemple entier en un seul appel. Le code d'intégration est souvent imbriqué (par ex. les routes serveur de Stripe vivent dans app/api/), donc un listing d'un seul niveau manque les fichiers importants :

gh api 'repos/expo/examples/git/trees/master?recursive=1' \
  --jq '.tree[].path | select(startswith("with-stripe/"))'

Puis lisez d'abord les fichiers hautement pertinents : README.md (configuration) → package.json (dépendances) → app.json (plugins de configuration / permissions) → le code d'intégration que le manifeste a révélé → .env (secrets requis). Par 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 que quelques fichiers ? De nombreuses intégrations s'étendent sur des routes serveur, un provider client, et une configuration (Stripe en est un exemple). Passez les appels par fichier — tirez l'exemple entier dans un répertoire jetable/ignoré par git (pas le projet de l'utilisateur) et lisez-le librement avec Grep/Read, puis appliquez à la main :

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # copie nette, sans historique git
# secours sans degit (sparse-checkout, pas le clone complet ~64 MB) :
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 depuis là avec Grep/Read ; supprimez le répertoire de scratch quand vous avez terminé.

2b. Mode scaffold — nouveau projet depuis 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 — de manière non-destructive (critique)

Quand l'utilisateur possède déjà une application, n'ajoutez que ce que l'exemple introduit ; ne remplacez jamais leur configuration.

Alignez les versions — ne copiez pas les versions épinglées. Les exemples suivent le dernier SDK, donc leurs pincements package.json ne correspondront pas à un projet plus ancien. Ajoutez seulement les dépendances manquantes avec npx expo install <pkg> (elle résout les versions SDK-correctes) au lieu de copier les versions exactes.
Fusionnez la configuration, ne la remplacez pas. Ajoutez seulement les plugins et permissions app.json/app.config.* que l'exemple introduit et que l'utilisateur n'a pas — gardez leur bloc de configuration existant intact.
Portez le code d'intégration.
Recréez les variables d'environnement depuis la forme .env de l'exemple — elle contient des espaces réservés, jamais des secrets fonctionnels.

Terminé quand le code d'intégration est porté et chaque dépendance, plugin de configuration, permission, et variable d'environnement dont il a besoin est comptabilisé dans l'application de l'utilisateur — pas seulement quand cela paraît câblé.

Pièges

La branche par défaut est master, pas main (important pour les URLs brutes et 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/<example>.

Compétences associées

Styling Tailwind / NativeWind → expo-tailwind-setup
Composants UI natifs → building-native-ui
Authoring d'un module natif → expo-module
Mise à jour du SDK avant d'adopter un exemple du dernier SDK → upgrading-expo

Références

./references/catalog.md — snapshot catégorisé de la librairie d'exemples pour un triage rapide.

expo-examples