// `@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.
Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.
Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.
Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.
Guidelines for upgrading Expo SDK versions and fixing dependency issues
Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.
`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.
| name | Expo UI Jetpack Compose |
| description | `@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app. |
The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI Jetpack Compose docs for that version for the most accurate information.
npx expo install @expo/ui
A native rebuild is required after installation (npx expo run:android).
@expo/ui/jetpack-compose, modifiers from @expo/ui/jetpack-compose/modifiers..d.ts type files to confirm the exact API before using a component or modifier. Run node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))" to locate the package, then read the relevant {ComponentName}/index.d.ts files. This is the most reliable source of truth.Host. Use <Host matchContents> for intrinsic sizing, or <Host style={{ flex: 1 }}> when you need explicit size (e.g. as a parent of LazyColumn). Example:import { Host, Column, Button, Text } from "@expo/ui/jetpack-compose";
import { fillMaxWidth, paddingAll } from "@expo/ui/jetpack-compose/modifiers";
<Host matchContents>
<Column verticalArrangement={{ spacedBy: 8 }} modifiers={[fillMaxWidth(), paddingAll(16)]}>
<Text style={{ typography: "titleLarge" }}>Hello</Text>
<Button onPress={() => alert("Pressed!")}>Press me</Button>
</Column>
</Host>;
ScrollView/FlatList for scrollable lists. Wrap in <Host style={{ flex: 1 }}>.<Icon source={require('./icon.xml')} size={24} /> with Android XML vector drawables. To get icons: go to Material Symbols, select an icon, choose the Android platform, and download the XML vector drawable. Save these as .xml files in your project's assets/ directory (e.g. assets/icons/wifi.xml). Metro bundles .xml assets automatically — no metro config changes needed.