mobile exporeact-nativemobileiosandroidcross-platform

expo-rn

Expo SDK for React Native development

Quality 100% Code blocks 4 Sections 8 Lines 141 RU translation yes
view source
Models: sonnetopus
flutter →

Expo SDK

Build cross-platform mobile apps with Expo SDK and React Native.

Quick Start

// app/index.tsx — Expo Router file-based routing
import { router } from 'expo-router';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { useSQLiteContext } from 'expo-sqlite';

export default function HomeScreen() {
  const db = useSQLiteContext();

  const [items, setItems] = useState<Todo[]>([]);

  useEffect(() => {
    db.getAllAsync('SELECT * FROM todos ORDER BY created_at DESC')
      .then(setItems);
  }, []);

  return (
    <View className="flex-1 p-4">
      <FlatList
        data={items}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => router.push(`/todo/${item.id}`)}
            className="p-3 bg-white rounded-lg mb-2 shadow"
          >
            <Text className={`text-lg ${item.completed ? 'line-through text-gray-400' : ''}`}>
              {item.title}
            </Text>
          </TouchableOpacity>
        )}
      />
      <TouchableOpacity
        onPress={() => router.push('/todo/new')}
        className="bg-blue-500 p-4 rounded-full absolute bottom-8 right-8 shadow-lg"
      >
        <Text className="text-white text-2xl text-center">+</Text>
      </TouchableOpacity>
    </View>
  );
}
# Create and develop
npx create-expo-app my-app --template blank-typescript
cd my-app
npx expo start

# Native builds
npx expo run:ios    # iOS simulator
npx expo run:android  # Android emulator

# Production builds
eas build --platform all
eas submit --platform ios
eas submit --platform android

# OTA updates
npx expo update

Key Concepts

Expo provides a managed workflow with built-in APIs (camera, location, SQLite, notifications, auth). Expo Router provides file-based navigation. EAS Build handles native compilation. OTA updates skip app store review.

When to Use

  • Cross-platform iOS + Android apps from one codebase
  • Apps needing native features (camera, GPS, biometrics)
  • MVPs requiring fast iteration with OTA updates
  • Teams wanting to avoid native build tooling setup

Step-by-Step

1. Scaffold: `npx create-expo-app my-app --template blank-typescript`, then `cd my-app && npx expo start`.

2. Add routing: install `expo-router` and use file-based routes under `app/` (or run with the default router template).

3. Configure native APIs: run `npx expo install expo-camera expo-location expo-sqlite` and add the plugin config in `app.json`.

4. Develop on device: open in Expo Go or run `npx expo run:ios`/`run:android` for a native dev build.

5. Store data locally: use `expo-sqlite` (SQL via `db.getAllAsync`) or AsyncStorage for key-value state.

6. Ship: `eas build --platform all`, then `eas submit`; iterate with `npx expo update` (OTA).

Examples

// app/todo/[id].tsx — dynamic route with local SQLite
import { useLocalSearchParams } from 'expo-router';
import { useSQLiteContext } from 'expo-sqlite';
import { View, Text } from 'react-native';

export default function TodoDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const db = useSQLiteContext();
  const todo = db.getFirstSync('SELECT * FROM todos WHERE id = ?', [id]);

  return (
    <View className="p-4">
      <Text className="text-xl">{todo?.title}</Text>
      <Text>{todo?.completed ? 'Done' : 'Pending'}</Text>
    </View>
  );
}
# Native build & OTA
npx expo prebuild
eas build --platform android --profile preview
npx expo update

Best Practices

  • Use Expo SDK with Expo Go for fast development iteration.
  • Manage dependencies with `expo install` for compatible versions.
  • Structure with typed components and hooks for shared logic.
  • Handle deep links and navigation with expo-router.
  • Optimize images and use expo-av for media carefully.
  • Test on both platforms; use EAS for builds.

Troubleshooting

  • Version mismatch: run `npx expo install --fix`.
  • Build failures: check EAS credentials and app config.
  • Native module missing: prebuild and add the config plugin.
  • Slow reload: split the bundle and avoid heavy imports.

Validation

1. `npx expo start` launches Metro bundler successfully

2. App renders on both iOS simulator and Android emulator

3. Native features (camera, SQLite) work on both platforms

4. `eas build` produces installable binaries

flutter →