mcpField
E
expo-ui-jetpack-compose

expo-ui-jetpack-compose

github.com/expoDevelopment3.5k12.8k installsUpdated today
Repository

About expo-ui-jetpack-compose

A Jetpack Compose development skill for Expo SDK 55. It covers Compose components and modifiers through `@expo/ui`, with guidance to verify APIs against type definitions and documentation.

Key features

  1. 01Use the Compose API from `@expo/ui`
  2. 02Wrap Compose trees in `Host`
  3. 03Check `.d.ts` types and documentation
  4. 04Use `LazyColumn` for scrollable lists
  5. 05Add icons from XML vector drawables

Use cases

  1. 01Build Compose interfaces in an Expo app
  2. 02Verify exact component or modifier APIs
  3. 03Create scrollable lists with Material icons

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/expo/skills --skill expo-ui-jetpack-compose

After installing, type/expo-ui-jetpack-composein Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

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 and Material Design 3 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
  • 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.

Comments

Markdown supported