React Native Expo Template

The React Native Expo template provides a modern mobile application foundation with managed workflow, native features, and seamless backend integration. It's optimized for rapid cross-platform development.

Overview

• Framework: React Native with Expo SDK
• Language: TypeScript with strict mode
• Navigation: React Navigation v6
• State: Redux Toolkit / Zustand
• Styling: NativeWind (Tailwind for RN) / StyleSheet
• Backend: Integrated with MakerKit or custom API
• Deployment: EAS Build, App Store, Google Play

Architecture

Project Structure

my-app/
├── app/                    # Expo Router (file-based routing)
├── components/            # Reusable UI components
├── features/             # Feature-based modules
├── services/             # API and external services
├── store/                # Global state management
├── utils/                # Helpers and utilities
├── assets/               # Images, fonts, etc.
├── app.json              # Expo configuration
├── CLAUDE.md             # Project memory
└── .orchestre/           # Orchestre configuration

Key Features

1. Cross-platform: iOS and Android from single codebase
2. Native Features: Camera, location, notifications, etc.
3. Offline Support: Data persistence and sync
4. Authentication: Secure token management
5. OTA Updates: Push updates without app store
6. Analytics: Built-in crash reporting and analytics

Mobile-First Intelligence

When working with React Native projects, Orchestre's prompts understand the unique aspects of mobile development:

Mobile Platform Patterns

• Cross-Platform Development: Balancing shared code with platform-specific needs
• Native Integration: Understanding iOS and Android platform differences
• Performance Constraints: Mobile CPU, memory, and battery considerations
• User Experience: Touch interactions, gestures, and mobile UI patterns

React Native Ecosystem

• Navigation Patterns: Stack, tab, and drawer navigation best practices
• State Management: Efficient patterns for mobile state handling
• Native Modules: When and how to bridge to native code
• Expo vs Bare: Understanding managed vs bare workflow tradeoffs

Adaptive Behaviors

When building mobile features, Orchestre:

1. Considers Platform: Implements platform-specific UI and behavior
2. Optimizes Performance: Applies mobile-specific optimizations
3. Handles Offline: Implements robust offline-first patterns
4. Manages Permissions: Properly requests and handles device permissions

For example, implementing a camera feature will:

• Handle iOS and Android permission flows differently
• Consider image processing performance
• Implement proper error states for denied permissions
• Optimize image handling for mobile constraints
• Provide offline fallbacks

Common Workflows

1. Starting Mobile Apps

When creating a mobile app, Orchestre helps you:

• Design for Mobile: Plan UI/UX specifically for touch interfaces
• Choose Architecture: Select appropriate state management and navigation
• Handle Permissions: Implement proper permission flows for both platforms
• Optimize Performance: Apply mobile-specific performance patterns

The system understands mobile development constraints and guides optimal decisions.

2. Backend Integration

For connecting to backends, prompts automatically handle:

• API Communication: Efficient data fetching with mobile considerations
• Offline Sync: Robust conflict resolution and data persistence
• Token Management: Secure storage of authentication tokens
• Data Optimization: Minimizing bandwidth usage and battery drain

Orchestre adapts its approach based on your backend architecture and mobile requirements.

3. Native Capabilities

When implementing device features, the intelligence:

• Manages Permissions: Platform-specific permission handling
• Handles Errors: Graceful degradation when features unavailable
• Optimizes Usage: Battery-efficient implementation of sensors
• Provides Fallbacks: Alternative flows for unsupported devices

The prompts understand the complexities of native integration and guide proper implementation.

Intelligent Pattern Recognition

Orchestre understands and implements mobile-optimized patterns:

Navigation Architecture

Automatic understanding of:

• Authentication flow patterns
• Deep linking configuration
• Navigation state persistence
• Platform-specific transitions
• Gesture handling

Offline-First Design

Intelligent implementation of:

• Local data persistence
• Sync queue management
• Conflict resolution strategies
• Background sync handling
• Network state monitoring

Native Integration

Built-in knowledge of:

• Permission request flows
• Platform API differences
• Error handling patterns
• Performance optimization
• Battery usage considerations

Mobile UX Patterns

Automatic application of:

• Touch target sizing
• Gesture recognizers
• Keyboard avoidance
• Loading states
• Error recovery flows

When building features, Orchestre applies these patterns contextually, understanding the specific requirements of mobile platforms and user expectations.

Configuration

Expo Configuration

// app.json
{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.mycompany.myapp",
      "config": {
        "usesNonExemptEncryption": false
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.mycompany.myapp"
    },
    "plugins": [
      "expo-camera",
      "expo-location",
      "expo-notifications"
    ]
  }
}

Environment Setup

// config/env.ts
const ENV = {
  dev: {
    apiUrl: 'http://localhost:3000',
    enableMocking: true
  },
  staging: {
    apiUrl: 'https://staging-api.myapp.com',
    enableMocking: false
  },
  prod: {
    apiUrl: 'https://api.myapp.com',
    enableMocking: false
  }
}

export default ENV[process.env.APP_ENV || 'dev']

Development Experience

Mobile-Optimized Development

Orchestre enhances your React Native development by:

1. Platform Awareness: Knows iOS and Android differences and guides accordingly
2. Performance Focus: Suggests mobile-specific optimizations automatically
3. Device Testing: Helps configure testing on simulators and real devices
4. Build Management: Handles EAS configuration and deployment complexities

Adaptive Workflows

The system adjusts based on:

• App Type: Consumer app vs. enterprise application
• Target Platforms: iOS-only, Android-only, or cross-platform
• Expo Workflow: Managed workflow vs. bare workflow
• Team Size: Solo developer vs. team collaboration

Continuous Improvement

As you develop, Orchestre:

• Monitors Performance: Suggests optimizations for slow renders
• Catches Issues: Identifies common mobile pitfalls
• Improves UX: Recommends mobile best practices
• Manages Releases: Helps with app store submissions

Best Practices Recognition

Orchestre automatically implements React Native best practices:

Performance Optimization

Intelligent application of:

• List virtualization for long lists
• Image optimization and lazy loading
• Memoization for expensive operations
• Proper use of InteractionManager
• Minimizing bridge calls

Platform Handling

Automatic implementation of:

• Platform-specific styling
• Conditional feature usage
• Native module fallbacks
• OS version compatibility
• Device capability detection

Accessibility First

Built-in awareness of:

• Screen reader support
• Touch target sizing
• Color contrast requirements
• Focus management
• Gesture alternatives

Error Recovery

Robust patterns for:

• Network failure handling
• Permission denial flows
• Crash recovery
• Offline functionality
• User feedback

These practices are applied contextually - Orchestre understands when each pattern is appropriate and implements them seamlessly into your mobile application.

Mobile-Specific Patterns

Gesture Handling

// Swipe to delete pattern
const SwipeableRow = ({ item, onDelete }) => {
  return (
    <Swipeable
      renderRightActions={() => (
        <DeleteAction onPress={() => onDelete(item.id)} />
      )}
    >
      <ItemRow item={item} />
    </Swipeable>
  )
}

Deep Linking

// Handle deep links
const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Profile: 'user/:id',
      Settings: 'settings'
    }
  }
}

Push Notifications

// Register and handle notifications
export const usePushNotifications = () => {
  useEffect(() => {
    registerForPushNotifications()
    
    const subscription = Notifications.addNotificationReceivedListener(
      notification => {
        // Handle foreground notification
      }
    )
    
    return () => subscription.remove()
  }, [])
}

Troubleshooting

Common Issues

1. Metro bundler issues

   • Clear cache: npm start -- --clear
   • Reset Metro: watchman watch-del-all
   • Clean build: cd ios && pod install

2. Build failures

   • Check native dependencies
   • Verify expo plugins config
   • Review EAS build logs

3. Performance problems

   • Use React DevTools Profiler
   • Check for unnecessary re-renders
   • Optimize images and assets

Getting Help

• Check Mobile Patterns
• Run /suggest-improvements --mobile
• Use /review --performance

Getting Started

When you begin with React Native, Orchestre helps you:

1. Understand Mobile Development: Learn platform-specific considerations
2. Design User Experience: Create intuitive mobile interfaces
3. Implement Features: Build with performance and battery life in mind
4. Test Effectively: Ensure quality across devices and platforms
5. Deploy Successfully: Navigate app store requirements confidently

The intelligence adapts to your mobile development experience - providing comprehensive guidance for beginners while offering advanced optimization strategies for experienced developers.

Ready to build your mobile app? Orchestre will guide you through the unique challenges of mobile development, ensuring you create performant, user-friendly applications for iOS and Android.