Flutterを主戦場にしてきた人間がReact Nativeを始めるとき、最初に困るのが「そもそもiOSにはどんなUI部品があるのか」でした。FlutterならCupertinoButtonやCupertinoListSectionのようにウィジェット一覧を眺めれば済むのですが、React Nativeは事情が違います。
iOSに「どんな部品が存在するのか」の正典はAppleのHuman Interface Guidelines（HIG）です。そこで、HIGに載っているiOS向けコンポーネントを1つずつ、SwiftUI/UIKitのどのAPIなのか、React Nativeでは何を使えば出せるのか、Flutterでの対応物は何かの4列で並べた対応表を作りました。あわせてiOS 26シミュレータで撮ったスクリーンショットも載せています。
- 調査時点: iOS 26 / React Native 0.85 / Expo SDK 57 / React Navigation 8
- 形が浮かばない部品は、先にビジュアルカタログを見てもらうと早いです
まず3層に分けて考える
「iOSのネイティブUI」と一言で言うとき、実際には性質の違う3つの層が混ざっています。探すときはこの順に降りていくと迷いません。
-
層1／規約 — Human Interface Guidelines
何という部品が存在し、どう使うべきかの正典。コードは出てきません。この記事の対応表の左端の列がこれです。 -
層2／実装API — SwiftUI ／ UIKit
HIGの各部品の実体。新しく書くならSwiftUI（Toggle、Picker）、その裏や既存資産はUIKit（UISwitch、UIPickerView）。RNのライブラリは大抵UIKit側を包んでいます。 -
層3／RN側 — React Nativeからの呼び出し口
①Core Components（<View>等、UIKitの薄いラッパー）→ ②コミュニティ製ネイティブラッパー → ③@expo/ui（SwiftUIを直接呼ぶ）→ ④JS実装（見た目だけ寄せる）。上から順に探すのが定石です。
Flutterとの一番大きな考え方の違い
Flutterの Cupertino ウィジェットはiOS風の見た目を自前で描画しています。React Nativeは逆で、本物のネイティブViewを画面に置く方式です。
ただしRNのCore Componentsが包んでいるのはUIView / UILabel / UIScrollViewのような原始的な土台だけで、UISegmentedControlやUIDatePickerのような「できあいの部品」は標準に入っていません。だからiOSらしい画面を作ると、必然的にライブラリか@expo/uiを足すことになります。ここがFlutterから来ると一番戸惑うところでした。
ビジュアルカタログ
文字だけだと形が浮かばないので、実機と同じものを撮りました。iOS 26のシミュレータ（iPhone 17 Pro・ライトモード）で動かした自作のSwiftUIカタログアプリのスクリーンショットで、再現イラストではなくOSが実際に描いた本物のコントロールです。
ナビゲーションバー / ラージタイトル / 検索
- HIG: Toolbars · Search fields · Lists and tables
-
RNでの出し方: @react-navigation/native-stack の
headerLargeTitleとheaderSearchBarOptions。実体はUINavigationControllerとUISearchController。
iOS 26では検索フィールドが画面下端に移った。左上「編集」と右上「+」がガラスのカプセルとして浮いているのがLiquid Glass。
タブバー
- HIG: Tab bars
-
RNでの出し方: @react-navigation/bottom-tabs v8。既定で
UITabBarControllerを使うので、この見た目がそのまま出る。
リスト / セクション / ディスクロージャ
- HIG: Lists and tables · Disclosure controls · Toggles
-
RNでの出し方: @expo/ui の
Listならこの見た目がそのまま出る。<FlatList>は行の描画が自前なので、角丸・区切り線・インセットは全部自分で作ることになる。
iOSの「設定」アプリの見た目＝inset grouped list。Flutterでいう ListView とは、標準で付いてくる装飾の量がかなり違う。
ページコントロール
- HIG: Page controls
-
RNでの出し方: react-native-pager-view（または
@expo/uiのPagerView）。下端のドットは自作するのが普通。
ボタンの各スタイル
- HIG: Buttons
-
RNでの出し方: @expo/ui の
Button。RN標準の<Button>はこの見た目にならず、実質<Pressable>での自作になる。
上から3段目の「ガラス / 強調ガラス」が iOS 26 で追加された .glass / .glassProminent。背景が透けて屈折しているのが分かる。
テキストフィールド / トグル / スライダー / ステッパー
- HIG: Text fields · Toggles · Sliders · Steppers · Color wells
-
RNでの出し方:
<TextInput>と<Switch>はRN標準でこの見た目。スライダーは @react-native-community/slider、ステッパーは定番ライブラリが無く自作。
ピッカー各種
- HIG: Segmented controls · Pop-up buttons · Pickers
-
RNでの出し方: 上から @react-native-segmented-control/segmented-control、@react-native-picker/picker、@react-native-community/datetimepicker。
@expo/uiに3つとも互換版がある。
同じ「Picker」でも segmented / menu / wheel で見た目が全く違う。SwiftUIでは pickerStyle の指定1つで切り替わる。
進行状況 / ゲージ
- HIG: Progress indicators · Gauges · Labels
-
RNでの出し方: くるくる回るのは
<ActivityIndicator>でRN標準。進捗バーとゲージは @expo/ui のProgressView/Gauge。
アラート
- HIG: Alerts
-
RNでの出し方:
Alert.alert()でRN標準。追加ライブラリ不要でこの見た目が出る数少ない例。
アクションシート
- HIG: Action sheets
-
RNでの出し方:
ActionSheetIOSでRN標準（iOS専用API）。赤字は role: .destructive、最下段が role: .cancel。
シート（ハーフモーダル）
- HIG: Sheets
-
RNでの出し方: native-stack の
presentation: 'formSheet'＋sheetAllowedDetents。実体はUISheetPresentationController。
上端の横棒（グラバー）を引き上げると全画面に広がる。この挙動込みでOSが用意している。
ポップオーバー
- HIG: Popovers
-
RNでの出し方: @expo/ui/swift-ui の
Popover。それ以外は<Modal>で自作になる。
iPhoneでは既定でシートに変形する。三角形の付いた本来の形を保つには明示的な指定が要る。
対応表
状況の列は、React Native側でどれくらい手がかかるかを3段階で示しています。
- 🟢 標準 — RN本体だけで出せる
- 🔵 ライブラリ — 定番パッケージでネイティブ部品が出る
- 🟠 自作 — ネイティブ実装が無い／自分で寄せる
Content — 内容の表示
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| チャート Charts |
Swift Charts Chart
|
ネイティブ版なし。victory-native（Skia描画）、react-native-gifted-charts、react-native-svgで自作 |
fl_chart |
🟠 自作 |
| 画像ビュー Image views |
Image / UIImageView
|
<Image>（→UIImageView）。キャッシュ・blurhash等が要るなら expo-image
|
Image |
🟢 標準 |
| テキストビュー Text views |
Text / TextEditor / UITextView
|
表示は <Text>、複数行編集は <TextInput multiline>
|
Text / TextField
|
🟢 標準 |
| Webビュー Web views |
WKWebView / SFSafariViewController
|
react-native-webview。外部リンクを開くだけなら expo-web-browser（Safariビューが出る） |
webview_flutter |
🔵 ライブラリ |
Layout and organization — レイアウトと整理
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| ボックス Boxes |
GroupBox |
<View>＋スタイルで枠を作る |
Card / Container
|
🟠 自作 |
| コレクション Collections |
UICollectionView / LazyVGrid
|
<FlatList numColumns>、大量データなら @shopify/flash-list
|
GridView |
🟢 標準 |
| 開閉コントロール Disclosure controls |
DisclosureGroup |
@expo/ui/swift-ui の DisclosureGroup、または universal の Collapsible
|
ExpansionTile |
🔵 ライブラリ |
| ラベル Labels |
Label / UILabel
|
<Text>。アイコン付きラベルは expo-symbols＋<Text>
|
Text |
🟢 標準 |
| リストとテーブル Lists and tables |
List / UITableView
|
<FlatList>／<SectionList>（UITableViewではなく独自実装、行の見た目は自作）。設定画面のような純正の見た目が欲しければ @expo/ui の List（＝SwiftUIのList） |
ListView / CupertinoListSection
|
🟢 標準 |
| スプリットビュー Split views |
NavigationSplitView / UISplitViewController
|
ネイティブ相当なし。iPadの2ペインは自前レイアウトで組む | 自作（Row＋Navigator） |
🟠 自作 |
Menus and actions — メニューと操作
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| 共有シート Activity views |
UIActivityViewController / ShareLink
|
Share API（RN標準）、ファイル共有は expo-sharing
|
share_plus |
🟢 標準 |
| ボタン Buttons |
Button＋ButtonStyle（.bordered / .borderedProminent / .glass）/ UIButton
|
RNの <Button> は素朴でカスタム不可、実際はネイティブボタンではない。実務では <Pressable> で自作するか、純正の質感が要るなら @expo/ui の Button
|
CupertinoButton |
🟠 自作 |
| コンテキストメニュー Context menus |
.contextMenu / UIContextMenuInteraction
|
zeego（内部で react-native-ios-context-menu）、@react-native-menu/menu、@expo/ui/swift-ui の ContextMenu
|
CupertinoContextMenu |
🔵 ライブラリ |
| 編集メニュー Edit menus |
UIEditMenuInteraction |
<Text selectable> / <TextInput> の標準挙動として出る。項目のカスタマイズは薄い |
SelectableText＋contextMenuBuilder
|
🟢 標準 |
| ホーム画面クイックアクション Home Screen quick actions |
UIApplicationShortcutItem |
expo-quick-actions |
quick_actions |
🔵 ライブラリ |
| メニュー Menus |
Menu / UIMenu
|
@react-native-menu/menu、zeego、@expo/ui の Menu
|
PopupMenuButton |
🔵 ライブラリ |
| ポップアップボタン Pop-up buttons |
Picker(.menu) / UIButton＋UIMenu
|
@expo/ui の Picker（menu表示）、@react-native-picker/picker
|
DropdownButton |
🔵 ライブラリ |
| プルダウンボタン Pull-down buttons |
Menu（label付き） |
同上。ヘッダー右上に置くなら @react-native-menu/menu が定番 |
MenuAnchor |
🔵 ライブラリ |
| ツールバー Toolbars |
.toolbar / UINavigationBar・UIToolbar
|
@react-navigation/native-stack のヘッダー系オプション（実体は UINavigationController）。headerLargeTitle でラージタイトルも出る |
CupertinoNavigationBar / AppBar
|
🔵 ライブラリ |
「Navigation bars」というページを探しても見つからない
2025年のHIG全面改訂で、ナビゲーションバーの解説は独立ページを失いToolbarsに統合されました。古い記事は「Navigation bars」を参照しているので、リンク切れに見えたらToolbarsを見てください。
Navigation and search — ナビゲーションと検索
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| 検索フィールド Search fields |
.searchable / UISearchController
|
native-stack の headerSearchBarOptions で本物の UISearchController がヘッダーに乗る |
CupertinoSearchTextField |
🔵 ライブラリ |
| サイドバー Sidebars |
NavigationSplitView のサイドバー |
@react-navigation/drawer（JS実装。iOS純正のサイドバーとは別物） |
Drawer |
🟠 自作 |
| タブバー Tab bars |
TabView / UITabBarController
|
@react-navigation/bottom-tabs。v8から既定でネイティブ実装（UITabBarController）になり、iOS 26のLiquid Glassも自動で乗る |
CupertinoTabBar |
🔵 ライブラリ |
Presentation — 提示のしかた
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| アクションシート Action sheets |
.confirmationDialog / UIAlertController(.actionSheet)
|
ActionSheetIOS（RN標準・iOS専用）、@expo/ui の ConfirmationDialog
|
CupertinoActionSheet |
🟢 標準 |
| アラート Alerts |
.alert / UIAlertController(.alert)
|
Alert.alert()（RN標準）、宣言的に書くなら @expo/ui/swift-ui の Alert
|
CupertinoAlertDialog |
🟢 標準 |
| ページコントロール Page controls |
TabView(.page) / UIPageControl
|
react-native-pager-view（または @expo/ui の PagerView）＋ドットは自作 |
PageView＋インジケータ |
🔵 ライブラリ |
| ポップオーバー Popovers |
.popover / UIPopoverPresentationController
|
@expo/ui/swift-ui の Popover。それ以外は <Modal> で自作 |
自作 | 🔵 ライブラリ |
| スクロールビュー Scroll views |
ScrollView / UIScrollView
|
<ScrollView>（→UIScrollView） |
SingleChildScrollView |
🟢 標準 |
| シート Sheets |
.sheet＋.presentationDetents / UISheetPresentationController
|
native-stack の presentation: 'formSheet'＋sheetAllowedDetents が本物のシート。@expo/ui の BottomSheet、JS実装なら @gorhom/bottom-sheet
|
showCupertinoModalPopup / showModalBottomSheet
|
🔵 ライブラリ |
Selection and input — 選択と入力
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| カラーウェル Color wells |
ColorPicker / UIColorPickerViewController
|
@expo/ui/swift-ui の ColorPicker
|
パッケージ（flutter_colorpicker等） |
🔵 ライブラリ |
| ピッカー Pickers |
Picker / DatePicker / UIPickerView / UIDatePicker
|
@react-native-picker/picker、日付は @react-native-community/datetimepicker。@expo/ui に両方の互換版あり |
CupertinoPicker / CupertinoDatePicker
|
🔵 ライブラリ |
| セグメンテッドコントロール Segmented controls |
Picker(.segmented) / UISegmentedControl
|
@react-native-segmented-control/segmented-control、@expo/ui の SegmentedControl
|
CupertinoSlidingSegmentedControl |
🔵 ライブラリ |
| スライダー Sliders |
Slider / UISlider
|
@react-native-community/slider、@expo/ui の Slider
|
CupertinoSlider |
🔵 ライブラリ |
| ステッパー Steppers |
Stepper / UIStepper
|
定番のネイティブラッパーが無い。<Pressable>×2で自作するのが普通 |
自作 | 🟠 自作 |
| テキストフィールド Text fields |
TextField / SecureField / UITextField
|
<TextInput>（→UITextField）。secureTextEntry でパスワード入力 |
CupertinoTextField |
🟢 標準 |
| トグル Toggles |
Toggle / UISwitch
|
<Switch>（→UISwitch） |
CupertinoSwitch |
🟢 標準 |
| ソフトウェアキーボード Virtual keyboards |
UIKeyboardType / inputAccessoryView
|
keyboardType、<InputAccessoryView>（iOS専用・RN標準）、<KeyboardAvoidingView>。挙動を細かく制御するなら react-native-keyboard-controller
|
TextInputType |
🟢 標準 |
Status — 状態の表示
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| アクティビティリング Activity rings |
HealthKit連携のリング表示 | 相当なし。@shopify/react-native-skia 等で自作 |
自作 | 🟠 自作 |
| ゲージ Gauges |
Gauge |
@expo/ui/swift-ui の Gauge
|
パッケージ | 🔵 ライブラリ |
| 進行状況インジケータ Progress indicators |
ProgressView / UIActivityIndicatorView / UIProgressView
|
くるくるは <ActivityIndicator>（RN標準→UIActivityIndicatorView）。進捗バーは @expo/ui の ProgressView か自作 |
CupertinoActivityIndicator |
🟢 標準 |
System experiences — アプリの外に出ていくUI
| HIG | SwiftUI / UIKit | React Native | Flutter | 状況 |
|---|---|---|---|---|
| App Shortcuts | App Intents | RN側の抽象化は薄い。@bacons/apple-targets でターゲットを追加してSwiftで書く |
同様にネイティブ実装が要る | 🟠 自作 |
| コントロール Controls |
WidgetKit ControlWidget（コントロールセンター・ロック画面） |
@bacons/apple-targets＋SwiftUI |
ネイティブ実装 | 🟠 自作 |
| ライブアクティビティ Live Activities |
ActivityKit＋WidgetKit |
expo-live-activity、または @bacons/apple-targets でSwiftUIを書いてJSから起動 |
live_activities |
🔵 ライブラリ |
| 通知 Notifications |
UserNotifications |
expo-notifications、プッシュ配信は @react-native-firebase/messaging 等 |
flutter_local_notifications |
🔵 ライブラリ |
| Siriスニペット Snippets |
App Intents＋SwiftUI | ネイティブ実装が必須 | ネイティブ実装 | 🟠 自作 |
| ステータスバー Status bars |
UIStatusBarStyle |
<StatusBar>（RN標準）、expo-status-bar
|
SystemChrome |
🟢 標準 |
| ウィジェット Widgets |
WidgetKit（SwiftUI必須） | RNでは描けない。@bacons/apple-targets でウィジェット拡張を作りSwiftUIで書く |
home_widget（同じくSwiftUIで書く） |
🟠 自作 |
iPhoneには出てこないHIGコンポーネント
HIGは全プラットフォーム共通の1冊になったので、一覧にはiOSに存在しない部品も混ざっています。以下は探してもiPhoneでは使えません。
- macOS専用 — Column views、Outline views、Path controls、Token fields、Combo boxes、Image wells、Panels、Rating indicators、Dock menus、The menu bar（menu barはiPadOSにもあり）
- macOS / watchOS専用 — Tab views（iOSでの相当はTab bars）
- tvOS専用 — Lockups、Digit entry views、Top Shelf
- visionOS専用 — Ornaments
- watchOS専用 — Complications、Watch faces
- iPad / Mac / visionOSのみ — Windows
iOS 26のLiquid Glassをどう扱うか
2025年のiOS 26で、システム全体のデザインが半透明・屈折感のある「Liquid Glass」に刷新されました。React Native側の状況は以下の通りです。
- Xcode 26以上でビルドすることが前提。古いXcodeでビルドしたアプリには適用されません。
-
ネイティブ部品は勝手に追随します。 React Navigation 8のネイティブタブ（
UITabBarController）やnative-stackのヘッダーは、何もしなくてもLiquid Glassになります。逆にJSで自作したタブバーやヘッダーだけが取り残されるので、ネイティブに寄せる動機がここにあります。 -
自分でガラス面を置くなら
expo-glass-effectのGlassView/GlassContainer（実体はUIVisualEffectView）。iOS 26未満やAndroidでは通常のViewにフォールバックするので、isLiquidGlassAvailable()で分岐しておきます。 -
落とし穴:
GlassViewかその親にopacity: 0をかけるとガラス効果自体が消えます。フェードさせたいときはglassEffectStyleのanimate/animationDurationを使います。
RN側の「どれを使うか」の判断基準
同じ部品に複数の選択肢があります。上から順に検討して、見つかった時点で止めるのが早いです。
-
RN Core Components —
<View> <Text> <Image> <TextInput> <ScrollView> <Switch> <FlatList> <ActivityIndicator> <Modal>と、Alert/ActionSheetIOS/ShareのAPI群。追加依存ゼロで済むならこれが最善。 - ナビゲーション由来のネイティブUI — ヘッダー、ラージタイトル、検索バー、タブバー、シート、スワイプ戻る。これらは個別ライブラリではなくReact Navigationのオプションとして出てきます。ここを知らないと全部自作しがちです。
-
@expo/ui— SwiftUIのビューをそのままJSから置けます。SDK 56で安定版になり、Hostで包んで使います。SwiftUI側41コンポーネントに加え、@react-native-community/*系8つのAPI互換版（drop-in replacements）もあります。 -
コミュニティ製の個別ラッパー —
@react-native-community/datetimepicker、@react-native-segmented-control/segmented-control、@react-native-menu/menu、zeegoなど。実績が長く情報も多いです。 - JS実装で見た目だけ寄せる — ここまでで無ければ。Flutterのやり方に一番近いですが、OSのデザイン更新に追随しないので最後の手段です。
迷ったらReact Native Directoryでパッケージの生存状況（最終更新・New Architecture対応）を確認するのが確実です。
一次情報リンク
- HIG — Components — iOSで使える部品の正典。この表の左端はここの目次そのもの
- HIG 日本語版 — 同じ内容の日本語訳。用語を日本語で覚えたいとき
- Adopting Liquid Glass — iOS 26の新デザインへの対応方針
- SwiftUI ドキュメント — Controls and indicators / Lists / Modal presentations あたりが部品カタログ
-
UIKit — Views and controls —
UISegmentedControlのような具体名を引くならここ - UIKit Catalog（Appleサンプル） — 全コントロールを実際に動かせるサンプルアプリ。目で見て把握したいとき最短
- SF Symbols — 純正アイコン集。Macアプリで名前を検索できる
- RN — Core Components and APIs — RN本体に何が入っているかの全部
-
RN — コンポーネント対応表 —
<View>→UIViewのような公式の1対1マッピング - Expo UI — SwiftUI — JSから呼べるSwiftUIコンポーネント41種の一覧
-
Expo UI — Drop-in replacements — 既存の
@react-native-community/*をimport差し替えで置換 - React Navigation — Native Stack — ヘッダー・検索バー・シートのオプションが全部ここに載っている
-
React Navigation — Native Bottom Tabs —
UITabBarControllerをそのまま使うタブ - expo-glass-effect — Liquid Glassの面を自分で置くとき
- Zeego — コンテキストメニュー／ドロップダウンの定番
- React Native Directory — パッケージがまだ生きているかの確認先
対応表の内容は2026年8月時点の調査です。ライブラリの状況は動くので、実際に採用する前にReact Native Directoryで最終更新を確認してください。