mirror of
https://github.com/sickn33/antigravity-awesome-skills.git
synced 2026-04-25 17:25:12 +02:00
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>
53 lines
2.4 KiB
Markdown
53 lines
2.4 KiB
Markdown
---
|
|
name: expo-ui-jetpack-compose
|
|
description: expo-ui-jetpack-compose
|
|
risk: unknown
|
|
source: 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
|
|
|
|
```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.
|
|
- 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 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 from [Material Symbols](https://fonts.google.com/icons).
|