React Native Expo

React Native & Expo Development

Build cross-platform mobile apps for iOS and Android using React Native with Expo.

Instructions

1. For Expo SDK packages (camera, location, notifications), see references/expo-sdk-reference.md
2. For React Native core components, see references/react-native-reference.md
3. For Expo Router navigation, see references/expo-router-reference.md
4. For app.json, eas.json, and builds, see references/expo-config-eas-reference.md
5. For state management and patterns, see references/common-patterns.md
6. PROACTIVELY fetch https://docs.expo.dev/llms.txt for comprehensive Expo documentation links when you need deeper information on any Expo topic not covered in the local references
7. PROACTIVELY fetch https://reactnative.dev/llms.txt for comprehensive React Native documentation links when you need deeper information on React Native core APIs, components, or architecture

Quick Start

# Create new project
npx create-expo-app@latest my-app
cd my-app
npx expo start

# Install packages (always use expo install for compatibility)
npx expo install expo-camera expo-image-picker expo-location

Reference Files

Load these based on the task at hand:

Essential Commands

# Development
npx expo start              # Start dev server
npx expo start -c           # Clear cache and start
npx expo start --dev-client # For development builds

# Package management
npx expo install <package>  # Install with version matching
npx expo install --fix      # Fix mismatched versions

# Building
npx expo prebuild           # Generate native projects
npx expo run:ios            # Build and run iOS locally
npx expo run:android        # Build and run Android locally

# EAS
eas build --profile development --platform ios
eas build --profile preview --platform all
eas build --profile production --platform all
eas submit --platform ios
eas update --branch production --message "Update"

Project Structure

my-app/
├── app/                    # Expo Router screens
│   ├── _layout.tsx         # Root layout (required)
│   ├── index.tsx           # / route
│   ├── (tabs)/             # Tab group
│   │   ├── _layout.tsx     # Tab navigator
│   │   └── home.tsx
│   └── [id].tsx            # Dynamic route
├── src/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   └── stores/
├── assets/
├── app.json
├── eas.json
└── tsconfig.json

Common Patterns Quick Reference

Navigation (Expo Router)

// Navigate
import { router, Link } from 'expo-router';
router.push('/details');
router.push({ pathname: '/user/[id]', params: { id: '123' } });
router.replace('/home');
router.back();

// Link component
<Link href="/about">About</Link>
<Link href="/user/123" asChild><Pressable>...</Pressable></Link>

// Read params
const { id } = useLocalSearchParams<{ id: string }>();

Layout Structure

// Stack (default)
import { Stack } from "expo-router";
export default function Layout() {
  return <Stack screenOptions={{ headerShown: true }} />;
}

// Tabs
import { Tabs } from "expo-router";
export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
    </Tabs>
  );
}

Core Components

import { View, Text, TextInput, FlatList, Pressable, StyleSheet } from 'react-native';

// Basic layout
<View style={styles.container}>
  <Text style={styles.title}>Hello</Text>
</View>

// List
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

// Touch handling
<Pressable
  => {}}
  style={({ pressed }) => [styles.button, pressed && styles.pressed]}
>
  <Text>Press Me</Text>
</Pressable>

Common Expo SDK Usage

// Camera
import { CameraView, useCameraPermissions } from "expo-camera";
const [permission, requestPermission] = useCameraPermissions();

// Image Picker
import * as ImagePicker from "expo-image-picker";
const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ["images"],
});

// Location
import * as Location from "expo-location";
await Location.requestForegroundPermissionsAsync();
const location = await Location.getCurrentPositionAsync({});

// Secure Storage
import * as SecureStore from "expo-secure-store";
await SecureStore.setItemAsync("token", "value");
const value = await SecureStore.getItemAsync("token");

Troubleshooting

Common Issues

"Unable to resolve module" error

npx expo start -c  # Clear cache
rm -rf node_modules && npm install

Native module not found

npx expo prebuild --clean
npx expo run:ios  # or run:android

Incompatible package versions

npx expo install --fix

EAS build fails

• Check eas.json configuration
• Verify credentials with eas credentials
• Check build logs at expo.dev

Platform-Specific Code

import { Platform } from "react-native";

// Conditional value
const padding = Platform.OS === "ios" ? 20 : 16;

// Platform.select
const styles = {
  shadow: Platform.select({
    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 } },
    android: { elevation: 4 },
  }),
};

// File-based: Component.ios.tsx, Component.android.tsx

Best Practices

1. Always use npx expo install for packages to ensure version compatibility
2. Use TypeScript for type safety and better DX
3. Use Expo Router for file-based navigation
4. Store sensitive data in expo-secure-store, not AsyncStorage
5. Use development builds instead of Expo Go for production apps
6. Memoize expensive computations and callbacks
7. Use FlatList for long lists, not ScrollView with map()
8. Test on real devices before submitting to stores
9. Use EAS Update for OTA updates
10. Keep SDK version current - update quarterly