Expo — Modern React Native Development Without Xcode or Android Studio

Expo simplifies React Native development. Expo Router, EAS Build, Config Plugins, prebuild workflow and deployment to app stores.

Introduction to Modern React Native with Expo¶

Expo has revolutionized React Native development by providing a managed workflow that eliminates the need for Xcode or Android Studio in most cases. It offers powerful tools for building, deploying, and maintaining React Native applications with significantly reduced complexity.

Modern mobile development with Expo includes several key advantages: - Managed workflow - No need to configure native build tools - Over-the-air updates - Push updates without app store approval - EAS Build - Cloud-based build service - Config plugins - Extend functionality without ejecting - Expo Router - File-based routing system

Key Architecture Components¶

Expo applications follow a modern architecture pattern:

// App entry point with Expo Router
import { Stack } from 'expo-router/stack';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Expo Router provides file-based routing similar to Next.js, making navigation intuitive and type-safe.

Configuration and Setup¶

Modern Expo projects use app.json or app.config.js for configuration:

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "plugins": [
      "expo-font",
      ["expo-camera", { "cameraPermission": "Allow app to access camera" }]
    ]
  }
}

EAS Build and Deployment¶

EAS (Expo Application Services) provides cloud-based building and deployment:

# Install EAS CLI
npm install -g @expo/eas-cli

# Configure builds
eas build:configure

# Build for production
eas build --platform all --profile production

# Submit to app stores
eas submit --platform ios

Config Plugins¶

Config plugins allow extending native functionality without ejecting:

// Custom config plugin
const withCustomPlugin = (config) => {
  config.ios = config.ios || {};
  config.ios.infoPlist = config.ios.infoPlist || {};
  config.ios.infoPlist.NSCameraUsageDescription = "This app uses camera";

  return config;
};

module.exports = withCustomPlugin;

Best Practices¶

1. Use Expo Router for navigation - File-based routing is more maintainable
2. Leverage Config Plugins - Add native functionality without ejecting
3. EAS Build profiles - Different configurations for development/staging/production
4. Over-the-air updates - Use Expo Updates for quick bug fixes
5. Environment management - Use app.config.js for environment-specific settings

Development Workflow¶

# Start development server
npx expo start

# Run on device/simulator
npx expo run:ios
npx expo run:android

# Create production build
eas build --platform all --profile production

Expo provides a modern, efficient workflow for React Native development with excellent tooling and developer experience. It’s particularly powerful for teams that want to focus on application logic rather than native build configuration.