Expo

Expo

Expo is an open-source framework for apps that run natively on Android, iOS, and the web. It builds on top of React Native, providing a curated set of tools and libraries (SDK) to simplify the development lifecycle.

When to Use

• Building React Native apps without managing Xcode/Android Studio projects manually.
• Needing fast Over-the-Air (OTA) updates via EAS Update.
• Rapid prototyping with the Expo Go app.
• Teams that prefer a "Managed" workflow but still need native capabilities (via Config Plugins).

Quick Start

# Create a new app with Expo Router (default in 2025)
npx create-expo-app@latest my-safe-app
cd my-safe-app
npx expo start

// app/_layout.tsx
import { Stack } from "expo-router";

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

// app/index.tsx
import { View, Text, StyleSheet } from "react-native";
import { Link } from "expo-router";
import { Image } from "expo-image";

export default function Index() {
  return (
    <View style={styles.container}>
      <Image
        source="https://picsum.photos/200"
        style={{ width: 100, height: 100, marginBottom: 20 }}
        contentFit="cover"
      />
      <Text style={styles.text}>Welcome to Expo!</Text>
      <Link href="/details/123" style={styles.link}>
        Go to Details
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  text: { fontSize: 20, fontWeight: "bold" },
  link: { marginTop: 15, color: "#007AFF" },
});

Core Concepts

Managed Workflow & Prebuild

Historically, Expo had a "ejected" vs "managed" split. Modern Expo uses Prebuild (Continuous Native Generation). You don't commit android or ios folders; instead, they are generated on demand from app.json configuration.

EAS (Expo Application Services)

• EAS Build: Compiles your app in the cloud (or locally) into .apk / .ipa.
• EAS Submit: Uploads binary to stores.
• EAS Update: Pushes JS/asset fixes instantly to users.

Config Plugins

Functions that modify native files (Info.plist, AndroidManifest.xml) during prebuild. This allows you to use any native library without "ejecting".

Common Patterns

Development Builds

Instead of Expo Go (which has a fixed set of native code), create a Development Build. This is a custom version of Expo Go that includes your specific native dependencies.

• npx expo run:ios or npx eas build --profile development --platform ios.

Expo Router

File-system based routing (like Next.js).

• app/home.tsx -> /home
• app/user/[id].tsx -> /user/123

Best Practices

Do:

• Use npx expo install to install libraries (ensures version compatibility).
• Use Expo Image (expo-image) for performant image loading and caching.
• Use EAS Build for creating production binaries.
• Use Config Plugins instead of manually editing native files.

Don't:

• Don't use Expo Go if you need custom native code (use Dev Builds).
• Don't commit ios and android directories if using CNG (Continuous Native Generation).
• Don't ignore npx expo doctor warnings.

Troubleshooting

Error	Cause	Solution
Native module cannot be null	Library installed but not in the runtime.	Rebuild the Development Build (npx expo run:ios).
EAS Build failed	Configuration error or build timeout.	Check logs on expo.dev; run npx expo-doctor.
Expo Go crashes on launch	Incompatible SDK version or native code.	Update Expo Go or switch to Development Build.

References

• Expo Documentation
• EAS Documentation
• Expo Core Libraries