From harness-claude
Guides Expo project setup with managed workflow, EAS Build, development builds, and config plugins for React Native apps.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:mobile-expo-setupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Set up and configure Expo projects with managed workflow, EAS Build, development builds, and config plugins
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": "[email protected]", "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)npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeConfigures Expo apps using app.json, app.config.js/ts, and EAS for metadata, plugins, build settings, and environment variables.
Expo and React Native patterns for mobile development with EAS Build, SDK integration, and native module configuration. Use when building Expo apps, configuring native features, or setting up app signing for store deployment.
Provides production architecture patterns for React Native apps with Expo Router, navigation, native modules, offline sync, state management, and project structure for mobile development.