Expo Skill
Overview
This skill provides guidance for developing cross-platform mobile applications using Expo, covering setup, development workflow, native features, and deployment.
Objective
Enable developers to build, test, and deploy mobile applications efficiently using Expo's managed workflow with proper TypeScript support and React Native best practices.
When to Use
Use this skill when:
- •Building cross-platform mobile apps (iOS + Android)
- •Using Expo managed workflow
- •Configuring EAS Build or EAS Update
- •Accessing native features via Expo SDK
- •Deploying OTA updates
Don't use this skill for:
- •Bare React Native projects (use react-native skill)
- •Web-only applications
- •Custom native modules not supported by Expo
Critical Patterns
✅ REQUIRED: Use Expo SDK for Native Features
// ✅ CORRECT: Expo SDK modules
import * as Location from "expo-location";
import { Camera } from "expo-camera";
// ❌ WRONG: Direct React Native linking (use Expo modules)
import { NativeModules } from "react-native";
✅ REQUIRED: Handle Permissions Properly
// ✅ CORRECT: Request permissions before using
const { status } = await Location.requestForegroundPermissionsAsync();
if (status === "granted") {
const location = await Location.getCurrentPositionAsync();
}
// ❌ WRONG: No permission check
const location = await Location.getCurrentPositionAsync(); // May crash
✅ REQUIRED: Use TypeScript
// ✅ CORRECT: Typed props and state
interface Props {
title: string;
}
const Component: React.FC<Props> = ({ title }) => {
const [count, setCount] = useState<number>(0);
};
Conventions
- •Use TypeScript for type safety
- •Follow React Native component patterns
- •Leverage Expo SDK for native features
- •Use Expo Go for development testing
- •Implement proper error handling for native features
Decision Tree
Need native feature? → Check Expo SDK first, use managed module if available.
Custom native code needed? → Use config plugins or eject to bare workflow.
Building for stores? → Use EAS Build for cloud builds.
Need OTA updates? → Use EAS Update for instant app updates.
Platform-specific code? → Use Platform.select() or .ios.tsx/.android.tsx files.
Testing? → Use Expo Go for development, physical devices or simulators for final testing.
Navigation? → Use Expo Router or React Navigation.
Example
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Welcome to Expo</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Edge Cases
- •Handle platform-specific code with Platform API
- •Manage permissions properly
- •Test on both iOS and Android
- •Handle offline scenarios