ef285b5c97
* fix: stabilize validation and tests on Windows * test: add Windows smoke coverage for skill activation * refactor: make setup_web script CommonJS * fix: repair aegisops-ai frontmatter * docs: add when-to-use guidance to core skills * docs: add when-to-use guidance to Apify skills * docs: add when-to-use guidance to Google and Expo skills * docs: add when-to-use guidance to Makepad skills * docs: add when-to-use guidance to git workflow skills * docs: add when-to-use guidance to fp-ts skills * docs: add when-to-use guidance to Three.js skills * docs: add when-to-use guidance to n8n skills * docs: add when-to-use guidance to health analysis skills * docs: add when-to-use guidance to writing and review skills * meta: sync generated catalog metadata * docs: add when-to-use guidance to Robius skills * docs: add when-to-use guidance to review and workflow skills * docs: add when-to-use guidance to science and data skills * docs: add when-to-use guidance to tooling and automation skills * docs: add when-to-use guidance to remaining skills * fix: gate bundle helper execution in Windows activation * chore: drop generated artifacts from contributor PR * docs(maintenance): Record PR 457 sweep Document the open issue triage, PR supersedence decision, local verification, and source-only cleanup that prepared PR #457 for re-running CI. --------- Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
2.4 KiB
2.4 KiB
name, description, risk, source
| name | description | risk | source |
|---|---|---|---|
| expo-ui-jetpack-compose | expo-ui-jetpack-compose | unknown | community |
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.
When to Use
- You need to build Android-native UI in Expo using
@expo/ui/jetpack-compose. - The task involves choosing Compose views or modifiers, embedding them in
Host, or translating Jetpack Compose patterns into Expo UI code. - You are working specifically against Expo SDK 55 behavior for Jetpack Compose integration.
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.
- Components are imported from
@expo/ui/jetpack-compose, modifiers from@expo/ui/jetpack-compose/modifiers. - 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 ofLazyColumn). 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/FlatListfor scrollable lists. Wrap in<Host style={{ flex: 1 }}>. - Icon — Use
<Icon source={require('./icon.xml')} size={24} />with Android XML vector drawables from Material Symbols.