Menu
`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Set up and connect to an Android emulator using argent MCP tools. Use when starting a new session on Android, booting an emulator, getting a device serial, or before any UI interaction task.
Interact with an iOS simulator, Android emulator, or Chromium (CDP) app using argent MCP tools. Use when tapping UI elements, performing gestures, scrolling/swiping, typing text, pressing hardware buttons, launching apps, opening URLs, taking screenshots, waiting for an element to appear or disappear, or checking visible app state after interactions.
Debug a JS runtime via CDP using argent debugger tools. Primary path is React Native via Metro (iOS / Android); a subset of the tools (debugger-connect, debugger-status, debugger-evaluate, debugger-log-registry) also drive a Chromium (CDP) app's renderer (an Electron app, or any Chromium browser exposing CDP) through the same surface. Use when connecting to the runtime, inspecting React components, reading console logs, or evaluating JavaScript.
Native profiling for CPU hotspots, UI hangs, memory issues. iOS via xctrace; Android via Perfetto. Use when diagnosing native-level performance issues.
Profile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.
Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping, overflow, text rendering, or image/icon rendering changes.
| 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.
npx expo install @expo/ui
A native rebuild is required after installation (npx expo run:android).
@expo/ui/jetpack-compose, modifiers from @expo/ui/jetpack-compose/modifiers..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.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>
ScrollView/FlatList for scrollable lists. Wrap in <Host style={{ flex: 1 }}>.<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.