Busque em todas as páginas da documentação
Um monorepo Turborepo permite que vários aplicativos Expo compartilhem a configuração do TypeScript, regras do ESLint e um pacote de UI, enquanto o Turbo armazena em cache tarefas de lint e typecheck entre CI. O Expo SDK 57 detecta workspaces automaticamente - você se concentra nos limites dos pacotes, não na configuração do Metro.
Cartão de receita de referência rápida - pronto para copiar e colar.
mkdir mobile-monorepo && cd mobile-monorepo
pnpm init
# Raízes do Workspace (crie pnpm-workspace.yaml - veja Exemplo em Funcionamento)
npx create-expo-app@latest apps/mobile --template default@sdk-57 --yes
mkdir -p packages/ui/src
pnpm add turbo -Dw
# Vincule o pacote UI ao aplicativo (de apps/mobile/package.json)
# "@repo/ui": "workspace:*"
pnpm install
pnpm turbo run typecheck
pnpm turbo run dev --filter=mobileQuando usar isso:
# pnpm-workspace.yaml
packages:
- "apps/*"
- "packages/*"// package.json (root)
{
"name": "mobile-monorepo",
"private": true,
"scripts": {
"dev": "turbo run dev",
"lint": "turbo run lint",
"typecheck": "turbo run typecheck",
"doctor": "turbo run doctor"
},
"devDependencies": {
"turbo": "^2.5.0",
"typescript": "^5.8.0"
},
"packageManager": "pnpm@10.0.0",
"engines": {
"node": ">=20"
}
}// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"dev": {
"cache": false,
"persistent": true
},
"lint": {
"dependsOn": ["^lint"]
},
"typecheck": {
"dependsOn": ["^typecheck"]
},
"doctor": {
"cache": false
}
}
}// apps/mobile/package.json
{
"name": "mobile",
"private": true,
"main": "expo-router/entry",
"scripts": {
"dev": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"lint": "expo lint",
"typecheck": "tsc --noEmit",
"doctor": "expo-doctor"
},
"dependencies": {
"@repo/ui": "workspace:*",
"expo": "~57.0.4",
"expo-router": "~6.0.8",
"react": "19.2.3",
"react-native": "0.86.0"
},
"devDependencies": {
"@repo/typescript-config": "workspace:*",
"typescript": "^5.8.0"
}
}// packages/ui/package.json
{
"name": "@repo/ui",
"version": "0.0.0",
"private": true,
"exports": {
"./button": "./src/button.tsx",
"./screen": "./src/screen.tsx"
},
"scripts": {
"lint": "eslint . --max-warnings 0",
"typecheck": "tsc --noEmit"
},
"peerDependencies": {
"react": "^19.2.3",
"react-native": "0.86.0"
},
"devDependencies": {
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.0.0",
"react": "19.2.3",
"react-native": "0.86.0",
"typescript": "^5.8.0"
}
}// packages/ui/src/button.tsx
import type { ReactNode } from "react";
import { Pressable, StyleSheet, Text, type PressableProps } from "react-native";
type ButtonProps = PressableProps & {
children: ReactNode;
variant?: "primary" | "secondary";
};
export function Button({ children, variant = "primary", style, ...rest }: ButtonProps) {
return (
<Pressable style={[styles.base, variant === "primary" ? styles.primary : styles.secondary, style]} {...rest}>
<Text style={styles.label}>{children}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
base: { paddingVertical: 12, paddingHorizontal: 20, borderRadius: 10, alignItems: "center" },
primary: { backgroundColor: "#2563eb" },
secondary: { backgroundColor: "#e2e8f0" },
label: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
});// apps/mobile/app/(tabs)/index.tsx
import { Button } from "@repo/ui/button";
import { StyleSheet, Text, View } from "react-native";
export default function HomeScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>UI Compartilhada de @repo/ui</Text>
<Button variant="primary" onPress={() => {}}>
Continuar
</Button>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16, padding: 24 },
title: { fontSize: 20, fontWeight: "700" },
});// apps/mobile/metro.config.js - SDK 52+ default geralmente é suficiente
const { getDefaultConfig } = require("expo/metro-config");
module.exports = getDefaultConfig(__dirname);O que isso demonstra:
pnpm-workspace.yaml declara apps/* e packages/* - o Expo detecta o monorepo e configura o Metro automaticamente no SDK 57.workspace:* cria um link simbólico para @repo/ui em apps/mobile/node_modules - o Metro agrupa o código-fonte .tsx do pacote sem uma etapa de build separada.turbo.json executa typecheck e lint com ordenação de dependência ^ - pacotes compartilhados são verificados antes dos aplicativos.peerDependencies em react e react-native em @repo/ui evitam cópias duplicadas do renderizador dentro do pacote.metro.config.js mínimo - sem watchFolders manuais ao usar expo/metro-config no SDK 52+.apps/mobile dependa de pacotes locais via symlinks em vez de publicações no npm.package.json de cada workspace e armazena em cache as saídas das tarefas por hash de entrada.watchFolders / extraNodeModules manuais são necessários apenas para configurações legadas ou layouts não padrão.transpilePackages; o Babel processa o código vinculado através da configuração do aplicativo.apps/mobile), mas instala dependências da raiz do monorepo quando configurado com o diretório de trabalho correto.mobile-monorepo/
├── apps/
│ ├── mobile/ # Aplicativo consumidor Expo SDK 57 (default@sdk-57)
│ └── admin/ # segundo aplicativo opcional
├── packages/
│ ├── ui/ # primitivas compartilhadas (Button, Screen)
│ ├── typescript-config/ # bases de tsconfig compartilhadas
│ └── eslint-config/ # regras de lint compartilhadas
├── pnpm-workspace.yaml
├── turbo.json
└── package.json| Diretório | Possui | Não possui |
|---|---|---|
apps/mobile | Rotas (app/), pastas de recursos, configuração do aplicativo | Botões genéricos utilizáveis por todos os aplicativos |
packages/ui | Primitivas de design system, estilos compartilhados | Telas de recursos, navegação, clientes de API |
packages/typescript-config | base.json, extensões expo.json | Aliases de caminho específicos do aplicativo |
turbo.json para Expo| Tarefa | cache | persistent | Notas |
|---|---|---|---|
dev (expo start) | false | true | Servidor de desenvolvimento de longa execução |
typecheck | padrão | - | Porta de CI rápida; pode ser armazenada em cache |
lint | padrão | - | Pode ser armazenada em cache por pacote |
doctor (expo-doctor) | false | - | Valida o grafo de dependências do SDK 57 |
# Execute apenas o servidor de desenvolvimento do aplicativo mobile
pnpm turbo run dev --filter=mobile
# Verifique o tipo do mobile e tudo o que ele depende
pnpm turbo run typecheck --filter=mobile...
# Verifique apenas os pacotes alterados desde o main
pnpm turbo run typecheck --filter="...[origin/main]"Monorepos Expo falham quando várias cópias de react, react-native ou módulos nativos são resolvidas:
pnpm why --depth=10 react-native
pnpm why --depth=10 react| Problema | Correção |
|---|---|
Duas versões de react-native | Alinhe as versões no package.json raiz pnpm.overrides ou resolutions |
Pacote sem react peer | Adicione peerDependencies em pacotes de workspace; instale peers no aplicativo |
| Módulos nativos duplicados | Habilite experiments.autolinkingModuleResolution em app.json (SDK 54+; automático no SDK 55+ monorepos) |
// package.json raiz - força um único React 19 em todos os workspaces (pnpm)
{
"pnpm": {
"overrides": {
"react": "19.2.3",
"react-native": "0.86.0"
}
}
}// packages/typescript-config/expo.json
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"jsx": "react-jsx",
"moduleResolution": "bundler",
"noEmit": true,
"strict": true
}
}// apps/mobile/tsconfig.json
{
"extends": "@repo/typescript-config/expo.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}Pacotes de workspace precisam de seu próprio tsconfig.json com "noEmit": true para turbo run typecheck. Aliases de caminho como @/* pertencem a cada aplicativo - não à base compartilhada.
watchFolders pré-SDK-52 pode conflitar com a detecção automática do Expo. Correção: Comece apenas com getDefaultConfig(__dirname); exclua substituições de resolver legadas e execute npx expo start --clear.react-native - Duas versões em um monorepo causam erros de build nativo e em tempo de execução. Correção: pnpm why react-native; adicione overrides na raiz; nunca permita que pacotes fixem diferentes majors de RN.workspace:* com npm - O npm não suporta o protocolo workspace. Correção: Use pnpm (recomendação padrão do Turborepo), Yarn 4+, ou Bun; ou substitua por * e aceite garantias de vinculação mais fracas.packages/ui - Pacote compartilhado importa expo-router e hooks de recursos; cada aplicativo herda acoplamento de navegação indesejado. Correção: Mantenha os recursos em apps/mobile/src/features/; pacotes contêm apenas primitivas.exports ausentes - Adicionar ./card.tsx sem listá-lo em package.json exports quebra a resolução do Metro. Correção: Declare cada subcaminho explicitamente quando exports estiver presente.nodeLinker: hoisted em pnpm-workspace.yaml se ocorrerem erros de resolução (o Expo suporta instalações isoladas a partir do SDK 54+, mas "hoisted" é mais seguro durante a configuração).workingDirectory do EAS para apps/mobile e instale a partir da raiz, conforme o guia de monorepos do Expo.| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| Turborepo + workspaces pnpm | Múltiplos aplicativos Expo, pacotes compartilhados, cache de CI | Aplicativo autônomo único - a sobrecarga do monorepo não vale a pena |
| Apenas workspaces Yarn/npm | Vinculação simples sem orquestração de tarefas | Você precisa de cache Turbo e turbo run --filter em CI |
| Monorepo Nx | Geradores, grafo de dependências afetadas, repositórios poliglota com plugin RN | Você deseja a configuração mais leve possível de Expo + pacotes |
| Polyrepo + pacotes npm publicados | Equipes são independentes; limites de semver importam | Iteração rápida em UI compartilhada - ciclos de publicação o atrasam |
Aplicativo único com src/components/ | Um produto, uma listagem na loja | Dois aplicativos compartilhando 60%+ de código de UI |
Workspaces sozinhos vinculam pacotes. O Turborepo adiciona um grafo de tarefas, cache local e cache remoto para que lint e typecheck pulem pacotes inalterados em CI. A filtragem (--filter=mobile) visa um aplicativo e suas dependências.
Geralmente não. O Expo configura automaticamente o Metro quando detecta raízes de workspace e você usa expo/metro-config. Se você migrou de um guia pré-SDK-52, remova watchFolders e extraNodeModules manuais e execute npx expo start --clear.
Isso diz ao pnpm para criar um link simbólico do packages/ui local para apps/mobile/node_modules em vez de baixar do npm. O * significa "qualquer versão que exista no workspace".
Para agregação do Metro, não - os aplicativos importam .tsx brutos de @repo/ui. Para publicar no npm fora do monorepo, adicione uma tarefa build que emita dist/. Dentro do monorepo, as importações de origem são padrão.
npx create-expo-app@latest apps/mobile --template default@sdk-57 --yesExecute pnpm install da raiz do monorepo depois para que os links do workspace sejam resolvidos.
Sim. Crie apps/admin com o mesmo template, adicione "@repo/ui": "workspace:*", e execute pnpm turbo run dev --filter=admin. Compartilhe packages/ui e packages/typescript-config entre ambos.
pnpm turbo run dev --filter=mobile
pnpm turbo run typecheck --filter=mobile...Os ... finais incluem as dependências de workspace de mobile.
Causas comuns: entrada exports ausente para o subcaminho, pacote não listado em pnpm-workspace.yaml, ou pnpm install não executado a partir da raiz. Verifique se node_modules/@repo/ui é um symlink para packages/ui.
pnpm why --depth=10 react-nativeAlinhe todos os workspaces para 0.86.0. Adicione pnpm.overrides na raiz se uma dependência transitiva puxar um major diferente.
Sim. Declare react e react-native como peers para que o aplicativo forneça uma única cópia. Instale versões correspondentes nas dependencies do aplicativo, não apenas nas devDependencies do pacote.
Dentro de cada aplicativo: apps/mobile/src/features/. Pacotes compartilhados contêm primitivas e utilitários - não telas de recursos do produto. Veja Estrutura de Pastas para Recursos.
Aponte o build para o subdiretório do aplicativo e instale a partir da raiz do monorepo. O EAS detecta pnpm-lock.yaml na raiz. Defina o eas.json do aplicativo e o diretório de trabalho de acordo com a documentação de monorepos do Expo.
"dev": { "cache": false, "persistent": true }Servidores de desenvolvimento são de longa execução e não devem ser armazenados em cache como tarefas concluídas.
Turborepo é mais leve - cache de tarefas e filtragem com configuração mínima. Nx adiciona geradores, comandos afetados e plugins específicos de RN com mais custo de configuração. Veja Monorepo com Nx.
Aplicativo único, equipe única, sem pacotes compartilhados. Monorepos adicionam complexidade de instalação, risco de dependências duplicadas e configuração de ferramentas. Comece com um aplicativo autônomo; extraia um monorepo quando um segundo aplicativo ou pacote compartilhado for real - não especulativo.
watchFolders, overrides legados do Metro e armadilhas de symlinkapps/mobile com default@sdk-57Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026