Day 2

Expo UI SwiftUIのプロジェクト準備

Expo の教材用プロジェクトを作成し、@expo/ui/swift-ui の Host と Text を使って iOS で SwiftUI component を表示する最小構成を作ります。

React Native / Expo2026/07/098分

動画では、Expo プロジェクトを作成し、@expo/ui/swift-ui の Host と Text を使って、iOS で表示できるところまで進めます。この記事では、Host と Text の役割を確認しながら、最小構成を順番に作ります。

今回作るもの

今回は、教材用の Expo プロジェクトを作成し、@expo/ui/swift-ui の最小表示を確認します。

最終的には、iOS Simulator 上に SwiftUI component の Text が表示されればOKです。

前提

iOS で確認する
JSランタイムは Bun を使う
@expo/ui/swift-ui を使う

今回使うコンポーネント

今回は、@expo/ui/swift-ui から以下のコンポーネントを使います。

コンポーネント	役割
`Host`	SwiftUI component を React Native 側で表示するための土台
`Text`	SwiftUI のテキスト表示

@expo/ui/swift-ui のコンポーネントは、通常の React Native コンポーネントとは違い、SwiftUI 側のUIとして表示されます。

そのため、まず Host で SwiftUI component を表示する領域を作り、その中に Text を置いて表示確認します。

Step 1: プロジェクトを作成する

まずは Expo プロジェクトを作成します。

bun create expo-app expo-ui-swiftui-components

プロジェクトに移動します。

cd expo-ui-swiftui-components

Step 2: @expo/uiをインストールする

@expo/ui を使える状態にします。

bunx expo install @expo/ui

Step 3: HostとTextを表示する

第2回では、src/app/index.tsx で Host と Text を表示します。

import { Host, Text } from "@expo/ui/swift-ui";

export default function Index() {
  return (
    <Host>
      <Text>Expo UI SwiftUI Components</Text>
    </Host>
  );
}

Host の中に Text を置くことで、SwiftUI component の表示確認ができます。

ここで確認したいのは、画面のデザインではなく、@expo/ui/swift-ui のコンポーネントが iOS で表示できることです。

Step 4: iOSで動作確認する

iOS Simulator で起動します。

bunx expo start --ios

画面に Expo UI SwiftUI Components と表示されればOKです。

今回のポイント

今回のポイントは、Host と Text の役割を確認することです。

Host は SwiftUI component を表示する土台
Text は SwiftUI のテキスト表示
まずは最小構成で iOS に表示できることを確認する

この土台ができると、次回は TabView を使って複数画面に分けられます。

よくあるエラー

`@expo/ui` が見つからない

@expo/ui がインストールされていない可能性があります。

bunx expo install @expo/ui

iOSで起動できない

Xcode や iOS Simulator の準備ができているか確認します。

次回やること

次回は、TabView を使って、Today / Tasks / Settings の3画面を切り替えられるようにします。

← Expo UI SwiftUI 基礎コースに戻る