React Native + Expo

React のメンタルモデルで iOS / Android のネイティブアプリを書ける。さらに Expo がビルド・配布・ネイティブ機能 API を一通り面倒見てくれるので、 2026 現在の RN 開発はほぼ「Expo を使う前提」でスタートするのが定石。

これは何か

React Native (RN) — JS/TS で書いた React コードをネイティブ UIにマッピングするフレームワーク。<View> = iOS の UIView / Android の android.view.View。
Expo — RN の上に乗る包括的フレームワーク。プロジェクト雛形、ネイティブ API（カメラ・通知・GPS）、ビルドサービス（EAS）、OTA更新、ファイルベースルーティング（Expo Router）まで。

「React Native だけ」で素から組むのは可能だが、Pods/Gradle のセットアップから iOS 署名、配布まで全部自前で見る必要があり、現代では非効率。 Expo を入れて困ることはほぼないのが業界の共通認識。

30秒のメンタルモデル

JS/TS で書いた React コードがブリッジ（JSI）越しにネイティブ UI を組み立てる。
HTML タグの代わりに <View> / <Text> / <Image>、<div> や <span> は使えない。
CSS は使わず、StyleSheet オブジェクト。Flexbox はデフォルトで flexDirection: "column"（Web と逆）。
Expo Go（コンビニ的な共通アプリ）でまず動かし、ネイティブモジュールを足したくなったらDev Buildに移行する。
ストア配布は EAS Build（クラウドビルド）→ EAS Submit。OTA 更新は EAS Update。

最小コード

Expo Router（最新の標準）

// app/index.tsx
import { Text, View, StyleSheet, Pressable } from "react-native"
import { useState } from "react"

export default function Home() {
  const [count, setCount] = useState(0)
  return (
    <View style={s.root}>
      <Text style={s.title}>Hello, RN</Text>
      <Pressable onPress={() => setCount(c => c + 1)} style={s.btn}>
        <Text style={s.btnText}>{count}</Text>
      </Pressable>
    </View>
  )
}

const s = StyleSheet.create({
  root: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  title: { fontSize: 24, fontWeight: "600" },
  btn: { paddingHorizontal: 20, paddingVertical: 12, backgroundColor: "#7dd3fc", borderRadius: 999 },
  btnText: { fontSize: 18 },
})

RN と Expo、どっちで始めるか

	素の React Native（CLI）	Expo
初期セットアップ	Xcode / Android Studio / Pods / Gradle 全部触る	1コマンドで開始
ネイティブモジュール追加	自由（ただし手動）	Expo SDK モジュールが豊富、追加も config plugin で簡単
ビルド	ローカルで Xcode/Gradle	EAS Build（クラウド）または local build
OTA 更新	自前で実装	EAS Update が組み込み
学習コスト	高い（iOS/Android のビルド体系に詳しくなる必要）	低い
プロダクト	「Expoで足りない」事情がある時だけ	新規はほぼこれ

「Expo は本格アプリで使えない」は古い情報

以前は Expo の制約（特定ライブラリが使えない、独自ネイティブコード不可、ビルドサイズ大など）が言われていたが、 Expo Dev Build / Continuous Native Generation (CNG) 登場後は自由度が大きく上がった。自前ネイティブモジュールを書きつつ Expo の利点も享受できる。Discord、Bluesky、Coinbase 等大規模プロダクションで使われている。

2026 春時点のバージョン感

Expo SDK 55+（数ヶ月ごとにメジャーリリース）
React Native 0.7x ベース、React 19
New Architecture（Fabric + TurboModules + JSI）がデフォルトで有効
Expo Router がファイルベースルーティングの標準（v4 系）
Hermes が JS エンジンのデフォルト
Reanimated 4（Web対応・CSS animations サポート）
expo-image が画像周りの定番

Web / デスクトップとの関係

React Native for Web — RN コンポーネントを Web でも動かせる。Expo Router は Web 出力に対応。
tvOS / visionOS — Apple TV / Vision Pro も RN で書ける（実装は限定的）。
macOS / Windows — Microsoft 製の react-native-windows / react-native-macos（コミュニティ駆動）。

このノートの読み方

クイックスタートで動く環境を作る。
コンポーネントとスタイルで UI の組み立て方を覚える。
ナビゲーションで画面遷移。Expo Router 主体。
状態管理とデータ、フォームで実用ライン。
ネイティブ機能が必要になったら Expo SDK。
動かしたい時にアニメーション。
本番投入前にパフォーマンス、配布する時に EAS、運用で必ず注意点。