Generate Native Android UI with Jetpack Compose in Expo

Expo UI Jetpack Compose helps you build Android-native UI in Expo using the @expo/ui/jetpack-compose package, which lets you use real Jetpack Compose views and modifiers directly inside an Expo app. It covers choosing Compose components or modifiers, embedding them in a Host, and translating Jetpack Compose patterns into Expo UI code. The instructions apply specifically to Expo SDK 55 - for other SDK versions, the skill points to the SDK-specific Expo UI Jetpack Compose docs instead.

Installation requires:

npx expo install @expo/ui

followed by a native rebuild (npx expo run:android), since this integrates real native Compose views rather than a JS-only UI layer.

Expo UI's API mirrors Jetpack Compose's own API, so Jetpack Compose and Material Design 3 knowledge transfers directly to deciding which components or modifiers to use. Components are imported from @expo/ui/jetpack-compose, and modifiers from @expo/ui/jetpack-compose/modifiers. Before using an unfamiliar component or modifier, the skill instructs fetching its docs to confirm the exact API, at fixed per-component and per-modifier documentation URLs under docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose.

Every Jetpack Compose tree in Expo UI must be wrapped in a Host component - <Host matchContents> for intrinsic sizing, or <Host style={{ flex: 1 }}> when explicit sizing is needed, such as when Host is the parent of a LazyColumn. Two key components get called out specifically: LazyColumn, used instead of React Native's ScrollView or FlatList for scrollable lists (and itself wrapped in a flex-sized Host), and Icon, used with Android XML vector drawables such as those from Material Symbols, rendered via a source prop pointing at a local icon.xml file with a configurable size.

Use this skill when you need to build Android-native UI in Expo using @expo/ui/jetpack-compose, when the task involves choosing Compose views or modifiers, embedding them in a Host, or translating Jetpack Compose patterns into Expo UI code, and specifically when you are working against Expo SDK 55 behavior for Jetpack Compose integration.

Do not treat the output as a substitute for environment-specific validation, testing, or expert review, and use it only when the task clearly matches Jetpack Compose UI integration in Expo. If the SDK version in use is not 55, consult the SDK-specific documentation rather than applying these SDK-55-specific instructions as-is. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Input is a UI requirement expressed in Jetpack Compose or Material Design 3 terms. Output is Expo UI code using components and modifiers imported from @expo/ui/jetpack-compose and @expo/ui/jetpack-compose/modifiers, wrapped in an appropriately sized Host, following the per-component documentation fetched at the SDK-55-specific Expo docs URLs.

The skill integrates with the Expo CLI for installation (npx expo install @expo/ui) and native rebuilds (npx expo run:android), and references live Expo documentation pages per component and per modifier under docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose. It also assumes familiarity with Android's Material Symbols icon set for the Icon component.

Expo/React Native developers on Expo SDK 55 who need to embed real native Jetpack Compose views and modifiers - not JS-only approximations - into their Android UI.