expo-ui-jetpack-compose

Savant verdict: Analyzed

Scanned or evaluated by Savant; not yet both passing.

Live evaluation

1 pass · 1 investigate · 5 fail across 7 cases. Jev accepted 7 of 14 LLM-drafted cases. Drafted and run by nvidia/nemotron-3-super-120b-a12b, validated and scored by jev-latest.

• I want to create a scrollable list of user profiles using Expo UI Jetpack Compose in SDK 55. Each item should show a circular avatar, name, and email. How should I implement this?positive case · investigate
• I need a button with an icon and text that fills the width of the screen, with 16dp padding on all sides. When pressed, it should show an alert. Provide the code using Expo UI Jetpack Compose.positive case · fail
• Show me how to create a centered column with two text elements: a title in titleLarge style and body text in bodyMedium, with 24dp vertical spacing between them.positive case · fail
• I want to add a divider between items in a LazyColumn using Expo UI Jetpack Compose. How do I do that?edge case · fail
• Can I use a BottomSheetScaffold from @expo/ui/jetpack-compose to create a persistent bottom sheet with content behind it?edge case · fail
• How do I configure Expo to use Jetpack Compose for iOS UI development?negative case · pass
• Explain how to theme my Expo UI Jetpack Compose app using Material Design 3 color schemes and typography scales.negative case · fail

Safety (NVIDIA SkillSpector)

2 patterns found

• MCP Rug Pull: npx expomedium · SKILL.md:11 · npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.
• MCP Rug Pull: npx expomedium · SKILL.md:14 · npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.

Structure

• 1 referenced file isn't in the packageassets/icons/wifi.xml. They may be binary, too large to catalog, or missing upstream.
• No license declaredConfirm you may reuse this skill before importing it into your repository.

SKILL.md

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

```bash
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:

```jsx
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.