React Native Setup

# No global CLI — everything runs through npx
# (the legacy global `expo-cli` was sunset in 2023; never `npm install -g expo-cli`)
npx create-expo-app@latest MyApp
npx create-expo-app@latest MyApp --template blank-typescript

# Start dev server
cd MyApp
npx expo start
# Press i / a for iOS simulator / Android emulator, or scan the QR with Expo Go

# Compile native dev builds (needed once you add custom native code)
npx expo run:ios
npx expo run:android

# Install dependencies
brew install node watchman
brew install --cask android-studio  # Android
# Xcode via Mac App Store            # iOS

# Create new project (TypeScript template by default since RN 0.71)
npx @react-native-community/cli@latest init MyApp
cd MyApp

# Run on iOS
npx react-native run-ios
npx react-native run-ios --simulator="iPhone 16 Pro"

# Run on Android (emulator must be running)
npx react-native run-android

MyApp/
├── android/          # Android native project
├── ios/              # iOS native project (Xcode)
├── src/
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   └── utils/
├── App.tsx           # Root component
├── index.js          # Entry point
├── metro.config.js   # Metro bundler config
├── babel.config.js
└── package.json

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello, React Native!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

# Only needed when converting an old JavaScript project
npm install -D typescript @types/react
# then add tsconfig.json and rename files to .ts/.tsx

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

# Temporarily opt a bare project back to the legacy architecture
# android/gradle.properties:
#   newArchEnabled=false
# iOS:
RCT_NEW_ARCH_ENABLED=0 bundle exec pod install

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json'],
    assetExts: ['png', 'jpg', 'gif', 'svg', 'ttf'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

# Install react-native-config
npm install react-native-config
cd ios && pod install

# .env
API_URL=https://api.example.com
APP_ENV=development

import Config from 'react-native-config';

const apiUrl = Config.API_URL;        // "https://api.example.com"
const env = Config.APP_ENV;           // "development"

# iOS — install pods after adding native packages
cd ios && pod install && cd ..

# Clear Metro cache
npx react-native start --reset-cache

# Clean Android build
cd android && ./gradlew clean && cd ..

# Clean iOS build
xcodebuild clean -workspace ios/MyApp.xcworkspace -scheme MyApp

# Upgrade React Native version
npx react-native upgrade

# Check environment setup
npx react-native doctor

# React Native DevTools — first-party debugger since RN 0.76
# Press `j` in the Metro / `npx expo start` terminal to open it
# (Console, Sources + breakpoints, React components/profiler, Network)

# Standalone React DevTools (older RN versions)
npx react-devtools

# Reactotron — state/network inspector
npm install --dev reactotron-react-native