O que Expo Exemplos faz?
expo/examples é a biblioteca oficial de aproximadamente 70 exemplos de integração do Expo — diretórios nomeados with-<biblioteca> (ex.: 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 pastas ios//android/ — a configuração nativa é feita via plugins de configuração), e cada um normalmente consiste em uma única tela de ~100–200 linhas. Explore-os em busca do padrão canônico de integração — o conjunto de dependências, os plugins de configuração do app.json e a fiação mínima que o Expo mantém alinhada com o SDK atual — e adapte-o ao aplicativo do usuário. Não espere extrair uma arquitetura completa de aplicativo a partir deles.
Recorra a um exemplo antes de tentar fazer uma integração manual. (Os tipos — pilha completa, vitrines, iniciadores — estão anotados em ./references/catalog.md.)
Dois modos
- Inspiração / adaptação (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 do usuário.
- Estruturação — projeto novo. Crie um projeto do zero diretamente a partir do exemplo.
Fluxo de trabalho
1. Encontre o exemplo certo
Mapeie a necessidade do usuário para um nome de exemplo (ex.: pagamentos → with-stripe, autenticação → with-clerk). O arquivo ./references/catalog.md é um instantâneo categorizado para triagem rápida — mas ele pode ficar desatualizado, então confirme com a lista ativa:
# Nomes dos exemplos ativos:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Apelidos (renomeados) + exemplos obsoletos (mortos/movidos) — verifique antes de recomendar:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d
O meta.json é a fonte da verdade para o que foi renomeado ou está obsoleto (exemplos obsoletos são removidos da árvore do repositório, mas ainda listados aqui, cada um com uma message). Se um exemplo estiver no mapa deprecated, não o recomende — siga a message para o caminho moderno. Se estiver em aliases, use o destination.
2a. Modo inspiração — estude sem mexer 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 execute a estruturação de um exemplo sobre o projeto existente.
Primeiro, liste o exemplo inteiro em uma única chamada. O código de integração geralmente está aninhado (ex.: as rotas de servidor do Stripe ficam em app/api/), então uma listagem de um nível só pode perder arquivos importantes:
gh api 'repos/expo/examples/git/trees/master?recursive=1' \
--jq '.tree[].path | select(startswith("with-stripe/"))'
Depois, leia primeiro os arquivos de maior sinal: README.md (configuração) → package.json (dependências) → app.json (plugins de configuração / permissões) → o código de integração revelado pelo manifesto → .env (segredos necessários). Para cada arquivo:
gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# Sem gh? URL crua (branch é master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts
Precisa ler mais de dois arquivos? Muitas integrações estão espalhadas por rotas de servidor, um provedor cliente e configuração (Stripe é um exemplo). Evite chamadas arquivo por arquivo — baixe o exemplo inteiro em um diretório descartável/ignorado pelo git (não no projeto do usuário) e leia livremente com Grep/Read, depois aplique manualmente:
npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # cópia limpa, sem histórico git
# alternativa sem degit (sparse-checkout, sem clone completo de ~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)
Leia a partir daí com Grep/Read; remova o diretório temporário ao terminar.
2b. Modo estruturação — projeto novo a partir de um exemplo
npx create-expo --example with-stripe # forma abreviada: npx create-expo -e with-stripe
bun create expo --example with-stripe # com bun
3. Adapte ao aplicativo do usuário — de forma não destrutiva (crítico)
Quando o usuário já tem um aplicativo, adicione apenas o que o exemplo introduz; nunca sobrescreva a configuração existente.
- Alinhe as versões — não copie versões fixadas. Os exemplos acompanham o SDK mais recente, portanto suas versões fixadas no
package.jsonnão serão compatíveis com projetos mais antigos. Adicione apenas as dependências faltantes comnpx expo install <pacote>(que resolve as versões corretas para o SDK) em vez de copiar versões exatas. - Mescle a configuração, não a substitua. Adicione apenas os plugins e permissões do
app.json/app.config.*que o exemplo introduz e que o usuário ainda não possui — mantenha o bloco de configuração existente intacto. - Transfira o código de integração.
- Recrie as variáveis de ambiente a partir da estrutura do
.envdo exemplo — ele contém apenas placeholders, nunca segredos reais.
Concluído quando o código de integração foi transferido e cada dependência, plugin de configuração, permissão e variável de ambiente necessária estiver presente no aplicativo do usuário — e não quando apenas parece estar conectado.
Armadilhas
- A branch padrão é
master, nãomain(importante para URLs cruas e sparse checkout). - Implantação com um clique. Cada exemplo tem uma URL de inicialização:
https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<exemplo>.
Skills relacionados
- Componentes de UI nativos (pacote @expo/ui) →
expo-ui - Estilização e telas com aparência nativa →
expo-native-ui - Navegação e roteamento →
expo-router - Criação de um módulo nativo →
expo-module - Atualize o SDK antes de adotar um exemplo do SDK mais recente →
expo-upgrade
Referências
./references/catalog.md— instantâneo categorizado da biblioteca de exemplos para triagem rápida.
Enviando feedback
Se você encontrar erros, informações enganosas ou desatualizadas neste skill, reporte para que o Expo possa melhorar:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<feedback acionável>"
Envie apenas quando tiver algo específico e acionável para relatar. Inclua o máximo de contexto relevante possível. Se um agente de IA falhou repetidamente ou o usuário precisou assumir uma tarefa do Expo, carregue o skill expo-skill-feedback e siga o fluxo de avaliação de candidatos em vez de reutilizar o comando acima.