React Native Expo Template Commands

Specialized commands for building cross-platform mobile applications with React Native and Expo.

Overview

The React Native template provides 10 commands optimized for mobile app development, covering native features, offline capabilities, and seamless backend integration.

Available Commands

Screens & Navigation

• add-screen - Create new app screens with navigation
• implement-deep-linking - Set up deep links and universal links

Native Features

• setup-push-notifications - Configure push notifications
• add-in-app-purchase - Implement in-app purchases
• setup-crash-reporting - Add crash reporting and analytics

Data & Sync

• add-offline-sync - Enable offline data synchronization
• sync-data-models - Synchronize data models with backend
• add-api-client - Create type-safe API client

Backend Integration

• setup-shared-backend - Connect to shared backend (Supabase, Firebase)

Performance

• optimize-bundle-size - Reduce app bundle size

Usage Examples

Building a Complete Screen

/template add-screen UserProfile
/template add-screen Settings
/template implement-deep-linking user/:id

Setting Up Notifications

/template setup-push-notifications firebase
/template add-screen NotificationSettings

Offline Capabilities

/template add-offline-sync watermelondb
/template sync-data-models User,Post,Comment
/template add-api-client

E-commerce Features

/template add-in-app-purchase
/template add-screen Store
/template add-screen PurchaseHistory

Key Features

Expo SDK Integration

Commands leverage Expo's managed workflow:

• expo-notifications for push
• expo-in-app-purchases for IAP
• expo-linking for deep links
• expo-secure-store for sensitive data

Cross-Platform Support

All commands generate code that works on:

• iOS (iPhone & iPad)
• Android (phones & tablets)
• Web (when applicable)

Type Safety

• Full TypeScript support
• Type-safe navigation
• Typed API responses
• Schema validation

Performance Optimized

• Lazy loading screens
• Image optimization
• Bundle splitting
• Memory management

Best Practices

1. Design Mobile-First: Consider touch interactions and screen sizes
2. Test on Devices: Use Expo Go and physical devices
3. Handle Offline: Always consider offline scenarios
4. Optimize Assets: Compress images and minimize bundle size
5. Platform Differences: Test iOS and Android separately

Common Workflows

Authentication Flow

/template add-screen Login
/template add-screen Signup
/template add-screen ForgotPassword
/template setup-shared-backend supabase-auth

Social Features

/template add-screen Feed
/template add-screen Profile
/template add-screen Chat
/template setup-push-notifications
/template add-offline-sync

Settings & Preferences

/template add-screen Settings
/template add-screen AccountSettings
/template add-screen NotificationPreferences
/template add-screen PrivacySettings

Platform-Specific Features

iOS Specific

# Apple Sign In
/template setup-shared-backend apple-signin

# iOS widgets
/template add-feature ios-widget

Android Specific

# Google Sign In
/template setup-shared-backend google-signin

# Android shortcuts
/template add-feature android-shortcuts

Navigation Patterns

The template uses React Navigation v6:

# Tab navigation
/template add-screen Home --tab
/template add-screen Search --tab
/template add-screen Profile --tab

# Stack navigation
/template add-screen Details --stack
/template add-screen EditProfile --stack

State Management

Commands integrate with:

• Zustand for global state
• React Query for server state
• MMKV for persistent storage
• Context API for theme/auth

Integration with Core Prompts

Use React Native commands with core Orchestre prompts:

# Plan the mobile app
/orchestrate "Build fitness tracking app"

# Implement screens
/template add-screen WorkoutList
/template add-screen WorkoutDetail
/template add-screen Progress

# Add features
/template setup-push-notifications
/template add-offline-sync

# Review and optimize
/review
/template optimize-bundle-size

Testing

Commands include:

• Jest unit tests
• Detox E2E tests
• Component testing
• Snapshot testing

# After adding screens
/template setup-testing detox

Deployment

Build and deploy:

# iOS
eas build --platform ios
eas submit --platform ios

# Android
eas build --platform android
eas submit --platform android

Common Patterns

Access React Native patterns in .orchestre/patterns/react-native-expo/:

• Navigation patterns
• Authentication flows
• Data synchronization
• Performance optimization
• Platform-specific code