---
name: expo-ui-nativo-swiftui-jetpack-compose
description: Guía de referencia para construir interfaces nativas reales en apps Expo/React Native usando @expo/ui: componentes universales cross-platform, sustitutos directos de librerías de la comunidad y árboles platform-específicos de SwiftUI (iOS) y Jetpack Compose (Android).
license: MIT
metadata:
  id: a9f74a51
  slug: expo-ui-nativo-swiftui-jetpack-compose
  titulo: "Expo UI: componentes nativos con SwiftUI y Jetpack Compose desde React"
  servicio: Web
  categoria_recurso: Web-Desarrollo
  tipo: referencia
  nivel: intermedio
  idioma: es
  idioma_original: en
  acceso: gratis
  precio_eur: 0
  plataformas: [iOS, Android, React Native, Expo]
  dependencias: [@expo/ui, Expo SDK 56+]
  licencia: { spdx: MIT, redistribuible: true, uso_comercial: true }
  fuente:
    repo: expo/skills
    url: https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui
    commit: 39d50f0
    autor: expo
    nombre_original: expo-ui
    duplicados_en: []
  seguridad: { veredicto: seguro, riesgo: bajo, escaneado: "2026-06-14", motor: "grep-estatico+auditor-llm" }
  ficha:
    que_hace: "Documenta cómo usar @expo/ui para renderizar UI nativa real (SwiftUI en iOS, Jetpack Compose en Android) desde componentes React."
    como_lo_hace: "Ofrece guías por capas: primero componentes universales, luego plataforma-específicos y finalmente drop-in replacements para migrar librerías existentes de la comunidad RN."
  content_hash: "a9f74a51e3ed744f2eea0c40090ca4eb7b2eaa1de80ac27a0dfea66882678d6c"
  version: 1.0.0
---

# Expo UI (`@expo/ui`)

`@expo/ui` renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. Start with its universal components (one tree for iOS, Android, and web) and drop to platform-specific SwiftUI/Jetpack Compose only when the universal layer falls short. It also ships drop-in replacements for migrating off RN community UI libraries.

> These instructions track the latest Expo SDK. The **universal** layer requires **SDK 56+**. Drop-in replacements and the platform-specific layers also exist on SDK 55. For component details on a specific SDK, refer to the Expo UI docs for that version.

## Installation

```bash
npx expo install @expo/ui
```

On SDK 56, `@expo/ui` works in Expo Go, so `npx expo start` runs it directly — no custom build required. On older SDKs, build a dev client first (`npx expo run:ios` / `npx expo run:android`).

Every `@expo/ui` tree — universal or platform-specific — must be wrapped in `Host`.

## Choosing an approach (read this first)

Work down this list and stop at the first layer that meets the need:

1. **Universal components — start here.** Import from the `@expo/ui` root. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS, `react-native-web`/`react-dom` on web). No platform file splits. → `./references/universal.md`

2. **Platform-specific (SwiftUI / Jetpack Compose).** Import from `@expo/ui/swift-ui` or `@expo/ui/jetpack-compose`. Use **only** when the universal layer is missing a component or modifier you need, or when you need platform-specific behavior or optimization. **Downside:** you write two trees and split them into `.ios.tsx` / `.android.tsx` files (or branch on `Platform.OS`) — more code to maintain. → `./references/swift-ui.md` and `./references/jetpack-compose.md`

**Already using an RN community UI library?** `@expo/ui` also ships **drop-in replacements** — API-compatible swaps for popular libraries (`@gorhom/bottom-sheet`, `@react-native-community/datetimepicker`, and more), imported from `@expo/ui/community/<name>`. This is a migration side-path for replacing an existing dependency, not a step in the universal-vs-platform decision above. → `./references/drop-in-replacements.md`

## References

Consult these resources as needed:

```
references/
  universal.md             Universal @expo/ui components and when to use them (SDK 56+)
  drop-in-replacements.md  API-compatible replacements for RN community UI libraries
  swift-ui.md              Platform-specific iOS UI: @expo/ui/swift-ui components, modifiers, RNHostView, useNativeState
  jetpack-compose.md       Platform-specific Android UI: @expo/ui/jetpack-compose components, modifiers, LazyColumn caveat, icons, useNativeState
```