expo-ui-jetpack-compose

Name: expo-ui-jetpack-compose
Author: expo

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

INSTALLATION

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

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

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.

expo-ui-jetpack-compose

SKILL.md

Key Components

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers