Module 3: Expo Framework

Accelerate React Native development with Expo's powerful tools and managed workflow.

What is Expo?

Expo is a framework and platform for React Native that makes development faster and easier. Think of it as Create React App for mobile - it handles the complex native configuration so you can focus on building your app.

🚀 Why Expo?

Zero Config: No Xcode or Android Studio needed to start
Fast Development: Instant updates with Expo Go app
Rich SDK: 50+ pre-built modules (camera, maps, auth)
OTA Updates: Push updates without app store review
EAS Build: Cloud-based builds for iOS and Android
Free Tier: Generous free plan for indie developers

Getting Started with Expo

Create Your First Expo App:

# Install Expo CLI

npm install -g expo-cli

# Create new project

npx create-expo-app my-app

cd my-app

# Start development server

npx expo start

# Scan QR code with Expo Go app

# iOS: Camera app

# Android: Expo Go app

Expo Go App:

Download Expo Go from App Store or Play Store to test your app instantly on your phone!

• No need to build native code
• See changes in real-time
• Test on multiple devices
• Share with team via QR code

Expo SDK Features

Expo provides 50+ modules for common mobile features. No native code required!

📷 Camera

import { Camera } from 'expo-camera';

const [permission, requestPermission] =

Camera.useCameraPermissions();

📍 Location

import * as Location from

'expo-location';

const location = await

Location.getCurrentPositionAsync();

🔔 Notifications

import * as Notifications from

'expo-notifications';

await Notifications

.scheduleNotificationAsync();

🔐 Auth

import * as LocalAuthentication

from 'expo-local-authentication';

const result = await

LocalAuthentication.authenticateAsync();

Camera Integration

import { Camera, CameraType } from 'expo-camera';

import { useState } from 'react';

import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function CameraScreen() {

const [type, setType] = useState(CameraType.back);

const [permission, requestPermission] = Camera.useCameraPermissions();

if (!permission) return <View />;

if (!permission.granted) {

return (

<Text> We need camera permission</Text>

</View>

);

}

return (

<TouchableOpacity

onPress{() => setType(

type =>= CameraType.back

? CameraType.front : CameraType.back

)}>

<Text> Flip Camera</Text>

</TouchableOpacity>

</Camera>

</View>

);

}

Push Notifications

import * as Notifications from 'expo-notifications';

// Configure notification behavior

Notifications.setNotificationHandler({

handleNotification: async () => ({

shouldShowAlert: true,

shouldPlaySound: true,

shouldSetBadge: false,

});

// Request permissions

const { status } = await Notifications

.requestPermissionsAsync();

// Get push token

const token = await Notifications

.getExpoPushTokenAsync();

// Schedule local notification

await Notifications.scheduleNotificationAsync({

content: {

title: "You've got mail! 📬",

body: 'Here is the notification body',

data: { data: 'goes here' },

trigger: { seconds: 2 },

});

EAS Build & Submit

Expo Application Services (EAS) provides cloud-based builds and submissions.

Build for Production:

# Install EAS CLI

npm install -g eas-cli

# Login to Expo

eas login

# Configure project

eas build:configure

# Build for iOS

eas build --platform ios

# Build for Android

eas build --platform android

# Build for both

eas build --platform all

EAS Submit:

# Submit to App Store

eas submit --platform ios

# Submit to Play Store

eas submit --platform android

Over-The-Air (OTA) Updates

Push JavaScript updates instantly without app store review!

# Publish update

eas update --branch production --message "Bug fixes"

# Users get update automatically

# No app store submission needed!

⚠️ OTA Limitations:

• Only JavaScript/assets updates
• Can't update native code
• Can't add new permissions
• Can't change app icon/name

Managed vs Bare Workflow

Managed Workflow

Expo handles native code for you.

✅ Easiest to start
✅ No native knowledge needed
✅ OTA updates
✅ Expo Go for testing
❌ Limited to Expo SDK
❌ Can't add custom native modules

Bare Workflow

Full control over native code.

✅ Use any native library
✅ Full customization
✅ Still use Expo SDK
✅ EAS Build still works
❌ Need Xcode/Android Studio
❌ More complex setup

📚 Module Summary

You've mastered Expo framework:

✓ Expo setup and workflow
✓ Expo SDK features (camera, location, notifications)
✓ EAS Build and Submit
✓ OTA updates
✓ Managed vs Bare workflow

Next: Learn Flutter and Dart!