expo-ui-jetpack-compose

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

インストール

npx expo install @expo/ui

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

手順

• Expo UI の API は Jetpack Compose の API を反映しています。Jetpack Compose と Material Design 3 の知識を活用して、使用するコンポーネントや修飾子を決定してください。Jetpack Compose または Material 3 について、より詳しいガイダンス（例：どのコンポーネントを選ぶか、レイアウトパターン、テーマ設定）が必要な場合は、サブエージェントを起動して Jetpack Compose と Material Design 3 のベストプラクティスを調査させてください。
• コンポーネントは @expo/ui/jetpack-compose から、修飾子は @expo/ui/jetpack-compose/modifiers からインポートします。
• コンポーネントや修飾子を使用する前に、必ず .d.ts 型ファイルを読んで正確な API を確認してください。 node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))" を実行してパッケージの場所を特定し、該当する {ComponentName}/index.d.ts ファイルを読んでください。これが最も信頼できる情報源です。
• コンポーネントを使用する際は、ドキュメントを取得して 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 — スクロール可能なリストには、react-native の ScrollView／FlatList の代わりに使用してください。<Host style={{ flex: 1 }}> でラップします。
• Icon — Android XML ベクター drawable を使って <Icon source={require('./icon.xml')} size={24} /> を使用してください。アイコンを取得するには、Material Symbols にアクセスし、アイコンを選択して Android プラットフォームを選び、XML ベクター drawable をダウンロードします。これらはプロジェクトの assets/ ディレクトリ（例：assets/icons/wifi.xml）に .xml ファイルとして保存してください。Metro は .xml アセットを自動的にバンドルするため、Metro の設定変更は不要です。