claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

🎨expo-ui

プラグイン
expo
ライセンス
MIT
ソース
GitHub で見る ↗

説明

`@expo/ui` パッケージを使ったネイティブ UI の構築に関するスキルです。 Expo または React Native アプリにおいて、iOS では本物の SwiftUI、Android では Jetpack Compose を React からレンダリングできます。 以下の内容をカバーしています: - **ユニバーサルなクロスプラットフォームコンポーネント** `@expo/ui` からインポートする `Host`、`Column`、`Row`、`Button`、`Text`、`List` など - **人気の React Native コミュニティライブラリのドロップイン代替** `BottomSheet`、`DateTimePicker`、`Slider`、`Menu` など - **プラットフォーム固有のコンポーネントツリーとモディファイア** SwiftUI（`@expo/ui/swift-ui`、iOS 専用）および Jetpack Compose（`@expo/ui/jetpack-compose`、Android 専用） --- 次のような場合に使用: - `@expo/ui` の `Host` / `RNHostView` ツリーを追加・レビューするとき - 標準の React Native コンポーネントでは再現が難しいネイティブらしい UI を構築するとき （トグル・セクション・メニュー・シート・ピッカー・スライダーを含むグループ設定フォームなど） - ユニバーサルコンポーネントとプラットフォーム固有コンポーネントのどちらを使うか検討するとき - React Native コミュニティの UI ライブラリをネイティブの `@expo/ui` 相当品に置き換えるとき --- **対象外:** カスタムネイティブモジュール、Expo Router によるナビゲーション、Reanimated、データフェッチング

原文を表示

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app. Covers universal cross-platform components (Host, Column, Row, Button, Text, List, and more imported from @expo/ui), drop-in replacements for popular React Native community libraries (BottomSheet, DateTimePicker, Slider, Menu, etc.), and platform-specific SwiftUI (@expo/ui/swift-ui, iOS only) and Jetpack Compose (@expo/ui/jetpack-compose, Android only) trees and modifiers. Use when adding or reviewing @expo/ui Host/RNHostView trees, building native-feeling UI where standard React Native components fall short (grouped settings forms with toggles, sections, menus, sheets, pickers, sliders), choosing between universal and platform-specific components, or replacing an RN community UI library with a native @expo/ui equivalent. Not for custom native modules, Expo Router navigation, Reanimated, or data fetching.

ユースケース

  • ✓ネイティブらしい UI を構築するとき
  • ✓コンポーネント選択を検討するとき
  • ✓React Native ライブラリを置き換えるとき

本文（日本語訳）

Expo UI (@expo/ui)

@expo/ui は React からリアルなネイティブ UI を描画します。iOS では SwiftUI、Android では Jetpack Compose を使用します。 まずユニバーサルコンポーネント（iOS・Android・Web で単一ツリーを共有）から始め、ユニバーサル層では対応できない場合にのみ、プラットフォーム固有の SwiftUI / Jetpack Compose に切り替えてください。 また、RN コミュニティ UI ライブラリからの移行向けに、ドロップイン代替品も提供しています。

これらの手順は最新の Expo SDK に対応しています。ユニバーサル層には SDK 56 以上が必要です。 ドロップイン代替品およびプラットフォーム固有層は SDK 55 でも利用できます。 特定の SDK バージョンにおけるコンポーネントの詳細については、そのバージョンの Expo UI ドキュメントを参照してください。

インストール

npx expo install @expo/ui

SDK 56 では、@expo/ui は Expo Go で動作するため、npx expo start で直接実行できます — カスタムビルドは不要です。 旧バージョンの SDK では、先に dev client をビルドしてください（npx expo run:ios / npx expo run:android）。

@expo/ui のツリー（ユニバーサル・プラットフォーム固有を問わず）は、すべて Host でラップする必要があります。

アプローチの選択（最初にお読みください）

以下のリストを順に確認し、要件を満たす最初の層で止めてください:

  1. ユニバーサルコンポーネント — まずここから始める。 @expo/ui ルートからインポートします。 単一のソースから、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> からインポートできます。 これは既存の依存関係を置き換えるための移行サイドパスであり、上記のユニバーサル vs プラットフォーム固有の選択フローにおけるステップではありません。 → ./references/drop-in-replacements.md

リファレンス

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

references/
  universal.md             ユニバーサル @expo/ui コンポーネントと使用場面 (SDK 56+)
  drop-in-replacements.md  RN コミュニティ UI ライブラリの API 互換代替品
  swift-ui.md              プラットフォーム固有 iOS UI: @expo/ui/swift-ui のコンポーネント、修飾子、RNHostView、useNativeState
  jetpack-compose.md       プラットフォーム固有 Android UI: @expo/ui/jetpack-compose のコンポーネント、修飾子、LazyColumn の注意点、アイコン、useNativeState
原文（English）を表示

Expo UI (@expo/ui)

@expo/ui renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. Start with its universal components (one tree for iOS, Android, and web) and drop to platform-specific SwiftUI/Jetpack Compose only when the universal layer falls short. It also ships drop-in replacements for migrating off RN community UI libraries.

These instructions track the latest Expo SDK. The universal layer requires SDK 56+. Drop-in replacements and the platform-specific layers also exist on SDK 55. For component details on a specific SDK, refer to the Expo UI docs for that version.

Installation

npx expo install @expo/ui

On SDK 56, @expo/ui works in Expo Go, so npx expo start runs it directly — no custom build required. On older SDKs, build a dev client first (npx expo run:ios / npx expo run:android).

Every @expo/ui tree — universal or platform-specific — must be wrapped in Host.

Choosing an approach (read this first)

Work down this list and stop at the first layer that meets the need:

  1. Universal components — start here. Import from the @expo/ui root. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS, react-native-web/react-dom on web). No platform file splits. → ./references/universal.md

  2. Platform-specific (SwiftUI / Jetpack Compose). Import from @expo/ui/swift-ui or @expo/ui/jetpack-compose. Use only when the universal layer is missing a component or modifier you need, or when you need platform-specific behavior or optimization. Downside: you write two trees and split them into .ios.tsx / .android.tsx files (or branch on Platform.OS) — more code to maintain.

    @expo/ui/swift-ui is iOS-only. @expo/ui/jetpack-compose is Android-only. Importing either in a file that runs on the other platform will crash at runtime with "Unable to get view config" errors. Isolate platform-specific trees in .ios.tsx / .android.tsx files placed in components/ (never inside app/ — Expo Router does not support platform extensions for route files), or guard with Platform.OS in a regular route file. Host must always be imported from @expo/ui (the universal package root), not from the platform-specific sub-packages. → ./references/swift-ui.md and ./references/jetpack-compose.md

Already using an RN community UI library? @expo/ui also ships drop-in replacements — API-compatible swaps for popular libraries (@gorhom/bottom-sheet, @react-native-community/datetimepicker, and more), imported from @expo/ui/community/<name>. This is a migration side-path for replacing an existing dependency, not a step in the universal-vs-platform decision above. → ./references/drop-in-replacements.md

References

Consult these resources as needed:

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

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。