Agent Skills
› openai/plugins
› expo-ui-jetpack-compose
expo-ui-jetpack-compose
GitHub指导在 Expo SDK 55 中集成 Jetpack Compose。涵盖安装、Host 包裹规范、组件导入及类型确认方法，提供 LazyColumn 和 Icon 等核心组件的使用示例与最佳实践。
Trigger Scenarios
需要在 Android 原生视图中使用 Jetpack Compose
Expo 项目集成 @expo/ui/jetpack-compose 包
询问 Expo UI Jetpack Compose 的安装或配置步骤
Install
npx skills add openai/plugins --skill expo-ui-jetpack-compose -g -y
SKILL.md
Frontmatter
{
"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.
Installation
npx expo install @expo/ui
A native rebuild is required after installation (npx expo run:android).
Instructions
- Expo UI's API mirrors Jetpack Compose's API. Use Jetpack Compose and Material Design 3 knowledge to decide which components or modifiers to use. If you need deeper Jetpack Compose or Material 3 guidance (e.g. which component to pick, layout patterns, theming), consult current Jetpack Compose and Material Design 3 documentation before implementing.
- Components are imported from
@expo/ui/jetpack-compose, modifiers from@expo/ui/jetpack-compose/modifiers. - Always read the
.d.tstype files to confirm the exact API before using a component or modifier. Runnode -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))"to locate the package, then read the relevant{ComponentName}/index.d.tsfiles. This is the most reliable source of truth. - When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
- When unsure about a modifier's API, refer to the docs - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
- Every Jetpack Compose tree must be wrapped in
Host. Use<Host matchContents>for intrinsic sizing, or<Host style={{ flex: 1 }}>when you need explicit size (e.g. as a parent ofLazyColumn). 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>;
Key Components
- LazyColumn — Use instead of react-native
ScrollView/FlatListfor scrollable lists. Wrap in<Host style={{ flex: 1 }}>. - Icon — Use
<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.xmlfiles in your project'sassets/directory (e.g.assets/icons/wifi.xml). Metro bundles.xmlassets automatically — no metro config changes needed.
Version History
- 11c74d6 Current 2026-07-19 09:34
