Busca en todas las páginas de la documentación
Un monorrepo Turborepo permite que múltiples aplicaciones Expo compartan configuración TypeScript, reglas ESLint y un paquete de UI mientras Turbo cachea tareas de lint y typecheck en CI. Expo SDK 57 detecta espacios de trabajo automáticamente - te enfocas en los límites del paquete, no en el cableado de Metro.
Tarjeta de receta de referencia rápida - lista para copiar y pegar.
mkdir mobile-monorepo && cd mobile-monorepo
pnpm init
# Workspace roots (create pnpm-workspace.yaml - see Working Example)
npx create-expo-app@latest apps/mobile --template default@sdk-57 --yes
mkdir -p packages/ui/src
pnpm add turbo -Dw
# Link UI package into the app (from apps/mobile/package.json)
# "@repo/ui": "workspace:*"
pnpm install
pnpm turbo run typecheck
pnpm turbo run dev --filter=mobileCuándo usarlo:
# 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}>Shared UI from @repo/ui</Text>
<Button variant="primary" onPress={() => {}}>
Continue
</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 is usually enough
const { getDefaultConfig } = require("expo/metro-config");
module.exports = getDefaultConfig(__dirname);Lo que esto demuestra:
pnpm-workspace.yaml declara apps/* y packages/* - Expo detecta el monorrepo y configura Metro automáticamente en SDK 57.workspace:* vincula mediante symlink @repo/ui en apps/mobile/node_modules - Metro empaqueta el source .tsx del paquete sin un paso de compilación separado.turbo.json ejecuta typecheck y lint con ordenamiento de dependencias ^ - los paquetes compartidos se verifican antes que las aplicaciones.peerDependencies en react y react-native en @repo/ui previenen copias duplicadas del renderer dentro del paquete.metro.config.js - sin watchFolders manual cuando usas expo/metro-config en SDK 52+.apps/mobile dependa de paquetes locales mediante symlinks en lugar de publicaciones npm.package.json de cada workspace y cachea salidas de tareas por hash de entrada.watchFolders / extraNodeModules manual solo se necesitan para configuraciones legales o layouts no estándar.transpilePackages; Babel procesa la fuente vinculada a través de la configuración de la aplicación.apps/mobile) pero instala dependencias desde la raíz del monorrepo cuando se configura con el directorio de trabajo correcto.mobile-monorepo/
├── apps/
│ ├── mobile/ # Expo SDK 57 consumer app (default@sdk-57)
│ └── admin/ # optional second app
├── packages/
│ ├── ui/ # shared primitives (Button, Screen)
│ ├── typescript-config/ # shared tsconfig bases
│ └── eslint-config/ # shared lint rules
├── pnpm-workspace.yaml
├── turbo.json
└── package.json| Directorio | Posee | No posee |
|---|---|---|
apps/mobile | Rutas (app/), carpetas de características, configuración de la aplicación | Botones genéricos utilizables por cada aplicación |
packages/ui | Primitivas del sistema de diseño, estilos compartidos | Pantallas de características, navegación, clientes de API |
packages/typescript-config | base.json, expo.json extiende | Alias de ruta específicos de la aplicación |
| Tarea | cache | persistent | Notas |
|---|---|---|---|
dev (expo start) | false | true | Servidor de desarrollo de larga duración |
typecheck | default | - | Puerta CI rápida; almacenable en caché |
lint | default | - | Almacenable en caché por paquete |
doctor (expo-doctor) | false | - | Valida el gráfico de dependencias de SDK 57 |
# Ejecuta solo el servidor de desarrollo de la aplicación móvil
pnpm turbo run dev --filter=mobile
# Typecheck móvil y todo en lo que depende
pnpm turbo run typecheck --filter=mobile...
# Typecheck solo los paquetes cambiados desde main
pnpm turbo run typecheck --filter="...[origin/main]"Los monorrepos de Expo fallan cuando se resuelven múltiples copias de react, react-native o módulos nativos:
pnpm why --depth=10 react-native
pnpm why --depth=10 react| Problema | Solución |
|---|---|
Dos versiones de react-native | Alinea versiones en pnpm.overrides o resolutions de package.json raíz |
Paquete sin peer de react | Agrega peerDependencies en paquetes de workspace; instala peers en la aplicación |
| Módulos nativos duplicados | Habilita experiments.autolinkingModuleResolution en app.json (SDK 54+; automático en monorrepos SDK 55+) |
// package.json raíz - fuerza una sola instancia de React 19 en todos los 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"]
}Los paquetes de workspace necesitan su propio tsconfig.json con "noEmit": true para turbo run typecheck. Los alias de ruta como @/* pertenecen en cada aplicación - no en la base compartida.
watchFolders puede entrar en conflicto con la detección automática de Expo. Solución: Comienza solo con getDefaultConfig(__dirname); elimina las anulaciones de resolver heredadas y ejecuta npx expo start --clear.react-native - Dos versiones en un monorrepo causan errores de compilación nativa y runtime. Solución: pnpm why react-native; agrega anulaciones raíz; nunca permitas que los paquetes fijen versiones principales de RN diferentes.workspace:* con npm - npm no admite el protocolo de workspace. Solución: Usa pnpm (recomendación predeterminada de Turborepo), Yarn 4+, o Bun; o reemplaza con * y acepta garantías de vinculación más débiles.packages/ui - El paquete compartido importa expo-router y hooks de características; cada aplicación hereda acoplamiento de navegación no deseado. Solución: Mantén características en apps/mobile/src/features/; los paquetes contienen solo primitivas.exports faltantes - Agregar ./card.tsx sin enumerarlo en exports de package.json rompe la resolución de Metro. Solución: Declara cada subruta explícitamente una vez que exports está presente.nodeLinker: hoisted en pnpm-workspace.yaml si aparecen errores de resolución (Expo admite instalaciones aisladas desde SDK 54+, pero hoisted es más seguro durante la configuración).workingDirectory de EAS a apps/mobile e instala desde la raíz según la guía de monorrepo de Expo.| Alternativa | Úsalo cuando | No lo uses cuando |
|---|---|---|
| Turborepo + pnpm workspaces | Múltiples aplicaciones Expo, paquetes compartidos, caché CI | Aplicación única independiente - la sobrecarga del monorrepo no vale la pena |
| Solo workspaces de Yarn/npm | Vinculación simple sin orquestación de tareas | Necesitas caché de Turbo y turbo run --filter en CI |
| Monorrepo Nx | Generadores, gráfico afectado, repositorios políglotas con plugin de RN | Deseas la configuración más ligera posible de Expo + paquetes |
| Polyrepo + paquetes npm publicados | Los equipos son independientes; los límites de semver importan | Iteración rápida en UI compartida - los ciclos de publicación te ralentizan |
Aplicación única con src/components/ | Un producto, un anuncio de tienda | Dos aplicaciones compartiendo 60%+ código de UI |
Los Workspaces solos vinculan paquetes. Turborepo agrega un gráfico de tareas, caché local y caché remoto para que lint y typecheck omitan paquetes sin cambios en CI. El filtrado (--filter=mobile) se enfoca en una aplicación y sus dependencias.
Generalmente no. Expo configura automáticamente Metro cuando detecta raíces de workspace y usas expo/metro-config. Si migraste desde una guía pre-SDK-52, elimina watchFolders y extraNodeModules manual, luego ejecuta npx expo start --clear.
Le dice a pnpm que vincula mediante symlink el workspace local packages/ui en apps/mobile/node_modules en lugar de descargar desde npm. El * significa "cualquier versión que exista en el workspace".
Para el empaquetado de Metro, no - las aplicaciones importan .tsx raw desde @repo/ui. Para publicar en npm fuera del monorrepo, agrega una tarea build que emita dist/. Dentro del monorrepo, las importaciones de fuente son estándar.
npx create-expo-app@latest apps/mobile --template default@sdk-57 --yesEjecuta pnpm install desde la raíz del monorrepo después para que se resuelvan los enlaces del workspace.
Sí. Andamio apps/admin con la misma plantilla, agrega "@repo/ui": "workspace:*", y ejecuta pnpm turbo run dev --filter=admin. Comparte packages/ui y packages/typescript-config entre ambos.
pnpm turbo run dev --filter=mobile
pnpm turbo run typecheck --filter=mobile...El ... final incluye dependencias de workspace de mobile.
Causas comunes: entrada exports faltante para la subruta, paquete no enumerado en pnpm-workspace.yaml, o pnpm install no ejecutado desde la raíz. Verifica que node_modules/@repo/ui sea un symlink a packages/ui.
pnpm why --depth=10 react-nativeAlinea todos los workspaces a 0.86.0. Agrega pnpm.overrides raíz si una dependencia transitiva tira una versión principal diferente.
Sí. Declara react y react-native como peers para que la aplicación suministre una única copia. Instala versiones coincidentes en las dependencies de la aplicación, no solo en las devDependencies del paquete.
Dentro de cada aplicación: apps/mobile/src/features/. Los paquetes compartidos contienen primitivas y utilidades - no pantallas de características del producto. Ver Estructura de carpetas para características.
Apunta la compilación al subdirectorio de la aplicación e instala desde la raíz del monorrepo. EAS detecta pnpm-lock.yaml en la raíz. Establece el eas.json de la aplicación y el directorio de trabajo según la documentación de monorrepo de Expo.
"dev": { "cache": false, "persistent": true }Los servidores de desarrollo son de larga duración y no deben almacenarse en caché como tareas completadas.
Turborepo es más ligero - caché y filtrado de tareas con configuración mínima. Nx agrega generadores, comandos afectados y plugins específicos de RN con más costo de configuración. Ver Monorrepo con Nx.
Aplicación única, equipo único, sin paquetes compartidos. Los monorrepos agregan complejidad de instalación, riesgo de dependencias duplicadas y configuración de herramientas. Comienza de forma independiente; extrae un monorrepo cuando una segunda aplicación o paquete compartido es real - no especulativa.
watchFolders, anulaciones heredadas de Metro y trampas de symlinkapps/mobile con default@sdk-57Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026