Expo Go Development

Use this skill when

• Developing React Native apps with Expo
• Deciding between Expo Go and development builds
• Setting up new Expo projects
• Converting HTML UI mockups to React Native/Expo
• Needing guidance on Expo Go limitations and compatibility
• Migrating from Expo Go to development builds

Do not use this skill when

• Working with pure native iOS/Android development without Expo
• Needing custom native modules not supported by Expo
• Task is unrelated to React Native or Expo development

Instructions

Expo Go vs Development Builds

Expo Go is best for:

• Quick prototyping and development
• Learning React Native
• Apps using only standard Expo SDK packages
• Testing with commonly used libraries (reanimated, gesture handler, etc.)
• Push notifications, deep links, and routing via Expo Router

Development Builds are required when:

• Using local Expo modules (custom native code in modules/)
• Need Apple targets (widgets, app clips, extensions)
• Using third-party native modules not included in Expo Go
• Custom native configuration that can't be expressed in app.json

Best Practices

1. Always try Expo Go first before creating custom builds
2. Use TypeScript for better type safety and developer experience
3. Use file-based navigation with Expo Router
4. Configure ESLint and Prettier for consistent code style
5. Set up CI/CD with linting, tests, and TypeScript checks
6. Add error boundaries for better error handling
7. Check library compatibility using React Native Directory

When to Switch from Expo Go

You need npx expo run:ios/android or eas build ONLY when:

• Local Expo modules are needed
• Custom native configuration is required
• Third-party native modules not in Expo Go
• Apple-specific features (widgets, app clips)

Development Workflow

1. Start with Expo Go: Run npx expo start and scan QR code
2. Test thoroughly in Expo Go before custom builds
3. Only create custom builds when required
4. Use expo-dev-client for development builds when needed

Limitations of Expo Go

• Fixed set of native libraries (cannot add custom native code)
• Some third-party libraries with native code won't work
• Cannot change app name, icon, or other native properties
• Limited to pre-compiled native modules

Migration to Development Builds

1. Install expo-dev-client library
2. Generate native android/ios directories
3. Build native app using npx expo run:ios or npx expo run:android
4. Or use EAS Build for cloud builds

Code Style Guidelines

• Use kebab-case for file names (e.g., comment-card.tsx)
• Always use import statements at the top
• Remove old route files when restructuring navigation
• Never use special characters in file names
• Configure tsconfig.json with path aliases
• Prefer aliases over relative imports for refactors

HTML to React Native Conversion

When converting HTML mockups to React Native/Expo:

• Replace HTML elements with React Native components
• Convert CSS to React Native StyleSheet
• Use View instead of div, Text instead of span/p
• Convert inline styles to StyleSheet objects
• Handle event handlers with camelCase naming
• Use className becomes style in React Native

Common Patterns

• Navigation: Use Expo Router with file-based routing
• Styling: Use StyleSheet.create() or styled-components
• State Management: Context API, Redux, or Zustand
• API Calls: Use async/await with fetch or axios
• Icons: Use @expo/vector-icons or react-native-vector-icons