React Native + Expo を触ってみる

React Native: https://reactnative.dev/docs/environment-setup Expo: https://docs.expo.dev/

• React Native + Expo の導入とExpo goでのプレビュー
• ネイティブモジュールの導入・デバッグビルドで実機確認

を行ってみた。

環境

• MacBook + iOS 実機
• React Native + Expo

npx create-expo-app@latest

Expo Go でプレビュー

npm run start
# ターミナルに QR が出る

1. iPhone に Expo Go をインストール (App StoreからDL)
2. カメラで QR 読み取り → Expo Go が開き、アプリを表示（コード変更で ホットリロードが効く）

Simulatorで確認したい場合、npm run start でターミナルに出力された http://localhost:8081 で確認

2. Tailwind

• ライブラリ NativeWind を使用 https://www.nativewind.dev/

3. ネイティブモジュールの導入

https://github.com/react-native-voice/voice

npm i @react-native-voice/voice --save 

デバッグビルド

実機で確認するために初回だけ以下を実行

npx pod-install

• Xcode に Apple ID 登録 (Settings > Accounts)
• iPhone を Macに USB 接続してビルド

# expo prebuild → Xcode ビルド → 実機/Simulator へインストールを行う
npx expo run:ios --device

• 設定 > 一般 > VPNとデバイス管理 > Developer App → 自分の Apple ID を 信頼
• アプリ初回起動時に ローカルネットワークを許可（これをしないとローカルサーバが読み込めない？）

expo dev clientを導入

expo dev clientを導入して再度expo run:ios --deviceを実行してビルドに含める https://docs.expo.dev/versions/latest/sdk/dev-client/

npm i expo-dev-client

通常のデバッグビルドとはXcodeで実機にインストールするという点は同じだが、Expo Go の利便性を兼ね備える用意が整っているから入れておく。

番外編：iOS 音声認識クラッシュ解消

先ほど入れた音声認識のネイティブモジュールをビルド後、Voice.start()を記述して実機やシミュレータで確認すると、Voice.start() 実行直後にアプリがクラッシュした。

Xcode > Window > Devices and Simulators > View Device Logs でクラッシュの原因を確認。

1. Info.plist へ必須キーを追加

<!--  </dict> 直前に挿入 -->
<key>NSMicrophoneUsageDescription</key>
<string>音声入力のためにマイクを使用します</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>音声認識を使用します</string>

2. app.json にも反映 (Expo managed 用)

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSMicrophoneUsageDescription": "音声入力のためにマイクを使用します",
        "NSSpeechRecognitionUsageDescription": "音声認識を使用します"
      }
    }
  }
}

3. CocoaPods 同期

npx pod-install  

4. 再ビルド & 実機

npx expo run:ios --device  # 実機の場合

5. 動作確認

1. アプリ起動 → 音声認識ボタンを押す。
2. 初回のみ OS 権限ダイアログが表示 → 許可。
3. 認識結果が画面に表示され、クラッシュしなければ完了。