React Native 0.84
Dominio Total

<!-- Sin esto, la Activity se destruye y recrea al rotar -->
<activity
  android:name=".MainActivity"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|
                          screenSize|smallestScreenSize|uiMode">
  <!-- RN maneja estos cambios internamente sin recrear la Activity -->
</activity>

@UIApplicationMain
class AppDelegate: RCTAppDelegate {

  override func application(_ application: UIApplication,
    didFinishLaunchingWithOptions options: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // RN 0.84: Nueva forma de setup con New Architecture
    self.moduleName = "MyApp"
    self.initialProps = [:]

    return super.application(application, didFinishLaunchingWithOptions: options)
    // super crea el RCTHost (New Arch) o RCTBridge (legacy)
  }

  override func bundleURL() -> URL? {
    // En debug: Metro bundler
    // En prod: bundle local
    return RCTBundleURLProvider.sharedSettings()
      .jsBundleURL(forBundleRoot: "index")
  }
}

const Screen = () => {
  useEffect(() => {
    const networkReq = startRequest()
    const timer      = setInterval(poll, 5000)
    const sub        = eventEmitter.addListener('event', cb)
    const animation  = startAnimation()

    return () => {
      // ✅ ORDEN CORRECTO DE CLEANUP:

      // 1. PRIMERO: Cancela operaciones async
      //    Evita que un callback llegue tras el unmount
      networkReq.cancel()

      // 2. Limpia timers (pueden disparar callbacks)
      clearInterval(timer)

      // 3. Remueve event listeners
      //    Evita memory leaks y callbacks fantasma
      sub.remove()

      // 4. ÚLTIMO: Detén animaciones
      //    Animations son refs, no causan re-renders
      animation.stop()
    }
  }, [])
}

my-monorepo/
├── apps/
│   ├── mobile/          # React Native app
│   │   ├── android/
│   │   ├── ios/
│   │   ├── src/
│   │   └── package.json
│   └── web/             # Next.js / Expo Web
│       └── package.json
├── packages/
│   ├── ui/              # Componentes compartidos
│   │   └── package.json  # "@myapp/ui"
│   ├── core/            # Business logic
│   │   └── package.json  # "@myapp/core"
│   └── types/           # TypeScript types
│       └── package.json  # "@myapp/types"
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

# Instalar desde raíz del monorepo
pnpm install

# Buildear todos los packages en orden correcto
pnpm turbo build

# Correr solo el mobile
pnpm turbo dev --filter=mobile

# Agregar dependencia a un package específico
pnpm add react-query --filter=@myapp/core

# Agregar package local como dependencia
pnpm add @myapp/ui --filter=mobile
# En package.json de mobile: "@myapp/ui": "workspace:*"

// DOMAIN: La entidad. Puro TypeScript.
export interface User {
  id: string
  email: string
  name: string
  role: 'admin' | 'user'
}

// DOMAIN: Interface (contrato). No sabe CÓMO se implementa.
export interface AuthRepository {
  login(email: string, password: string): Promise<User>
  logout(): Promise<void>
  getCurrentUser(): Promise<User | null>
}

// DOMAIN: Use Case. Orquesta la lógica de negocio.
export class LoginUseCase {
  constructor(private authRepo: AuthRepository) {}

  async execute(email: string, password: string): Promise<User> {
    // Validaciones de negocio
    if (!email.includes('@')) throw new Error('Email inválido')
    if (password.length < 8)   throw new Error('Password muy corto')

    return this.authRepo.login(email, password)
  }
}

// DATA: Implementación concreta. Aquí sí hablamos con la API.
export class AuthRepositoryImpl implements AuthRepository {
  async login(email: string, password: string): Promise<User> {
    const response = await fetch(`${API_URL}/auth/login`, {
      method: 'POST',
      body: JSON.stringify({ email, password })
    })
    const dto = await response.json()
    return UserMapper.toDomain(dto) // DTO → Entity
  }
}

// PRESENTATION: La pantalla. Solo UI + llamar use case.
const useLoginViewModel = () => {
  const loginUseCase = useDI<LoginUseCase>('LoginUseCase')
  const [loading, setLoading] = useState(false)
  const [error, setError]     = useState<string>()

  const login = async (email: string, pass: string) => {
    setLoading(true)
    try {
      await loginUseCase.execute(email, pass)
    } catch (e) {
      setError(e.message)
    } finally { setLoading(false) }
  }

  return { login, loading, error }
}

const LoginScreen = () => {
  const { login, loading, error } = useLoginViewModel()
  // ... solo JSX aquí
}

packages/core/src/
├── domain/
│   ├── entities/       # User, Product, Order...
│   ├── repositories/   # Interfaces (contratos)
│   └── usecases/       # LoginUseCase, GetProductsUseCase...
├── data/
│   ├── datasources/    # API calls, SQLite queries
│   ├── repositories/   # Implementaciones concretas
│   └── mappers/        # DTO ↔ Entity conversions
└── di/
    └── container.ts    # Dependency Injection setup

apps/mobile/src/
└── presentation/
    ├── screens/        # Pantallas
    ├── components/     # Componentes UI
    └── viewmodels/     # Hooks con lógica de UI