Exemplos do Expo

Quando Usar

Use esta funcionalidade quando precisar dos projetos de exemplo oficiais do Expo — o repositório expo/examples com cerca de 70 with-* integrações (Stripe, Clerk, Supabase, OpenAI, mapas, Reanimated, SQLite, Skia, NativeWind e mais). Use ao integrar uma biblioteca ou serviço de terceiros em um aplicativo Expo existente e você quiser o canônico,...

expo/examples é a biblioteca oficial do Expo com cerca de 70 exemplos de integração — diretórios nomeados with-<library> (por exemplo, with-stripe, with-maps), cada um construído em torno de uma biblioteca ou serviço. Estes não são aplicativos completos: são projetos gerenciados (sem diretórios ios//android/ — a configuração nativa é feita através de plugins de configuração), e o exemplo típico é uma única tela de cerca de 100–200 linhas. Explore-os para obter o padrão de integração canônico — o conjunto de dependências, plugins de configuração app.json e a fiação mínima que o Expo mantém em relação ao SDK atual — e adapte isso ao aplicativo do usuário. Não espere extrair uma arquitetura de aplicativo deles.

Recorra a um exemplo antes de implementar uma integração manualmente. (Tipos — full-stack, showcases, starters — são observados em ./references/catalog.md.)

Dois modos

1. Inspiração / adaptar (mais comum) — o usuário já tem um projeto. Encontre o exemplo correspondente, leia seus arquivos principais e aplique o padrão ao código deles.
2. Estruturar — projeto novo. Comece um projeto do zero diretamente do exemplo.

Fluxo de Trabalho

1. Encontre o exemplo certo

Mapeie a necessidade do usuário a um nome de exemplo (por exemplo, pagamentos → with-stripe, autenticação → with-clerk). ./references/catalog.md é um instantâneo categorizado para triagem rápida — mas ele se desatualiza, então confirme contra a lista ativa:

# Live example names:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Aliases (renamed) + deprecated (dead/moved) examples — check before recommending:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d

meta.json é a fonte da verdade para o que foi renomeado ou está inativo (exemplos depreciados são removidos da árvore do repositório, mas ainda listados aqui, cada um com um message). Se um exemplo estiver em seu mapa deprecated, não o recomende — siga o message para o caminho moderno. Se estiver em aliases, use o destination.

2a. Modo inspiração — estude sem tocar no projeto do usuário

O caso comum: o usuário já tem um aplicativo e quer ver como o Expo faz algo. Leia o exemplo como referência e aplique os padrões manualmente — nunca estruture um exemplo sobre o projeto deles.

Primeiro, liste todo o exemplo em uma única chamada. O código de integração geralmente é aninhado (por exemplo, as rotas do servidor do Stripe ficam em app/api/), então uma listagem de um nível perde os arquivos importantes:

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

Em seguida, leia os arquivos de alto sinal primeiro: README.md (configuração) → package.json (dependências) → app.json (plugins de configuração / permissões) → o código de integração que o manifesto revelou → .env (segredos necessários). Por arquivo:

gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# No gh? Raw URL (branch is master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts

Lendo mais do que alguns arquivos? Muitas integrações são distribuídas entre rotas de servidor, um provedor de cliente e configuração (o Stripe é). Pule as chamadas por arquivo — baixe todo o exemplo para um diretório descartável/ignorado pelo git (não o projeto do usuário) e leia-o livremente com Grep/Read, depois aplique manualmente:

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # clean copy, no git history
# fallback without degit (sparse-checkout, no full ~64 MB clone):
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)

Leia a partir daí com Grep/Read; exclua o diretório temporário quando terminar.

2b. Modo estruturar — novo projeto a partir de um exemplo

npx create-expo --example with-stripe   # short form:  npx create-expo -e with-stripe
bun create expo --example with-stripe    # with bun

3. Adaptar ao aplicativo do usuário — não destrutivamente (crítico)

Quando o usuário já tem um aplicativo, adicione apenas o que o exemplo introduz; nunca substitua a configuração deles.

…