React Native Expo Template Guide

A comprehensive guide to using the React Native Expo template with Orchestre.

Overview

The react-native-expo template provides:

• Cross-platform mobile development (iOS & Android)
• Expo SDK for native features
• TypeScript for type safety
• Backend integration patterns
• Over-the-air updates

Getting Started

Initialize a New Project

# Create a new React Native app
/orchestre:create (MCP) "my-app" using react-native-expo

# Specify a custom path
/orchestre:create (MCP) "my-app" using react-native-expo at ~/projects/mobile

What You Get

When you initialize a React Native project, Orchestre provides:

• Expo Router navigation setup
• .orchestre/prompts.json with mobile-specific commands
• CLAUDE.md files for tracking mobile patterns
• Template-aware prompts that understand React Native constraints

Building Mobile Applications

1. Fitness Tracking App

Create a health and fitness application:

# Plan the app architecture
/orchestre:orchestrate (MCP) "Design fitness tracker with health data integration"

# Build core features
/orchestre:execute-task (MCP) "Integrate step counter and health data APIs"
/orchestre:execute-task (MCP) "Create workout tracking with local storage"
/orchestre:execute-task (MCP) "Build progress charts with victory-native"

2. E-commerce Mobile App

Build a shopping experience:

# Design the commerce flow
/orchestre:orchestrate (MCP) "Plan e-commerce app with offline support"

# Implementation
/orchestre:execute-task (MCP) "Create product catalog with infinite scroll"
/orchestre:execute-task (MCP) "Add shopping cart with AsyncStorage persistence"
/orchestre:execute-task (MCP) "Implement push notifications for orders"

3. Social Media Platform

Create a content sharing app:

# Plan social features
/orchestre:orchestrate (MCP) "Design social app with real-time updates"

# Build the platform
/orchestre:execute-task (MCP) "Create photo feed with optimized rendering"
/orchestre:execute-task (MCP) "Add camera integration for stories"
/orchestre:execute-task (MCP) "Implement deep linking for content sharing"

Common Patterns

Navigation Setup

# Tab navigation
/setup-navigation "Bottom tab navigation"

# Stack navigation
/add-screen "Settings stack navigator"

# Deep linking
/setup-deep-links "Configure app URL scheme"

Native Features

# Camera access
/add-native-features "Camera and photo library"

# Push notifications
/implement-push-notifications "Local and remote notifications"

# Biometric auth
/add-authentication "Face ID and fingerprint"

Backend Integration

# API client
/setup-api-client "Configure REST API client"

# Real-time sync
/add-offline-sync "SQLite with cloud sync"

# GraphQL
/integrate-graphql "Apollo Client setup"

Working with React Native

Using Orchestre Commands

With Orchestre v5, commands are provided as MCP prompts that understand mobile development:

1. Core Commands - Available for all projects:

   • /orchestre:create - Initialize React Native apps
   • /orchestre:orchestrate - Plan mobile features
   • /orchestre:execute-task - Build with mobile best practices
   • /orchestre:review - Review for platform-specific issues

2. Mobile Context - React Native understanding:

   • Commands know about iOS/Android differences
   • Expo SDK integration patterns
   • Performance optimization techniques
   • Native module considerations

Development Workflow

# 1. Plan your mobile feature
/orchestre:orchestrate (MCP) "Add biometric authentication"

# 2. Implement with platform awareness
/orchestre:execute-task (MCP) "Implement Face ID and fingerprint auth"

# 3. Review for both platforms
/orchestre:review (MCP) "Check iOS and Android implementations"

Best Practices

1. Performance First

# Plan performance optimizations
/orchestre:orchestrate (MCP) "Optimize app performance and bundle size"

# Implement optimizations
/orchestre:execute-task (MCP) "Set up image optimization with expo-image"
/orchestre:execute-task (MCP) "Implement lazy loading for tab screens"
/orchestre:execute-task (MCP) "Add React.memo to expensive components"

# Document patterns
/orchestre:document-feature (MCP) "Performance optimization techniques"

2. Platform Differences

# Platform-specific code
/add-screen "Platform-specific UI components"

# Conditional features
/add-native-features "iOS-only HealthKit integration"

3. User Experience

• Smooth animations (60 FPS)
• Offline functionality
• Fast startup time
• Native feel

Development Workflow

Local Development

# Start Expo
npx expo start

# iOS Simulator
npx expo run:ios

# Android Emulator
npx expo run:android

Building for Stores

# EAS Build
eas build --platform all

# Submit to stores
eas submit

Project Structure

The React Native Expo template creates:

mobile-app/
├── CLAUDE.md         # Project memory
├── app/              # Expo Router screens
│   ├── (tabs)/      # Tab navigation
│   ├── (auth)/      # Authentication flow
│   └── _layout.tsx  # Root layout
├── components/       # Reusable components
├── hooks/           # Custom React hooks
├── services/        # API and native services
├── store/           # State management
├── utils/           # Helper functions
├── assets/          # Images and fonts
└── .orchestre/      # Orchestration configuration
    ├── prompts.json # Available commands
    └── CLAUDE.md    # Mobile patterns

Common Integrations

State Management

• Zustand for simple state
• Redux Toolkit for complex apps
• React Query for server state

Styling

• NativeWind (Tailwind for RN)
• Styled Components
• React Native Elements

Backend Services

• Supabase for real-time
• Firebase for push notifications
• AWS Amplify for full-stack

Template Features

Built-in Capabilities

The React Native Expo template provides:

• Navigation: Expo Router file-based routing
• UI Components: Pre-styled components
• State Management: Zustand setup
• API Client: Configured fetch client
• Storage: AsyncStorage wrapper
• Permissions: Helper functions
• Styling: NativeWind (Tailwind for RN)
• Icons: Expo vector icons

Technology Stack

• Framework: React Native with Expo SDK
• Navigation: Expo Router (file-based)
• Language: TypeScript
• Styling: NativeWind + StyleSheet
• State: Zustand
• Development: Expo Go app
• Build: EAS Build

Platform Considerations

• iOS: Requires macOS for native builds
• Android: Works on all platforms
• Web: Experimental support
• Updates: OTA via EAS Update
• Testing: Jest + React Native Testing Library

Resources

• Expo Documentation
• React Native Documentation
• Orchestre Documentation

See Also

• Orchestre Templates Overview
• Quick Start Guide
• All Templates