EXPO_TOKEN=your-expo-access-token
# Optional: for EAS Build and Update
EAS_BUILD_PROFILE=production

# Create a new Expo project (recommended starting point)
npx create-expo-app@latest my-app
cd my-app

# Or add Expo to an existing React Native project
npx install-expo-modules@latest

# Install EAS CLI for builds and updates
npm install -g eas-cli
eas login

// app/_layout.tsx (Expo Router - file-based routing)
import { Stack } from 'expo-router';

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

// app.json / app.config.ts (Expo configuration)
import { ExpoConfig } from 'expo/config';

const config: ExpoConfig = {
  name: 'MyApp',
  slug: 'my-app',
  version: '1.0.0',
  orientation: 'portrait',
  icon: './assets/icon.png',
  splash: { image: './assets/splash.png', resizeMode: 'contain' },
  ios: { bundleIdentifier: 'com.example.myapp', supportsTablet: true },
  android: { package: 'com.example.myapp', adaptiveIcon: { foregroundImage: './assets/adaptive-icon.png' } },
  plugins: [],
};

export default config;

// app/_layout.tsx - Root layout with tabs
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function Layout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#007AFF' }}>
      <Tabs.Screen
        name="index"
        options={{ title: 'Home', tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} /> }}
      />
      <Tabs.Screen
        name="profile"
        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} /> }}
      />
    </Tabs>
  );
}

// app/details/[id].tsx - Dynamic route with params
import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';

export default function Details() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <View><Text>Detail ID: {id}</Text></View>;
}

import { FlatList } from 'react-native';
import { useCallback, memo } from 'react';

const MemoizedItem = memo(({ title }: { title: string }) => (
  <View style={styles.item}><Text>{title}</Text></View>
));

export default function OptimizedList({ data }: { data: Item[] }) {
  const renderItem = useCallback(({ item }: { item: Item }) => (
    <MemoizedItem title={item.title} />
  ), []);

  const keyExtractor = useCallback((item: Item) => item.id, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}
      windowSize={5}
      maxToRenderPerBatch={10}
      removeClippedSubviews={true}
      initialNumToRender={10}
    />
  );
}

npx create-expo-module my-native-module --local

// modules/my-native-module/ios/MyNativeModule.swift
import ExpoModulesCore

public class MyNativeModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyNativeModule")

    Function("getDeviceName") {
      return UIDevice.current.name
    }

    AsyncFunction("fetchData") { (url: String, promise: Promise) in
      // async native work
      promise.resolve(["status": "ok"])
    }
  }
}

// modules/my-native-module/index.ts
import MyNativeModule from './src/MyNativeModuleModule';

export function getDeviceName(): string {
  return MyNativeModule.getDeviceName();
}

# Install and configure
npx expo install expo-updates
eas update:configure

# Publish an update to the preview channel
eas update --branch preview --message "Fix checkout bug"

# Publish to production
eas update --branch production --message "v1.2.1 hotfix"

// app.config.ts - updates configuration
{
  updates: {
    url: 'https://u.expo.dev/your-project-id',
    fallbackToCacheTimeout: 0, // 0 = don't block app start waiting for update
  },
  runtimeVersion: {
    policy: 'appVersion', // or 'fingerprint' for automatic compatibility
  },
}

// plugins/withCustomScheme.ts
import { ConfigPlugin, withInfoPlist, withAndroidManifest } from 'expo/config-plugins';

const withCustomScheme: ConfigPlugin<{ scheme: string }> = (config, { scheme }) => {
  config = withInfoPlist(config, (config) => {
    config.modResults.CFBundleURLTypes = [
      ...(config.modResults.CFBundleURLTypes || []),
      { CFBundleURLSchemes: [scheme] },
    ];
    return config;
  });

  config = withAndroidManifest(config, (config) => {
    const mainActivity = config.modResults.manifest.application?.[0]?.activity?.[0];
    if (mainActivity) {
      mainActivity['intent-filter'] = [
        ...(mainActivity['intent-filter'] || []),
        {
          action: [{ $: { 'android:name': 'android.intent.action.VIEW' } }],
          category: [
            { $: { 'android:name': 'android.intent.category.DEFAULT' } },
            { $: { 'android:name': 'android.intent.category.BROWSABLE' } },
          ],
          data: [{ $: { 'android:scheme': scheme } }],
        },
      ];
    }
    return config;
  });

  return config;
};

export default withCustomScheme;

// app.config.ts - use the plugin
{ plugins: [['./plugins/withCustomScheme', { scheme: 'myapp' }]] }

# Initialize EAS Build
eas build:configure

# Build for both platforms
eas build --platform all --profile production

# Submit to stores
eas submit --platform ios
eas submit --platform android

// eas.json
{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": { "simulator": true }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {
      "ios": { "appleId": "you@example.com", "ascAppId": "123456789" },
      "android": { "serviceAccountKeyPath": "./google-sa-key.json" }
    }
  }
}

// Use React DevTools Profiler or why-did-you-render to find actual problems first

// Memoize expensive computations
const sortedItems = useMemo(() =>
  items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// Memoize callbacks passed to child components
const handlePress = useCallback((id: string) => {
  navigation.navigate('Details', { id });
}, [navigation]);

// Memoize entire components when props are stable
const ExpensiveChart = memo(({ data }: { data: DataPoint[] }) => {
  // heavy rendering logic
});

// Use Zustand or Jotai for fine-grained state subscriptions
// instead of React Context which re-renders all consumers
import { create } from 'zustand';

const useStore = create<AppState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));