Get Started

# ===== 1. Scaffold (Expo, recommended in 2026) =====
npx create-expo-app my-app
cd my-app
npx expo start

# Scan the QR code with Expo Go on a real phone, or press 'i' for iOS sim / 'a' for Android emulator.

# ===== 2. The structure =====
# app/                routes (expo-router file-based routing)
# components/         reusable widgets
# assets/             images + fonts
# package.json
# app.json            app config (name, icons, splash, plugins)

# ===== 3. A first screen (expo-router) =====
# app/index.tsx
import { View, Text, Pressable } from 'react-native';
import { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
      <Text style={{ fontSize: 24 }}>Clicks: {count}</Text>
      <Pressable onPress={() => setCount(c => c + 1)}
        style={{ padding: 12, backgroundColor: '#2563eb', borderRadius: 8 }}>
        <Text style={{ color: 'white' }}>+1</Text>
      </Pressable>
    </View>
  );
}

# ===== 4. Add a route =====
# app/about.tsx
import { View, Text } from 'react-native';
export default function About() {
  return <View><Text>About</Text></View>;
}

# Navigate:
import { router } from 'expo-router';
router.push('/about');

# Or with Link:
import { Link } from 'expo-router';
<Link href="/about">About</Link>

# ===== 5. State + data =====
npm install @tanstack/react-query
# For TanStack Query, see their docs; works the same as on web.

# ===== 6. Native APIs (Expo modules) =====
npx expo install expo-camera expo-location expo-file-system

# ===== 7. EAS build (cloud builds) =====
npm install -g eas-cli
eas login
eas build:configure
eas build -p ios            # build for iOS
eas build -p android        # build for Android
eas submit -p ios           # submit to App Store
eas submit -p android       # submit to Play Store

# ===== 8. OTA updates =====
eas update --branch production --message 'hotfix copy'

# ===== 9. Tips =====
# - Use TypeScript (npx create-expo-app --template default has it)
# - Test on real devices early; simulators lie
# - Use FlatList for long lists; never ScrollView
# - For long-form forms, use react-hook-form

# ===== Patterns to internalise =====
# - Expo + expo-router for new apps in 2026
# - EAS for builds + submits + updates
# - StyleSheet over inline styles in hot lists
# - One state lib + one data lib; do not mix

# ===== Pitfalls =====
# - Putting strings outside <Text> (crashes)
# - ScrollView for 100+ items (use FlatList)
# - Skipping SafeAreaView -> content under notches
# - Forgetting npx pod-install / cap sync after adding native modules

# With Expo
npx create-expo-app@latest my-app
cd my-app
npx expo start    # scan QR with Expo Go app