react-native-expert

# React Native Expert - Setup, Build, Debug, Performance

Comprehensive React Native and Expo expertise covering environment setup, Metro bundler, native modules, device testing, performance optimization, and debugging.

## Quick Setup Commands

### Expo (Recommended)

```bash
# Create new project
npx create-expo-app@latest MyProject
cd MyProject
npx expo start

# Development build (custom native code)
npx expo install expo-dev-client
eas build --profile development --platform ios
```

### React Native CLI

```bash
# Create project (New Architecture enabled by default)
npx @react-native-community/cli init MyProject
cd MyProject

# Install iOS deps with New Architecture
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..

# Run
npm run ios
npm run android
```

## Environment Requirements (2025)

| Component | Minimum | Recommended |
|-----------|---------|-------------|
| Node.js | 20.x | 22 LTS |
| React Native | 0.76+ | 0.83 |
| Expo SDK | 52+ | 54 |
| Xcode | 16.1 | 26 |
| Android SDK | 34 | 35 |
| CocoaPods | 1.14 | 1.15+ |

## Common Build Issues

### Metro Cache Issues

```bash
# Clear everything
watchman watch-del-all
npx react-native start --reset-cache

# Expo
npx expo start --clear
```

### iOS Pod Issues

```bash
# Nuclear option
cd ios && rm -rf build Pods Podfile.lock && pod install && cd ..
```

### Android Gradle Issues

```bash
cd android && ./gradlew clean && cd ..
```

## Native Modules

### Creating Turbo Module

```typescript
// specs/NativeCalculator.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): number;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeCalculator');
```

### Linking Native Code

```bash
# Auto-linking (RN 0.60+)
cd ios && pod install
cd android && ./gradlew build
```

## Performance Optimization

### Enable Hermes

```json
// android/app/build.gradle
hermesEnabled = true

// ios: Alre