From harness-claude
Sets up Expo projects with managed workflow, EAS Build, development builds, and config plugins. For new React Native apps, migrations, or adding native modules.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Set up and configure Expo projects with managed workflow, EAS Build, development builds, and config plugins
Configures Expo apps using app.json, app.config.js/ts, and EAS for metadata, plugins, build settings, and environment variables.
Provides expertise for building React Native mobile apps with Expo, including Expo Router navigation, EAS Build and Submit, development builds, native module integration, and production deployment.
Build and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use for configuring projects, adding native modules, building binaries, or OTA updates.
Share bugs, ideas, or general feedback.
Set up and configure Expo projects with managed workflow, EAS Build, development builds, and config plugins
npx create-expo-app@latest my-app --template tabs
cd my-app
app.config.ts instead of app.json for dynamic configuration. The TypeScript config allows environment variables, conditional logic, and type safety.import { ExpoConfig, ConfigContext } from 'expo/config';
export default ({ config }: ConfigContext): ExpoConfig => ({
...config,
name: process.env.APP_ENV === 'production' ? 'MyApp' : 'MyApp (Dev)',
slug: 'my-app',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
scheme: 'myapp',
splash: {
image: './assets/splash.png',
resizeMode: 'contain',
backgroundColor: '#ffffff',
},
ios: {
supportsTablet: true,
bundleIdentifier: 'com.company.myapp',
},
android: {
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#ffffff',
},
package: 'com.company.myapp',
},
plugins: [
'expo-router',
['expo-camera', { cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera' }],
],
extra: {
apiUrl: process.env.API_URL ?? 'https://api.dev.example.com',
eas: { projectId: 'your-project-id' },
},
});
expo build service.npm install -g eas-cli
eas login
eas build:configure
// eas.json
{
"cli": { "version": ">= 5.0.0" },
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": { "simulator": true }
},
"preview": {
"distribution": "internal"
},
"production": {
"autoIncrement": true
}
},
"submit": {
"production": {
"ios": { "appleId": "you@example.com", "ascAppId": "123456789" },
"android": { "serviceAccountKeyPath": "./google-credentials.json" }
}
}
}
# Build for iOS simulator
eas build --platform ios --profile development
# Build for Android emulator
eas build --platform android --profile development
# Start the development server
npx expo start --dev-client
AndroidManifest.xml, Info.plist, Gradle files, and Podfiles.// app.config.ts
plugins: [
['expo-camera', { cameraPermission: 'Camera access is needed for scanning' }],
['expo-location', { locationAlwaysAndWhenInUsePermission: 'Allow location for delivery tracking' }],
'./plugins/withCustomSplash', // Custom config plugin
],
app/
_layout.tsx # Root layout
index.tsx # Home screen (/)
settings.tsx # Settings screen (/settings)
[id].tsx # Dynamic route (/:id)
(tabs)/
_layout.tsx # Tab layout
home.tsx # Tab screen
profile.tsx # Tab screen
EXPO_PUBLIC_ prefix for client-side values.# .env.local
EXPO_PUBLIC_API_URL=https://api.dev.example.com
API_SECRET=server-only # Not exposed to client
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
}
}
}
Managed vs. bare workflow: The managed workflow (default) lets Expo handle native project configuration through config plugins and EAS Build. The bare workflow gives you direct access to ios/ and android/ directories. Start with managed; eject only if you need native code changes that config plugins cannot handle.
Expo SDK versioning: Each Expo SDK version pins specific React Native and native module versions. Upgrade with npx expo install --fix to resolve version mismatches. Major SDK upgrades can introduce breaking changes — follow the upgrade guide for each version.
EAS Build vs. local builds: EAS Build runs on Expo's cloud infrastructure — no Xcode or Android Studio needed on your machine. Use local builds (npx expo run:ios, npx expo run:android) when you need faster iteration or are debugging native code.
Common mistakes:
npx expo install --fix after adding packages (version mismatches)