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

References

• Expo Documentation
• EAS Documentation
• Expo Core Libraries