Expo Development Patterns

Supercharge your Expo development workflow with Cursor IDE and Claude Code. These patterns cover the managed workflow, EAS Build, Expo Router, and the unique advantages of building React Native apps with Expo’s comprehensive toolkit.

Quick Setup for Expo Projects

Initialize Expo App with AI

Cursor IDE

1. Open Cursor in your projects folder
2. Activate Agent mode (Cmd/Ctrl + I)
3. Prompt: “Create a new Expo app with:
   • Expo Router for navigation
   • TypeScript configuration
   • NativeWind for styling
   • Expo SDK 50+
   • EAS Build configuration”
4. Agent will handle the complete setup process

Claude Code

1. Open terminal in project directory
2. Run: claude "Initialize Expo managed workflow with authentication template"
3. Claude will set up the project structure
4. Follow the generated setup instructions

Expo Router Patterns

File-Based Routing

// Cursor prompt for app structure:
"Set up Expo Router with:
- Tab navigation with (tabs) layout
- Stack navigation in each tab
- Modal routes
- Dynamic routes with [id]
- Protected routes with auth check
- Deep linking configuration"

// Generated structure:
app/
  (tabs)/
    _layout.tsx
    index.tsx
    profile.tsx
    settings.tsx
  (auth)/
    login.tsx
    register.tsx
  post/
    [id].tsx
  modal.tsx
  _layout.tsx

Navigation Patterns

Tab Navigation

// Cursor Agent prompt:
"Create tab layout with:
- Custom tab bar component
- Icon animations
- Badge notifications
- Platform-specific styling"

Stack Navigation

// Prompt: "Implement stack navigation with:
// - Custom header
// - Gesture handling
// - Screen transitions
// - Back button override"

Styling with NativeWind

Setup and Configuration

// Comprehensive styling prompt:
"Configure NativeWind with:
1. Tailwind config for mobile
2. Custom theme colors
3. Dark mode support
4. Platform-specific classes
5. Responsive breakpoints"

Component Styling

Styled Components

// Prompt: "Create styled button with:
// - Multiple variants
// - Press animations
// - Loading states
// - NativeWind classes"

Theme System

// Prompt: "Implement theme with:
// - Color schemes
// - Typography scale
// - Spacing system
// - Component variants"

Expo SDK Integration

Camera & Media

// Camera implementation prompt:
"Implement camera feature using Expo Camera with:
- Photo and video capture
- Camera switching
- Flash control
- Media library saving
- Permissions handling
- Error states"

Location Services

1. Setup: “Configure expo-location with permissions”
2. Tracking: “Implement real-time location tracking”
3. Geofencing: “Add region monitoring”
4. Background: “Set up background location tasks”

Push Notifications

// Notification setup prompt:
"Configure push notifications with:
- Expo Notifications setup
- FCM/APNs configuration
- Local notifications
- Notification handlers
- Deep linking from notifications
- Analytics tracking"

Tip

When implementing Expo SDK features, always specify the SDK version in your prompts to ensure compatibility with the latest APIs.

State Management

Zustand with Expo

// State management prompt:
"Set up Zustand for Expo app with:
- Persistent storage using SecureStore
- Authentication state
- App settings
- Offline data queue
- DevTools integration"

React Query Integration

// API state management:
"Configure React Query with:
- Expo SQLite persistence
- Offline support
- Background refetch
- Optimistic updates
- Error boundaries"

EAS Build & Deploy

Build Configuration

Development Build

// Cursor prompt: "Configure EAS Build for development with:
// - iOS simulator build
// - Android emulator build
// - Development client
// - Environment variables"

Production Build

// Prompt: "Set up production builds with:
// - App signing
// - Store configuration
// - OTA updates
// - Build versioning"

Continuous Deployment

// CI/CD setup prompt:
"Create GitHub Actions workflow for:
- Automated EAS builds
- Preview builds on PR
- Production deployment
- OTA update triggers
- Version management"

Testing Patterns

Component Testing

// Test generation prompt:
"Write tests for Expo components using:
- Jest and React Native Testing Library
- Expo modules mocking
- Navigation testing
- Gesture testing
- Snapshot tests"

E2E Testing with Maestro

1. Setup: “Configure Maestro for Expo app”
2. Write Flows: “Create E2E test for onboarding”
3. CI Integration: “Add Maestro tests to EAS Build”

Performance Optimization

Expo-Specific Optimizations

Performance Patterns

AI can implement:

• Asset optimization
• Bundle size reduction
• Splash screen optimization
• Memory management
• FlatList optimizations

Monitoring & Analytics

// Analytics setup prompt:
"Implement analytics with:
- Expo Analytics
- Custom event tracking
- Performance monitoring
- Crash reporting
- User properties"

Common Expo Patterns

Authentication Flow

// Complete auth prompt:
"Implement authentication using:
- Expo AuthSession
- Social providers (Google, Apple, Facebook)
- Secure token storage
- Biometric authentication
- Session management"

File Management

// File handling prompt:
"Create file management system with:
- Document picker
- Image picker with editing
- File upload with progress
- Download management
- Cache control"

Offline-First Architecture

1. Local Database: “Set up Expo SQLite with schema”
2. Sync Logic: “Implement data synchronization”
3. Conflict Resolution: “Handle merge conflicts”
4. Queue Management: “Create offline action queue”

Expo Router Advanced Patterns

Dynamic Routes

// Advanced routing prompt:
"Implement dynamic routing with:
- Catch-all routes
- Optional parameters
- Route groups
- Layout routes
- API routes"

Route Protection

// Auth guard implementation:
"Create route protection with:
- Authentication checks
- Role-based access
- Redirect logic
- Loading states
- Deep link preservation"

Native Module Development

Custom Expo Modules

// Module creation prompt:
"Create custom Expo module for:
- Native functionality not in SDK
- iOS and Android implementation
- TypeScript definitions
- Example app
- Documentation"

Caution

When creating custom native modules, you’ll need to use development builds instead of Expo Go. Make sure to specify this in your AI prompts.

Debugging Workflows

Expo Dev Tools

// Debugging setup:
"Configure debugging environment with:
- React DevTools
- Expo Dev Tools
- Performance monitor
- Network inspector
- Redux DevTools"

Error Handling

Comprehensive Error Strategy

Implement with AI:

• Error boundaries
• Sentry integration
• User feedback forms
• Recovery mechanisms
• Debug information collection

Best Practices with AI

Effective Expo Prompts

// Structure prompts like:
"Create [feature] for Expo using:
- SDK version: [version]
- Platforms: [iOS/Android/Web]
- Key requirements: [list]
- Expo modules needed: [list]
- Include error handling and loading states"

Expo-Specific Considerations

SDK Compatibility

Always mention SDK version and required Expo modules

Managed vs Bare

Specify workflow type for accurate implementations

Platform Differences

Request platform-specific handling when needed

Performance

Ask for Expo-optimized solutions

Advanced Patterns

Web Support

// Web compatibility prompt:
"Add web support to Expo app with:
- Responsive design
- SEO optimization
- PWA configuration
- Platform-specific components
- Navigation adaptation"

Monorepo Setup

// Monorepo configuration:
"Set up Expo in monorepo with:
- Shared packages
- Multiple apps
- Common components
- Build configuration
- Workspace setup"

Migration Patterns

From React Native CLI

1. Analyze: “Scan existing RN project for compatibility”
2. Plan: “Create migration strategy”
3. Migrate: “Convert to Expo managed workflow”
4. Test: “Verify all features work”

Next Steps

• Explore React Native patterns for bare workflow
• Learn Backend integration for API development
• Master Testing strategies for quality assurance