---
id: daily-expo-ui-jetpack-compose
name: "expo-ui-jetpack-compose"
url: https://skills.yangsir.net/skill/daily-expo-ui-jetpack-compose
author: expo
domain: mobile
tags: ["android-development", "jetpack-compose", "expo"]
install_count: 297
rating: 4.10 (7 reviews)
github: https://github.com/expo/skills
---

# expo-ui-jetpack-compose

> 为 Expo SDK 55 提供 Android Jetpack Compose 原生组件集成指南，包含安装步骤和配置说明，需要重新构建原生代码

**Stats**: 297 installs · 4.1/5 (7 reviews)

## Before / After 对比

### Android 原生组件集成

**Before**:

手动配置 Gradle 依赖、处理 AndroidManifest.xml 权限、解决库版本冲突，集成一个组件需要 2-3 小时，调试复杂度高

**After**:

使用 Expo UI Jetpack Compose 统一安装流程，自动处理 Gradle 配置和权限声明，15 分钟完成组件集成

| Metric | Before | After | Change |
|---|---|---|---|
| 集成时间 | 150分钟 | 15分钟 | -90% |

## Readme

# expo-ui-jetpack-compose

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), spawn a subagent to research [Jetpack Compose](https://developer.android.com/develop/ui/compose/components) and [Material Design 3](https://m3.material.io/) best practices.

- 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](https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/%7Bcomponent-name%7D/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](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](https://fonts.google.com/icons), 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.

Weekly Installs–Repository[expo/skills](https://github.com/expo/skills)GitHub Stars1.7KFirst Seen–Security Audits[Gen Agent Trust HubPass](/expo/skills/expo-ui-jetpack-compose/security/agent-trust-hub)[SocketPass](/expo/skills/expo-ui-jetpack-compose/security/socket)[SnykPass](/expo/skills/expo-ui-jetpack-compose/security/snyk)

---
*Source: https://skills.yangsir.net/skill/daily-expo-ui-jetpack-compose*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-expo-ui-jetpack-compose/markdown*