expo-ui-jetpack-compose

このスキルの指示は SDK 55 のみに適用されます。他の SDK バージョンについては、最も正確な情報を確認するため、該当バージョンの Expo UI Jetpack Compose ドキュメントを参照してください。

使用する場面

• @expo/ui/jetpack-compose を使って、Expo で Android ネイティブ UI を構築する必要がある場合。
• Compose のビューやモディファイアの選択、Host への組み込み、または Jetpack Compose のパターンを Expo UI コードに変換するタスクの場合。
• Jetpack Compose の統合における Expo SDK 55 の動作を対象として作業する場合。

インストール

npx expo install @expo/ui

インストール後、ネイティブの再ビルドが必要です（npx expo run:android）。

手順

• Expo UI の API は Jetpack Compose の API を反映しています。使用するコンポーネントやモディファイアを決める際は、Jetpack Compose と Material Design 3 の知識を活用してください。
• コンポーネントは @expo/ui/jetpack-compose から、モディファイアは @expo/ui/jetpack-compose/modifiers からインポートします。
• コンポーネントを使う前に、その API を確認するためドキュメントを取得してください：https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
• モディファイアの API が不明な場合は、ドキュメントを参照してください：https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
• Jetpack Compose のツリーはすべて Host でラップする必要があります。固有サイズに合わせる場合は <Host matchContents> を、明示的なサイズが必要な場合（例：LazyColumn の親として使用する場合）は <Host style={{ flex: 1 }}> を使ってください。例：

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

主なコンポーネント

• LazyColumn — プラットフォーム固有のデザインで必要な場合に、Compose ネイティブのリストとして使用します。React Native のリストを一律に置き換えないでください。<Host style={{ flex: 1 }}> でラップしてください。
• Icon — Material Symbols の Android XML ベクター描画可能リソースを使って、<Icon source={require('./icon.xml')} size={24} /> を使用してください。

制限事項

• API は SDK 55 を対象としています。編集前に、該当バージョンの Expo ドキュメントとインストール済みパッケージを確認してください。Android／iOS の例は各プラットフォーム固有であり、相互に置き換えられるものでも、実機での動作を保証するものでもありません。既存のフレームワークおよびユーザーの要件が優先されます。
• ネイティブの再ビルドでは依存関係がインストールまたは実行され、プロジェクトが変更されます。まず、対象となる開発環境を確認してください。icon.xml とアプリコードはアプリケーションのアセットであり、バンドルされたファイルではありません。
• 出力を、環境に応じた検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。