React Native + Expo を触ってみる

Get Started with React Native · React Native

React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.

reactnative.dev

Expo Documentation

Build one JavaScript/TypeScript project that runs natively on all your users' devices.

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」を使用

Nativewind

Use Tailwind in React Native.

www.nativewind.dev

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

GitHub - react-native-voice/voice: :microphone: React Native Voice Recognition library for iOS and Android (Online and Offline Support)

:microphone: React Native Voice Recognition library for iOS and Android (Online and Offline Support) - react-native-voice/voice

github.com

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を実行してビルドに含める

DevClient

A library that allows creating a development build and includes useful development tools.

docs.expo.dev

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. 認識結果が画面に表示され、クラッシュしなければ完了。