Expo SDK configuration and setup. Use when configuring Expo projects.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill covers Expo SDK configuration for React Native projects.
Use this skill when:
MANAGED WORKFLOW - Use Expo's managed workflow for best developer experience.
# Create new Expo project
npx create-expo-app@latest my-app
# With specific template
npx create-expo-app@latest my-app --template tabs
{
"expo": {
"name": "My App",
"slug": "my-app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.company.myapp"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"package": "com.company.myapp"
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/favicon.png"
},
"plugins": [],
"experiments": {
"typedRoutes": true
}
}
}
export default ({ config }) => {
return {
...config,
name: process.env.APP_NAME || 'My App',
version: process.env.APP_VERSION || '1.0.0',
extra: {
apiUrl: process.env.API_URL,
enableAnalytics: process.env.ENABLE_ANALYTICS === 'true',
},
};
};
# .env
EXPO_PUBLIC_API_URL=https://api.example.com
EXPO_PUBLIC_ANALYTICS_KEY=abc123
// Must be prefixed with EXPO_PUBLIC_
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
// Or use expo-constants for extra config
import Constants from 'expo-constants';
const { apiUrl } = Constants.expoConfig?.extra ?? {};
# Expo Router
npx expo install expo-router
# Secure Store
npx expo install expo-secure-store
# Image Picker
npx expo install expo-image-picker
# Camera
npx expo install expo-camera
# Location
npx expo install expo-location
# Notifications
npx expo install expo-notifications
# Haptics
npx expo install expo-haptics
{
"expo": {
"plugins": [
"expo-router",
"expo-secure-store",
[
"expo-image-picker",
{
"photosPermission": "Allow $(PRODUCT_NAME) to access your photos."
}
],
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access camera."
}
],
[
"expo-location",
{
"locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
}
]
]
}
}
{
"expo": {
"newArchEnabled": true
}
}
{
"cli": {
"version": ">= 5.0.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}
{
"expo": {
"updates": {
"url": "https://u.expo.dev/your-project-id"
},
"runtimeVersion": {
"policy": "appVersion"
}
}
}
# Start development server
npx expo start
# Start with specific platform
npx expo start --ios
npx expo start --android
# Clear cache
npx expo start --clear
# Prebuild native projects
npx expo prebuild
# Run native build
npx expo run:ios
npx expo run:android
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noUncheckedIndexedAccess": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
},
"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}
/// <reference types="expo/types" />
// Add custom type declarations here
declare module '*.png' {
const value: number;
export default value;
}
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
// Add custom configuration
config.resolver.sourceExts.push('cjs');
module.exports = config;
{
"expo": {
"splash": {
"image": "./assets/splash.png",
"resizeMode": "cover",
"backgroundColor": "#3B82F6"
}
}
}
import * as SplashScreen from 'expo-splash-screen';
// Prevent auto-hide
SplashScreen.preventAutoHideAsync();
// Hide when ready
await SplashScreen.hideAsync();
{
"expo": {
"icon": "./assets/icon.png",
"ios": {
"icon": "./assets/ios-icon.png"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
}
}
}
EXPO_PUBLIC_ prefix for client-side env vars