免费在 GitHub 公开

expo-ui-jetpack-compose

Build Android interfaces in Expo using Jetpack Compose components and modifiers, which control layout and appearance. The skill guides component selection, sizing, scrollable lists, and XML icons for SDK 55.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

openai/plugins

查看安装方法

适用场景

Add native Android UI components to an Expo app
Build a scrollable list with LazyColumn
Display Android XML vector icons
Check component APIs and layout sizing

包含的文件（2）

SKILL.md2.7 KB
agents/openai.yaml353 B

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

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.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.
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 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>;

Key Components

LazyColumn — Use instead of react-native ScrollView/FlatList for 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 .xml files in your project's assets/ directory (e.g. assets/icons/wifi.xml). Metro bundles .xml assets automatically — no metro config changes needed.

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

accessibility-and-inclusive-visualization

免费

Review charts, diagrams, and dashboards for accessibility, including color contrast, keyboard access, and text alternatives. Get specific guidance for preserving key findings in screen readers, static exports, and reduced-motion views.

中文简介正在准备中。当前显示英语简介。

Reviewing dashboard colors and keyboard access
Writing chart alt text and long descriptions
Preparing accessible figures for PDF reports