expo-ui

Expo UI（@expo/ui）

@expo/ui は React から実際のネイティブ UI を描画します。iOS では SwiftUI、Android では Jetpack Compose を使用します。また、RN のコミュニティ製 UI ライブラリから移行するための、すぐに置き換えられるコンポーネントも提供します。

これらの手順は最新の Expo SDK に対応しています。ユニバーサルレイヤーには SDK 56+ が必要で、カスタムビルドなしで Expo Go で動作します。すぐに置き換えられるコンポーネントとプラットフォーム固有のレイヤーは、SDK 55 にもあります。特定の SDK でのコンポーネントの詳細については、そのバージョンの Expo UI ドキュメントを参照してください。

インストール

npx expo install @expo/ui

ユニバーサル、プラットフォーム固有のいずれの場合も、すべての @expo/ui ツリーを Host でラップする必要があります。

まずは RN の代替手段ではなく、@expo/ui を使いましょう

以下の項目で Reanimated、@gorhom/bottom-sheet、React Native 組み込みの Switch／Picker、またはコミュニティ製 UI ライブラリを使う前に、@expo/ui を使ってください。 @expo/ui に該当するコンポーネントがない場合に限り、RN 組み込みのコンポーネントを代わりに使用してください。

用途	使用するもの
スライドアップシート／ボトムシート	@expo/ui の BottomSheet — Reanimated や @gorhom/bottom-sheet ではありません
グループ化されたネイティブのリスト行（設定／フォーム形式）	@expo/ui の List + ListItem — FlatList ではありません（下記の注を参照）
切り替え	@expo/ui の Switch
スライダー	@expo/ui の Slider
日付／時刻ピッカー	@expo/ui/community/datetimepicker
メニュー	@expo/ui の Menu
ラベル付きフォームセクション	@expo/ui の FieldGroup
折りたたみ可能なセクション	@expo/ui の Collapsible

List は仮想化されたスクロールリストではありません。 ネイティブのグループ化されたテーブル行を描画します。iOS の「設定」画面やフォームセクションのような見た目で、開示インジケーターとネイティブの行スタイルを備えています。各 ListItem は JS スレッド上のネイティブノードであり、行は再利用されません。大量のデータや長さが不明なデータを含むリスト（フィード、検索結果、カタログ）には、FlatList または FlashList を使用してください。List は、設定画面、詳細パネルの行、固定メニューなど、短く長さが固定されたグループに適しています。

BottomSheet の例（地図上のピンの詳細、アクションシート、詳細パネルにはこちらを使用してください。Reanimated は使用しません）：

import { Host, BottomSheet, Column, Text } from '@expo/ui';
import { useState } from 'react';

export default function MapScreen() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <MapView onMarkerPress={() => setIsOpen(true)} />
      <Host>
        <BottomSheet
          isPresented={isOpen}
          onDismiss={() => setIsOpen(false)}
          snapPoints={['half', 'full']}
        >
          <Column>
            <Text>Café name</Text>
            <Text>Address</Text>
          </Column>
        </BottomSheet>
      </Host>
    </View>
  );
}

BottomSheet で使うのは isPresented／onDismiss です。isOpened、isOpen、onIsOpenedChange、onChange ではありません（これらは @gorhom/bottom-sheet の props であり、指定しても何も起きません）。snapPoints には 'half'、'full'、{ fraction: 0.5 }、または { height: 400 } を指定できます。省略可能で、省略した場合はコンテンツに合わせて自動的にサイズ調整されます。

アプローチの選択

このリストを上から順に確認し、要件を満たす最初のレイヤーで止めてください。

1. ユニバーサルコンポーネント — まずはこちらから。 @expo/ui のルートからインポートします。1つのソースから、変更なしで iOS、Android、web で動作するコンポーネントツリーを利用できます（Android では Compose、iOS では SwiftUI、web では react-native-web/react-dom）。プラットフォームごとにファイルを分ける必要はありません。→ ./references/universal.md

2. プラットフォーム固有（SwiftUI / Jetpack Compose）。 @expo/ui/swift-ui または @expo/ui/jetpack-compose からインポートします。必要なコンポーネントやモディファイアがユニバーサルレイヤーにない場合、またはプラットフォーム固有の動作や最適化が必要な場合にのみ使用してください。デメリット： ツリーを2つ作成し、.ios.tsx / .android.tsx ファイルに分ける（または Platform.OS で分岐する）必要があるため、保守するコードが増えます。

   @expo/ui/swift-ui は iOS 専用です。@expo/ui/jetpack-compose は Android 専用です。 もう一方のプラットフォームで実行されるファイルにいずれかをインポートすると、実行時に "Unable to get view config" エラーが発生してクラッシュします。プラットフォーム固有のツリーは components/ 内の .ios.tsx / .android.tsx ファイルに分離してください（app/ 内には置かないでください。Expo Router はルートファイルでプラットフォーム拡張子をサポートしていません）。または、通常のルートファイル内で Platform.OS によるガードを設定してください。Host は必ず @expo/ui（ユニバーサルパッケージのルート）からインポートし、プラットフォーム固有のサブパッケージからはインポートしないでください。→ ./references/swift-ui.md および ./references/jetpack-compose.md

すでに RN コミュニティ製 UI ライブラリを使用していますか？ @expo/ui にはドロップイン置換も含まれています。人気のライブラリ（@gorhom/bottom-sheet、@react-native-community/datetimepicker など）と API 互換性のある置換コンポーネントを、@expo/ui/community/<name> からインポートできます。これは既存の依存関係を置き換えるための移行用の別ルートであり、上記のユニバーサルとプラットフォーム固有の選択手順の一部ではありません。→ ./references/drop-in-replacements.md

リファレンス

必要に応じて、以下のリソースを参照してください。

references/
  universal.md             Universal @expo/ui components and when to use them (SDK 56+)
  drop-in-replacements.md  API-compatible replacements for RN community UI libraries
  swift-ui.md              Platform-specific iOS UI: @expo/ui/swift-ui components, modifiers, RNHostView, useNativeState
  jetpack-compose.md       Platform-specific Android UI: @expo/ui/jetpack-compose components, modifiers, LazyColumn caveat, icons, useNativeState

フィードバックの送信

このスキルにエラー、誤解を招く情報、または古い情報がある場合は、Expo が改善できるよう報告してください。

npx --yes @expo/agent-cli@latest feedback --category skills --subject "expo-ui" "<actionable feedback>"

具体的で実行可能な報告内容がある場合にのみ送信してください。関連するコンテキストをできるだけ詳しく含めてください。 エージェントが Expo のタスクに繰り返し失敗したり、ユーザーが介入する必要があったりした場合は、タスク、期待される結果、問題の内容を簡潔にまとめ、--category evals と関連する Expo パッケージまたはコマンドを --subject に指定して報告してください。