Expo Workflow Expert (SDK 54+)

Comprehensive expertise in Expo SDK 54+ development workflows, EAS (Expo Application Services), and optimization strategies for rapid mobile development. Specializes in native tabs, Expo Router v6, iOS Liquid Glass, Android edge-to-edge, and modern deployment pipelines.

What I Know

Expo SDK 54 Features (August 2025)

What's New in SDK 54

• Native Tab Bar Navigation: True native tabs via React Navigation 7

• iOS Liquid Glass Support: Translucent glass effects (iOS 26+)

• Android Edge-to-Edge: Default immersive display

• expo-video & expo-audio: New media APIs replacing expo-av

• expo-image v2: useImage hook for imperative loading

• React Native 0.81: Foundation with New Architecture

• Improved Developer Experience: Faster builds, better error messages

Breaking Changes from SDK 53

• expo-av deprecated → use expo-video and expo-audio

• Tab navigation API changes for native tabs

• Android edge-to-edge now default (adjust padding)

Expo Fundamentals

Managed vs Bare Workflow

• Managed workflow: Full Expo SDK, minimal native code

• Bare workflow: Full native code access with Expo modules

• CNG (Continuous Native Generation): Best of both worlds

• Migration strategies between workflows

Expo Go vs Development Builds

• Expo Go: Quick testing, limited native modules

• Dev Client: Full native module support, custom builds

• When to switch from Expo Go to dev builds

• Creating custom dev clients with EAS Build

Expo SDK & Modules

• Core Expo modules (expo-camera, expo-location, expo-video, expo-audio)

• Third-party native module compatibility

• Module installation: npx expo install <package>

• Autolinking handles native setup automatically

EAS Build (Cloud Builds)

Build Profiles

• Development builds: Fast iteration, dev client

• Preview builds: Internal testing, TestFlight/Internal Testing

• Production builds: App Store/Play Store submission

• Custom build profiles in eas.json

Platform-Specific Configuration

• iOS credentials management

• Android keystore handling

• Build caching strategies

• Environment variable injection

Build Optimization

• Caching node_modules and gradle dependencies

• Incremental builds

• Build machine types (M1, Ubuntu)

• Build time reduction strategies

EAS Update (OTA Updates)

Over-The-Air Updates

• JavaScript bundle updates without app store submission

• Update channels and branches

• Rollout strategies (gradual rollout, instant rollout)

• Rollback capabilities

Update Workflows

• Development channel: Continuous updates

• Preview channel: QA testing

• Production channel: Staged rollouts

• Emergency hotfix workflows

Update Best Practices

• Version compatibility management

• Update frequency optimization

• Monitoring update adoption

• Handling update failures gracefully

App Configuration

app.json / app.config.js

• App metadata (name, slug, version)

• Platform-specific configurations

• Asset and icon configuration

• Splash screen customization

• Deep linking setup (scheme, associated domains)

• Permissions configuration

• Build-time environment variables

eas.json

• Build profile configuration

• Submit profile setup

• Environment secrets management

• Platform-specific build settings

Dynamic Configuration

• Environment-specific configs (dev, staging, prod)

• Feature flags integration

• App variants (white-label apps)

Development Workflow

Fast Refresh & Hot Reloading

• Understanding fast refresh behavior

• Troubleshooting fast refresh issues

• When to use full reload vs fast refresh

Debugging Tools

• React DevTools integration

• Remote debugging with Chrome DevTools

• Flipper for advanced debugging

• Network request inspection

• Performance profiling

Local Development

• Running on physical devices (QR code scanning)

• Running on simulators/emulators

• Offline development strategies

• Tunnel mode vs LAN mode

Deployment & Distribution

App Store Submission

• iOS: TestFlight, App Store Connect integration

• Android: Internal testing, Play Store submission

• EAS Submit command automation

• Store metadata management

Internal Distribution

• Ad-hoc iOS builds

• Android APK distribution

• Enterprise distribution

• TestFlight external testing

CI/CD Integration

• GitHub Actions with EAS Build

• GitLab CI integration

• Automated build triggers

• Automated OTA updates on merge

When to Use This Skill

Ask me when you need help with:

• Setting up Expo SDK 54+ development workflow

• Creating development builds with EAS Build

• Configuring app.json or eas.json

• Setting up over-the-air updates with EAS Update

• Troubleshooting Expo Go limitations

• Optimizing build times

• Managing app credentials and secrets

• Configuring deep linking and URL schemes

• Setting up CI/CD pipelines for Expo apps

• Deploying to App Store or Play Store

• Understanding Expo SDK 54 capabilities

• Migrating from Expo Go to dev client

• Handling native modules in Expo projects

• Implementing native tab navigation

• Setting up iOS Liquid Glass effects

• Configuring Android edge-to-edge display

• Migrating from expo-av to expo-video/expo-audio

• Using Expo Router v6 file-based routing

Essential Expo Commands

Project Setup

Create new Expo project

npx create-expo-app@latest MyApp

Navigate to project

cd MyApp

Start development server

npx expo start

Install Expo module

npx expo install expo-camera

Check project health

npx expo-doctor

Development

Start with cache cleared

npx expo start -c

Start with specific mode

npx expo start --dev-client # Development build npx expo start --go # Expo Go

Run on specific platform

npx expo run:ios npx expo run:android

Prebuild native projects (bare workflow)

npx expo prebuild

EAS Build

Login to EAS

eas login

Configure EAS

eas build:configure

Build for all platforms

eas build --platform all

Build development version

eas build --profile development --platform ios

Build for production

eas build --profile production --platform all

Check build status

eas build:list

EAS Update

Configure EAS Update

eas update:configure

Publish update to default channel

eas update --branch production --message "Fix critical bug"

Publish to specific channel

eas update --channel preview --message "QA testing"

List published updates

eas update:list

Rollback update

eas update:rollback

EAS Submit

Submit to App Store

eas submit --platform ios

Submit to Play Store

eas submit --platform android

Submit specific build

eas submit --platform ios --id <build-id>

Pro Tips & Tricks

1. Development Build Optimization

Create a reusable development build once, then use EAS Update for daily changes:

// eas.json { "build": { "development": { "developmentClient": true, "distribution": "internal", "ios": { "simulator": true } } } }

Build once:

eas build --profile development --platform all

Update JavaScript daily:

eas update --branch development --message "Daily changes"

2. Environment-Based Configuration

Use app.config.js for dynamic configuration:

// app.config.js export default ({ config }) => { const isProduction = process.env.APP_ENV === 'production';

return { ...config, name: isProduction ? 'MyApp' : 'MyApp Dev', slug: 'myapp', extra: { apiUrl: isProduction ? 'https://api.myapp.com' : 'https://dev-api.myapp.com', analyticsKey: process.env.ANALYTICS_KEY, }, updates: { url: 'https://u.expo.dev/your-project-id' } }; };

3. Fast Credential Setup

Let EAS manage credentials automatically:

// eas.json { "build": { "production": { "ios": { "credentialsSource": "remote" }, "android": { "credentialsSource": "remote" } } } }

4. Efficient Build Caching

Speed up builds by caching dependencies:

// eas.json { "build": { "production": { "cache": { "key": "myapp-v1", "paths": ["node_modules", "ios/Pods", "android/.gradle"] } } } }

5. Gradual OTA Rollout

Safely deploy updates to production:

Start with 10% rollout

eas update --branch production --message "New feature" --rollout-percentage 10

Monitor metrics, then increase

eas update:configure-rollout --branch production --percentage 50

Full rollout

eas update:configure-rollout --branch production --percentage 100

6. Quick Testing on Physical Devices

For Expo Go (quick testing):

Start dev server

npx expo start

Scan QR code with:

- iOS: Camera app

- Android: Expo Go app

For dev client (full features):

Install dev client once

eas build --profile development --platform ios

Daily JavaScript updates via EAS Update

eas update --branch development

7. Troubleshooting Common Issues

"Unable to resolve module"

Clear Metro cache

npx expo start -c

Reinstall dependencies

rm -rf node_modules && npm install

"Build failed on EAS"

Check build logs

eas build:list eas build:view <build-id>

Run prebuild locally to catch issues early

npx expo prebuild

"Update not appearing in app"

Check update channel matches app's channel

eas channel:list

Verify update was published successfully

eas update:list --branch production

Force reload in app (shake device → reload)

8. Native Module Integration

When you need a native module not in Expo SDK:

Install the module

npm install react-native-awesome-module

Prebuild to generate native projects

npx expo prebuild

Rebuild dev client with new module

eas build --profile development --platform all

Continue using EAS Update for JS changes

eas update --branch development

9. Native Tab Navigation (SDK 54+)

Enable true native tab bars with Expo Router v6:

// app/(tabs)/_layout.tsx import { Tabs } from 'expo-router'; import { Platform } from 'react-native';

export default function TabLayout() { return ( <Tabs screenOptions={{ // Enable native tabs (iOS has translucent effect by default) tabBarStyle: Platform.select({ ios: { position: 'absolute' }, // For Liquid Glass default: {}, }), }} > <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} /> <Tabs.Screen name="profile" options={{ title: 'Profile', tabBarIcon: ({ color }) => <ProfileIcon color={color} /> }} /> </Tabs> ); }

10. iOS Liquid Glass (SDK 54+ / iOS 26+)

Create beautiful translucent effects:

// components/GlassCard.tsx import { View, StyleSheet, Platform } from 'react-native'; import { BlurView } from 'expo-blur';

export function GlassCard({ children }) { if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26) { return ( <BlurView style={styles.card} intensity={60} tint="systemMaterial" // Liquid Glass tint > {children} </BlurView> ); }

return <View style={[styles.card, styles.fallback]}>{children}</View>; }

const styles = StyleSheet.create({ card: { borderRadius: 16, overflow: 'hidden', }, fallback: { backgroundColor: 'rgba(255, 255, 255, 0.8)', }, });

11. Android Edge-to-Edge (SDK 54+)

Handle immersive display properly:

// app/_layout.tsx import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { View, StyleSheet, Platform } from 'react-native';

export default function RootLayout() { const insets = useSafeAreaInsets();

return ( <View style={[ styles.container, { // Account for edge-to-edge on Android 15+ paddingTop: insets.top, paddingBottom: insets.bottom, }, ]} > <Slot /> </View> ); }

// app.json - enable edge-to-edge { "expo": { "android": { "edgeToEdge": true // SDK 54 default } } }

12. expo-video (Replacing expo-av)

Modern video playback:

// components/VideoPlayer.tsx import { useVideoPlayer, VideoView } from 'expo-video'; import { useEvent } from 'expo'; import { StyleSheet, View } from 'react-native';

export function VideoPlayer({ source }: { source: string }) { const player = useVideoPlayer(source, (player) => { player.loop = true; player.play(); });

useEvent(player, 'statusChange', ({ status }) => { console.log('Player status:', status); });

return ( <View style={styles.container}> <VideoView style={styles.video} player={player} allowsFullscreen allowsPictureInPicture /> </View> ); }

const styles = StyleSheet.create({ container: { flex: 1 }, video: { width: '100%', aspectRatio: 16 / 9 }, });

13. expo-audio (Replacing expo-av)

Modern audio handling:

// hooks/useAudio.ts import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';

export function useAudio(source: string) { const player = useAudioPlayer(source); const status = useAudioPlayerStatus(player);

return { play: () => player.play(), pause: () => player.pause(), seek: (position: number) => player.seekTo(position), isPlaying: status.playing, position: status.currentTime, duration: status.duration, }; }

14. expo-image v2 with useImage

Imperative image loading:

import { useImage, Image } from 'expo-image';

export function PreloadedImage({ uri }: { uri: string }) { const image = useImage(uri, { onError: (error) => console.error('Failed to load image:', error), });

if (!image) { return <ActivityIndicator />; }

return ( <Image source={image} style={{ width: image.width, height: image.height }} contentFit="cover" /> ); }

Integration with SpecWeave

Increment Planning

• Document Expo setup steps in spec.md

• Include EAS Build/Update configuration in plan.md

• Track build and deployment tasks in tasks.md

Testing Strategy

• Use dev builds for feature development

• Preview builds for QA testing

• Production builds for stakeholder demos

Living Documentation

• Document build profiles in .specweave/docs/internal/operations/

• Track deployment procedures in runbooks

• Maintain credential management procedures

Cost Optimization

• Use EAS Update instead of rebuilding for JS-only changes

• Cache dependencies to reduce build times

• Monitor EAS usage in increment reports