🚀

Expo & EAS

The fastest way to build React Native apps

Expo is a platform for making universal native apps for Android, iOS, and the web with JavaScript and React. EAS (Expo Application Services) provides cloud-based services for building, submitting, and updating your apps.

2016

First Released

Beginner

Difficulty Level

1M+

Apps Built

50+

Native APIs

Why Choose Expo?

Zero Config Setup

Start building immediately without complex native development setup

No need for Xcode or Android Studio to get started - just JavaScript

Over-the-Air Updates

Push updates to your app instantly without app store approval

Update JavaScript code and assets instantly for all users

Rich SDK

Access to camera, location, notifications, and 50+ native APIs

Comprehensive set of APIs for common mobile app functionality

EAS Build Service

Cloud-based build service for iOS and Android apps

Build apps in the cloud without maintaining local build environments

EAS Submit

Automated app store submission process

Streamlined submission to Apple App Store and Google Play Store

Development Tools

Expo CLI, Expo Go app, and development build tools

Complete toolchain for development, testing, and deployment

Getting Started with Expo

Quick Setup

# Install Expo CLI
npm install -g @expo/cli

# Create a new Expo project
npx create-expo-app MyAwesomeApp

# Navigate to project directory
cd MyAwesomeApp

# Start the development server
npx expo start

# Install Expo Go app on your phone and scan QR code
# Or press 'i' for iOS simulator, 'a' for Android emulator

Basic Expo App Example

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { Camera } from 'expo-camera';
import * as Location from 'expo-location';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  const [location, setLocation] = useState(null);

  const getLocation = async () => {
    try {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert('Permission denied', 'Location permission is required');
        return;
      }

      const currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation);
      Alert.alert(
        'Location Found!',
        `Lat: ${currentLocation.coords.latitude.toFixed(4)}, 
         Lng: ${currentLocation.coords.longitude.toFixed(4)}`
      );
    } catch (error) {
      Alert.alert('Error', 'Could not get location');
    }
  };

  const takePicture = async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    if (status === 'granted') {
      Alert.alert('Camera Ready!', 'Camera permission granted');
    } else {
      Alert.alert('Permission denied', 'Camera permission is required');
    }
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      
      <Text style={styles.title}>Welcome to Expo!</Text>
      <Text style={styles.subtitle}>
        Build amazing apps with native features
      </Text>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={getLocation}>
          <Text style={styles.buttonText}>📍 Get Location</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={takePicture}>
          <Text style={styles.buttonText}>📷 Access Camera</Text>
        </TouchableOpacity>
      </View>

      {location && (
        <View style={styles.locationInfo}>
          <Text style={styles.locationText}>
            Current Location:
          </Text>
          <Text style={styles.coordinates}>
            Lat: {location.coords.latitude.toFixed(4)}
          </Text>
          <Text style={styles.coordinates}>
            Lng: {location.coords.longitude.toFixed(4)}
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 40,
  },
  buttonContainer: {
    width: '100%',
    gap: 15,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  locationInfo: {
    marginTop: 30,
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    alignItems: 'center',
  },
  locationText: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  coordinates: {
    fontSize: 14,
    color: '#666',
  },
});

EAS (Expo Application Services)

🏗️ EAS Build

Cloud-based build service for creating production-ready apps

# Install EAS CLI
npm install -g eas-cli

# Configure your project
eas build:configure

# Build for both platforms
eas build --platform all

📱 EAS Submit

Automated submission to app stores

# Submit to app stores
eas submit --platform ios
eas submit --platform android

# Or submit to both
eas submit --platform all

🔄 EAS Update

Over-the-air updates for instant deployments

# Configure updates
eas update:configure

# Publish an update
eas update --branch production
eas update --branch preview

Expo Project Ideas

🟢 Beginner Projects

• Photo Gallery: Camera integration with local storage
• Location Tracker: GPS tracking with maps
• Push Notification Demo: Local and remote notifications
• QR Code Scanner: Scan and generate QR codes
• Audio Player: Music player with playlist support
• Flashlight App: Simple utility with device controls

🟡 Intermediate Projects

• Social Media App: Photo sharing with authentication
• Expense Manager: Financial tracking with charts
• Workout Tracker: Fitness app with progress tracking
• Food Delivery: Restaurant app with ordering system
• Travel Planner: Trip planning with offline maps
• Language Learning: Interactive lessons with audio

🔴 Advanced Projects

• Video Conferencing: Real-time video calls
• Augmented Reality: AR experiences with camera
• IoT Controller: Smart home device management
• Marketplace App: E-commerce with payments
• Healthcare App: Medical records with biometrics
• Gaming Platform: Multiplayer games with leaderboards

Popular Expo SDK Libraries

Camera & Media

• expo-camera
• expo-image-picker
• expo-av (audio/video)
• expo-media-library

Location & Maps

• expo-location
• react-native-maps
• expo-task-manager
• expo-background-fetch

Notifications

• expo-notifications
• expo-device
• expo-constants
• expo-permissions

Storage & Auth

• expo-secure-store
• expo-auth-session
• expo-local-authentication
• expo-sqlite

Previous: React Native Next: Flutter