React Nativeとは｜始め方・環境構築・Expoとの違いを実例で解説

React Native では、TypeScript（JavaScript）で書いた画面を Metro がまとめ、Hermes という JavaScript エンジンが実行し、JSI を通して OS のビューを作ります。

flowchart TD
    A[App.tsx<br>React と TypeScript] -->|Metro がまとめる| B[JS バンドル]
    B --> C[Hermes<br>JS エンジン]
    C -->|JSI| D[C++ のコア<br>Fabric・TurboModules]
    D --> E[Android のビュー]
    D --> F[iOS のビュー]

始めるときによく使うコマンドです（Expo で始める場合）。

やりたいこと	コマンド	補足
プロジェクトを作る	npx create-expo-app@latest my-app	公式が推奨する始め方
開発サーバーを起動	npx expo start	a Android・i iOS・w Web
パッケージを足す	npx expo install 名前	SDK に合う版を選んで入れる
版のずれを確かめる	npx expo install --check	--fix で合わせる
Web 用に出力	npx expo export --platform web	dist/ に HTML と JS
テスト	npx jest	jest-expo のプリセット
android・ios を作る	npx expo prebuild	app.json から生成
Expo を使わず作る	npx @react-native-community/cli@latest init 名前	Android Studio・Xcode が要る
実機・エミュで動かす（CLI）	npm start → npm run android	Metro を起動したまま

確認環境：Ubuntu 24.04.4・Node.js 22.22.2。2026年10月22日に npx create-expo-app@latest で Expo SDK 58（expo 58.0.17・React Native 0.88.0・React 19.3.0・TypeScript 6.0.3）のひな形を作り、依存を pnpm 12.14.0 で入れて、expo start（Expo CLI 58.1.14）・expo export --platform web・expo prebuild・jest 30.5.2（jest-expo 58.0.12、@testing-library/react-native 14.1.0）・tsc を実行しました。Web に出力したページは Chromium 141 で開き、生成された HTML と CSS を確かめています。npx @react-native-community/cli@latest init（CLI 20.2.0）のひな形も作って比べました。各版の公開日は npm の公開日時、コンポーネントの一覧と非推奨の警告文は react-native 0.88.0 のソースで確かめました。新アーキテクチャ・環境構築・Flexbox・ナビゲーション・トラブルシューティングは reactnative.dev、Expo Go・料金・SDK 58 の変更点は docs.expo.dev と expo.dev、Flutter との比較は docs.flutter.dev、ストアの登録料は Apple と Google の公式ページで確かめました（確認日 2026年10月22日）。

React Nativeとは（読み方・何ができるか・料金）

この節では、React Native が何をするもので、どこで使われ、お金がかかるのかが分かります。

React Native（リアクトネイティブ）は、Meta が開発しているオープンソースのフレームワークです。 Web で使われる React の書き方（コンポーネント・JSX・Hooks）で、Android と iOS のアプリを作れます。公式のドキュメントは、React Native のコンポーネントについて「実行時に、対応する Android と iOS のビューを作る」と説明しています。

ReactとReact Nativeの違い

React は画面を作るためのライブラリで、React Native は React を「スマホのアプリ」で動かす仕組みです。書き方は同じで、使う部品と出力先が違います。

項目	React（Web）	React Native
出力先	ブラウザの DOM（HTML）	Android・iOS のビュー
使う部品	div・<p>・<input>	<View>・<Text>・<TextInput>
スタイル	CSS（クラス・カスケードあり）	JavaScript のオブジェクト（StyleSheet）
画面の移動	URL とルーター	スタック・タブなどのナビゲーション
動かす場所	ブラウザ	端末のアプリ（JS は Hermes が実行）
共通のもの	コンポーネント・JSX・Hooks・props・state	同じ

React の Hooks の使い分けは、関連記事「React Hooks一覧と使い分け早見表｜React 19対応」で扱っています。

React Nativeで作られているアプリ

公式サイトのショーケースには、次の会社のアプリが並んでいます（2026年10月22日時点）。

会社	ショーケースにあるアプリ
Meta	Facebook・Instagram・Facebook Ads Manager・Messenger Desktop など
Microsoft	Office・Outlook・Teams・Xbox Game Pass
Amazon	Amazon Shopping・Alexa・Amazon Photos・Kindle
Shopify	Shopify・Shop・Shopify Inbox・Shopify Point of Sale

React Nativeは無料か（料金）

React Native と Expo は無料です。 どちらも MIT ライセンスで、react-native 0.88.0 の LICENSE は「Copyright (c) Meta Platforms, Inc. and affiliates.」で始まります。お金がかかる可能性があるのは、ストアの登録料と、クラウドでビルドする EAS などのサービスです。

かかるもの	金額（2026年10月22日時点）	出典
React Native・Expo	無料（MIT）	各パッケージの license
Google Play への登録	1回限り US$25	Play Console ヘルプ
Apple Developer Program	年 US$99（または現地通貨の同等額）	Apple Developer ヘルプ
EAS（Expo のクラウドのビルド等）	Free は $0（Android 15回・iOS 15回までのビルド）、Starter は月 $19＋従量	expo.dev/pricing

EAS は使わなくても開発できます。手元の Android Studio・Xcode でビルドする方法は「環境構築」の節にあります。

React Nativeの仕組み（新アーキテクチャ・JSI・Fabric）

この節では、JavaScript のコードがどうやって OS の画面になるのかと、「新アーキテクチャ」で何が変わったのかが分かります。

React Native 0.82 からは、新アーキテクチャ（New Architecture）だけで動きます。 以前の構成では、JavaScript とネイティブの間を「Bridge」が JSON に変換して非同期で受け渡していました。新アーキテクチャでは、JSI で JavaScript から C++ のオブジェクトを直接呼びます。

flowchart TD
    A[以前の構成<br>JavaScript] -->|JSON にして<br>非同期で送る| B[Bridge]
    B --> C[ネイティブ]
    D[新アーキテクチャ<br>JavaScript] -->|JSI で<br>直接呼ぶ| E[C++ のコア]
    E --> F[ネイティブ]

部品	何をするか（reactnative.dev より）
JSI（JavaScript Interface）	JavaScript が C++ のオブジェクトへの参照を持ち、シリアライズ（JSON への変換）なしでメソッドを呼べる仕組み
Fabric	新しい描画の仕組み。描画の処理を C++ にまとめ、レイアウトを同期して計算できる
TurboModules（Turbo Native Modules）	カメラ・保存など、OS の機能を JavaScript から呼ぶための部品
Codegen	TypeScript か Flow で書いた型の定義から、Android・iOS 用のコードを生成する
Hermes	React Native 用の JavaScript エンジン。0.84 から Hermes V1 が既定

公式のドキュメントでは、新アーキテクチャの利点として、レイアウトの値を同期して読めるので onLayout で画面が一瞬ずれる問題を避けられること、React 18 以降の Suspense・Transitions・自動バッチ処理が使えることを挙げています。

スレッドの役割

公式の「Threading Model」は2つのスレッドを説明しています。

スレッド	役割（原文の要約）
UI スレッド（メイン）	ホストのビュー（OS の画面の部品）を操作できる唯一のスレッド
JavaScript スレッド	React の render と、レイアウトの計算を行う

優先度の高い操作（タップなど）が起きたときは、描画の処理全体を UI スレッドで同期して実行できる、と書かれています。

新アーキテクチャまでの版の流れ

npm の公開日時と、公式ブログの内容をまとめました。

版	npm の公開日	主な変化
0.68	2022年3月30日	新アーキテクチャを試験的に選べるようになった
0.76	2024年10月23日	新アーキテクチャが既定で有効
0.82	2025年10月8日	新アーキテクチャだけで動く（newArchEnabled=false は無視される）
0.84	2026年2月11日	Hermes V1 が既定。Node.js 22 が最低要件
0.87	2026年8月11日	TypeScript の厳格な API が既定。Android Gradle Plugin 9
0.88	2026年10月15日	React 19.3.0・Metro 0.87。利用者向けの破壊的変更なし

0.80 以降の版は、およそ2か月ごとに出ています。0.88 の公式ブログには「0.88 が最新の安定版になり、0.85.x はサポート外になった」と書かれています。0.82 のブログには、newArchEnabled=false を設定しても無視され、新アーキテクチャで動く、とあります。以前の構成（Bridge）を前提にした解説記事は、0.82 以降には当てはまらない部分があります。

ExpoとReact Native CLIの違い

この節では、2つの始め方の違いと、どちらを選べばよいかが分かります。

公式のドキュメントは、新しくアプリを作るなら Expo などの「フレームワーク」を使うことを勧めています。 reactnative.dev の「Get Started」には、「新しいアプリを React Native で作るなら、フレームワークを使うことを勧める」とあり、作成のコマンドとして npx create-expo-app@latest が載っています。Expo を使わない方法（React Native CLI）も「Get Started Without a Framework」として残っています。

2つのひな形を作って比べた

2026年10月22日に、それぞれの最新のひな形を作って中身を数えました（.git を除く）。

項目	Expo（SDK 58）	React Native CLI（20.2.0）
react-native の版	0.88.0	0.88.0
android・ios のフォルダ	無い（npx expo prebuild で生成）	ある（Kotlin・Swift のコード）
起動のコマンド	expo start	react-native start
テスト	自分で jest-expo を足す	jest 29 と設定ファイルが入っている
入口のファイル	index.ts（registerRootComponent）	index.js（AppRegistry.registerComponent）

CLI のひな形の android/gradle.properties には newArchEnabled=true と hermesEnabled=true が書かれていました。CLI で作ると最後に「Run instructions for Android」と表示され、npx react-native run-android で動かすよう案内されます（Linux で実行したときの表示）。

Expo GoとDevelopment buildの違い

Expo で作ったアプリを端末で動かす方法は2つあります。

方法	中身	向いている場面
Expo Go	ストアで配られている Expo のアプリ。QR コードを読むとプロジェクトを開ける	学習・試作。入っているネイティブの部品だけ使える
Development build	自分のアプリを開発用にビルドしたもの	ネイティブのライブラリを足すとき・本番のアプリ

docs.expo.dev は Expo Go を「学ぶ人のための遊び場のアプリで、本番のプロジェクトには向かない」と説明しています。ひな形の AGENTS.md にも「Expo Go には同梱のネイティブモジュールしか無い。ネイティブのコードを含むライブラリを足したら development build が要る（npx expo run:ios|android か eas build --profile development）」と書かれています。

Expo Go は、対応する SDK の版が決まっています。 docs.expo.dev のトラブルシューティング（2026年10月22日時点）では、App Store の Expo Go は SDK 54 まで、Google Play 版も新しい SDK の公開から遅れることがある、と説明しています。SDK 58 の告知（2026年10月15日）には、「SDK 58 用の Expo Go は数週間のうちに App Store と Google Play で公開する」とあります。

迷ったときの判断フロー

flowchart TD
    Q1{既存のアプリに<br>組み込む?} -->|はい| C[CLI か<br>既存アプリに統合]
    Q1 -->|いいえ| E[Expo で作る]
    E --> Q2{Expo Go に無い<br>機能を使う?}
    Q2 -->|いいえ| G[Expo Go・<br>Web で試す]
    Q2 -->|はい| D[Development<br>build]

状況	選ぶもの
初めて作る・学ぶ	Expo（npx create-expo-app@latest）
手元に Mac が無いが iOS 版も作りたい	Expo と EAS Build（クラウドでビルド）
決まったネイティブの SDK を組み込む	Expo の development build（config plugin で設定）
すでにある Android・iOS アプリの一部の画面に使う	既存アプリへの統合（公式の「Integration with Existing Apps」）
android・ios のフォルダを最初から自分で管理したい	React Native CLI

始める前に必要なもの（Node.jsの版など）

この節では、パソコンに何が要るのかと、作りたい OS ごとの条件が分かります。

react-native 0.88.0 の package.json は、Node.js の版を ^22.13.0 || ^24.3.0 || >= 26.0.0 と指定しています。 Expo SDK 58 の告知にも同じ条件（22.13 以上・24.3 以上・26 以上。23 と 25 のような奇数の版は対象外）が書かれています。

• 1Node.js 22.13 以上（LTS の 22 か 24）node -v で確かめる。奇数の版（23・25）は対象外
• 2エディター（VS Code など）TypeScript の補完が効くもの
• 3動かす先を1つ決めるWeb ブラウザ・Android エミュレーター・実機のどれか
• 4Android 向け：Android Studio と JDK 17公式は JDK 17 を推奨。これより新しい JDK では問題が出ることがある
• 5iOS 向け：Mac と最新の Xcode公式：「iOS 用にネイティブのコードを含むプロジェクトをビルドするには Mac が要る」

開発に使う PC	作れるもの（手元でビルド）	補足
Windows	Android・Web	iOS はクラウドのビルド（EAS）か Mac が要る
Mac	Android・iOS・Web	iOS シミュレーターが使える
Linux	Android・Web	iOS は Windows と同じ

Node.js の版を切り替える方法は、関連記事「Node.js バージョン管理｜nvm・fnm・mise・Volta比較と実測」で扱っています。

React Nativeの環境構築（Windows・Mac）

この節では、Expo で最初の画面を出すまでと、Android・iOS 向けにビルドするための準備を、OS ごとに追えます。

Expoで始める（Windows・Mac共通）

WindowsでAndroid向けの準備

Android のエミュレーターで動かすときと、React Native CLI で作るときに要る準備です（reactnative.dev「Set Up Your Environment」の手順）。

1. JDK 17 を入れる（公式：「すでに JDK があるなら JDK 17 を推奨」）。
2. Android Studio を入れ、インストールの画面で Android SDK・Android SDK Platform・Android Virtual Device を選ぶ。
3. SDK Manager の「SDK Platforms」で Android 15 (VanillaIceCream) の Android SDK Platform 35 と、エミュレーター用のシステムイメージを選ぶ。
4. 「SDK Tools」で Android SDK Build-Tools の 36.0.0 と Android SDK Command-line Tools (latest) を選ぶ。
5. 環境変数（ユーザー変数）に ANDROID_HOME を作り、値を %LOCALAPPDATA%\Android\Sdk にする。Path に %LOCALAPPDATA%\Android\Sdk\platform-tools を足す。
6. Android Studio の Device Manager でエミュレーターを作って起動しておく。

PowerShell で、設定が反映されたかを確かめます。

Get-ChildItem -Path Env:\ANDROID_HOME
adb --version

MacでiOS・Android向けの準備

Node.js は nodejs.org の LTS を入れ、Watchman と JDK 17 は Homebrew で入れます（reactnative.dev の手順のコマンド）。

brew install watchman
brew install --cask zulu@17

Watchman はファイルの変更を見張る道具で、公式は「性能のために入れることを強く勧める」としています。Xcode は App Store から最新版を入れ、Xcode の Settings の Locations で Command Line Tools を選び、Platforms（または Components）で iOS のシミュレーターを足します。CocoaPods は Ruby の gem で、iOS のライブラリを入れるのに使います。

Android 向けには、~/.zprofile（または ~/.zshrc）に次を足します。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

端末を開き直し、echo $ANDROID_HOME で値が出れば反映されています。

React Native CLIで作る場合

npm uninstall -g react-native-cli @react-native-community/cli   # 以前に入れた全体のCLIを消す
npx @react-native-community/cli@latest init AwesomeProject
cd AwesomeProject
npm start              # 1つ目の端末で Metro を起動
npm run android        # 2つ目の端末で Android にビルドして起動

公式は、以前に全体へ入れた react-native-cli が残っていると思わぬ問題を起こすので、先に消すよう案内しています。react-native init や npm install -g react-native-cli を使う手順は、以前の版の解説に残っている書き方です。 iOS は cd ios → bundle install → bundle exec pod install で依存を入れてから npm run ios で動かします。

プロジェクトを作って動かす（create-expo-app）

この節では、ひな形に何が入っていて、expo start が何を表示し、端末が何を受け取るのかを、実物で確かめます。

2026年10月22日に npx create-expo-app@latest を実行すると、SDK 58 のプロジェクトができました。 npm の expo-template-default の latest タグが 58.0.26 を指していたためです。docs.expo.dev の作成の手順には「SDK 58 への移行期間は、--template を付けないと SDK 57 のプロジェクトになる」「実機の Expo Go で使うなら SDK 57 を」と書かれています。版を決めたいときは --template default@sdk-57 のように指定できます。

$ npx create-expo-app@latest my-app
Creating my-app using the expo-template-default template.

✔ Downloaded and extracted project files.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd my-app
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
- npm run web

既定のひな形の構成

既定のひな形（expo-template-default 58.0.26）の主なファイルです。

場所	中身
src/app/_layout.tsx	画面全体の枠（テーマとタブ）。Expo Router の決まりの名前
src/app/index.tsx	最初の画面（Home）。ここから書き始める
src/app/explore.tsx	2つ目の画面（Explore）。ファイルを置くと画面が増える
src/components/	部品。app-tabs.tsx と app-tabs.web.tsx のように OS 別のファイルもある
src/constants/・src/hooks/	色・余白の定数、ダークモード用のフック
assets/	アイコン・スプラッシュの画像
app.json	アプリ名・アイコン・プラグインなどの設定
AGENTS.md・.claude/settings.json	AI のコーディングエージェント向けの説明と設定
scripts/reset-project.js	npm run reset-project で見本を消し、空の src/app にする

package.json は次のとおりでした。main が expo-router/entry で、Expo Router が入口です。

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "dependencies": {
    "@expo/ui": "~58.0.22",
    "expo": "~58.0.17",
    "expo-constants": "~58.0.13",
    "expo-device": "~58.0.5",
    "expo-font": "~58.0.9",
    "expo-glass-effect": "~58.0.4",
    "expo-image": "~58.0.16",
    "expo-linking": "~58.0.14",
    "expo-router": "~58.0.25",
    "expo-splash-screen": "~58.0.11",
    "expo-status-bar": "~58.0.4",
    "expo-symbols": "~58.0.4",
    "expo-system-ui": "~58.0.6",
    "expo-web-browser": "~58.0.6",
    "react": "19.3.0",
    "react-dom": "19.3.0",
    "react-native": "0.88.0",
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-safe-area-context": "~5.10.1",
    "react-native-screens": "~4.30.0",
    "react-native-web": "~0.21.4",
    "react-native-worklets": "0.13.0"
  },
  "devDependencies": {
    "@types/react": "~19.3.0",
    "typescript": "~6.0.3"
  },
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint"
  },
  "private": true
}

.gitignore には /ios と /android が入っています。Expo では android・ios のフォルダを手で書き換えず、app.json と config plugin から生成します（Continuous Native Generation）。

いちばん小さいひな形（blank-typescript）

画面の仕組みだけを見たいときは --template blank-typescript が小さく作れます。中身は15ファイルで、入口は次の2つです。

// index.ts
import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

// App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

依存を入れると、node_modules は439パッケージ・約372MB でした（pnpm 12.14.0 で導入、Web 用と jest を足す前）。

expo startで表示されるもの

npx expo start を実行したときの表示です（--offline と --port 30401 を付けて起動。ポートを指定しないときの既定は 8081）。

$ npx expo start --offline --port 30401
Networking has been disabled
Starting project at （プロジェクトのフォルダ）
Starting Metro Bundler

Waiting on http://localhost:30401

Logs for your project will appear below.

対話できる端末では、続けて操作のキーの一覧が出ます。Expo CLI 58.1.14 のソースにある表示の文言です。

キー	表示（原文）	意味
s	switch to development build（または Expo Go）	開くアプリを切り替える
a	open Android	Android のエミュレーター・実機で開く
i	open iOS simulator	iOS シミュレーターで開く（Mac だけ表示）
w	open web	ブラウザで開く
j	open debugger	デバッガーを開く
r	reload app	アプリを読み込み直す
m	toggle menu	端末の開発メニューを開く
shift+m	more tools	ほかの道具
o	open project code in your editor	エディターでプロジェクトを開く

端末（Expo Go）が受け取るもの

Expo Go は、開発サーバーから「マニフェスト」という JSON を受け取り、そこに書かれた URL から JavaScript のバンドルを取得します。Android として開発サーバーにリクエストを送ると、次の JSON が返りました（一部）。

{
 "runtimeVersion": "exposdk:58.0.0",
 "launchAsset": {
  "key": "bundle",
  "contentType": "application/javascript",
  "url": "http://127.0.0.1:30401/index.ts.bundle?platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=1&transform.routerRoot=app&unstable_transformProfile=hermes-stable"
 }
}

runtimeVersion の exposdk:58.0.0 が、Expo Go の版と合っている必要がある値です。transform.engine=hermes は、Hermes 向けに変換することを表します。このバンドルを取得すると、705モジュール・3,980,111バイトの JavaScript で、まとめるのに約20秒かかりました（開発モード・初回）。

React Nativeのコンポーネント早見表（HTMLとの対応）

この節では、よく使う部品が HTML の何にあたるかを、Web に出力した実物の HTML で確かめます。

React Native では div や <p> は使わず、<View> や <Text> を使います。 公式の「Core Components」の表では、<View> は Android の ViewGroup・iOS の UIView、<Text> は TextView・UITextView に対応します。各部品を並べたアプリを expo export --platform web で出力し、Chromium で開いて、生成された HTML のタグを調べました（react-native-web 0.21.4。表の div は HTML の div 要素です）。

部品	役割	Web に出力された HTML	Android・iOS（公式の表）
View	箱。レイアウトの基本	div	ViewGroup・UIView
Text	文字。文字は必ずこの中	div dir="auto"	TextView・UITextView
Image	画像	div の中に <img>	ImageView・UIImageView
ScrollView	スクロールする箱。中身を全部描く	div	ScrollView・UIScrollView
TextInput	文字の入力欄	<input>（multiline で <textarea>）	EditText・UITextField
Pressable	押せる箱（押した状態を細かく扱える）	div tabindex="0"	―
TouchableOpacity	押すと薄くなる箱	div tabindex="0"	―
Button	標準の見た目のボタン	<button type="button">	―
Switch	オン・オフの切り替え	div の中に <input type="checkbox">	―
ActivityIndicator	読み込み中のくるくる	div role="progressbar"	―
FlatList	長いリスト。見える分だけ描く	div	―
SectionList	見出し付きのリスト	div	―
KeyboardAvoidingView	キーボードに隠れないよう動く箱	div	―

「―」は、公式の Core Components の表に OS のビューが載っていない部品です。

非推奨になった部品（0.88）

react-native 0.88.0 のソース（index.js）では、次の部品を使うと警告が出ます。警告の文と代わりのものです。

部品	警告文（原文の先頭）	代わり
SafeAreaView	SafeAreaView has been deprecated and will be removed in a future release.	react-native-safe-area-context
ImageBackground	ImageBackground is deprecated and will be removed in a future release.	絶対配置の Image を View に重ねる
DrawerLayoutAndroid	DrawerLayoutAndroid is deprecated and will be removed in a future release.	react-native-drawer-layout
InputAccessoryView	InputAccessoryView is deprecated and will be removed in a future release.	react-native-keyboard-controller の KeyboardStickyView
ProgressBarAndroid	ProgressBarAndroid has been extracted from react-native core …	@react-native-community/progress-bar-android

Expo の既定のひな形も、SafeAreaView は react-native-safe-area-context から読み込んでいました。

書き方の基本（JSX・state・リスト）

この節では、入力欄・ボタン・リストを使った小さなアプリを書き、どう動くかが分かります。

文字を入力して「追加」を押すと、リストに足されるアプリです。これを App.tsx に書き、Web とテストで動かしました。

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

type Todo = { id: string; title: string };

export default function App() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState<Todo[]>([]);

  const add = () => {
    if (!text.trim()) return;
    setTodos([...todos, { id: String(Date.now()), title: text.trim() }]);
    setText('');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>やること</Text>
      <View style={styles.row}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="入力して追加"
        />
        <Pressable style={styles.button} onPress={add}>
          <Text style={styles.buttonText}>追加</Text>
        </Pressable>
      </View>
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        ListEmptyComponent={<Text>まだありません</Text>}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 64, paddingHorizontal: 16, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 12 },
  row: { flexDirection: 'row', gap: 8, marginBottom: 12 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 6, padding: 8 },
  button: { backgroundColor: '#208AEF', borderRadius: 6, paddingHorizontal: 16, justifyContent: 'center' },
  buttonText: { color: '#fff', fontWeight: 'bold' },
  item: { paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#eee' },
});

Web（React）との違い	React Native での書き方
入力の値を受け取る	onChange ではなく onChangeText（文字列が直接届く）
クリック	onClick ではなく onPress
文字を置く	文字は必ず <Text> の中。<View> に直接書くとエラー
スタイル	className ではなく style={styles.名前}

Web に出力したページで「牛乳を買う」と入力して追加すると、リストの行は div dir="auto" の要素（中身は「牛乳を買う」）として描かれました。

FlatListとScrollViewの違い（1000行で測った）

1000行のデータを、ScrollView に map で並べた場合と FlatList に渡した場合で、最初に描かれた行数を jest で数えました。

ScrollView: 1000
FlatList: 10

公式のドキュメントでは、FlatList の initialNumToRender の既定値は 10 で、keyExtractor を省くと item.key → item.id → 添字の順にキーを探します。行の数が決まっていない・多いリストは FlatList、少ない決まった項目は ScrollView が向いています。

スタイルとFlexbox（CSSとの違い）

この節では、React Native のスタイルの書き方と、CSS の Flexbox と既定値が違う点が分かります。

スタイルは JavaScript のオブジェクトで書き、名前はキャメルケース（background-color → backgroundColor）にします。 公式のドキュメントでは、配列で渡すと後ろのスタイルが優先されます（style={[styles.base, styles.active]}）。CSS のようなセレクタやカスケードは無く、数値に単位は付けません（padding: 8）。

React Native の Flexbox は、既定値が Web の CSS と違います。 公式の「Layout with Flexbox」の記述と、Web に出力したときに <View> に付いた CSS（react-native-web が生成）を並べました。

プロパティ	React Native の既定	Web の CSS の既定	出力された View の CSS
flexDirection	column（縦に並ぶ）	row	flex-direction: column
alignContent	flex-start	stretch	align-content: flex-start
flexShrink	0	1	flex-shrink: 0
flex	数値1つだけ書ける	grow・shrink・basis の3つを書ける	―
position	relative	static	position: relative

Web の出力では、<View> の土台のクラスに次の CSS が付いていました（抜粋）。

.css-g5y9jx {
  align-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0px;
  min-width: 0px;
  position: relative;
}

上のアプリの row（flexDirection: 'row', gap: 8）は、Web の出力で display: flex; flex-direction: row; gap: 8px になっていました。Flexbox の各プロパティの意味は、関連記事「CSS flexboxの使い方早見表｜横並び・中央寄せのコピペ集と効かない原因」で扱っています。

画面遷移（ナビゲーション）の作り方

この節では、画面を移動する2つの方法（Expo Router と React Navigation）の書き方が分かります。

方法	画面の決め方	使う場面
Expo Router	app/（既定のひな形は src/app/）に置いたファイルが画面になる	Expo の既定のひな形
React Navigation	コードでスタックやタブを定義する	reactnative.dev の Navigation のページが案内

Expo Router（ファイルで画面を作る）

docs.expo.dev は Expo Router を「React Native と Web のアプリのための、ファイルベースのルーター」と説明しています。src/app/about.tsx を置くと /about という画面になり、Link で移動します。

// src/app/index.tsx
import { Link } from 'expo-router';
import { Text, View } from 'react-native';

export default function Home() {
  return (
    <View>
      <Text>ホーム</Text>
      <Link href="/about">About へ</Link>
    </View>
  );
}

ひな形の AGENTS.md には、「src/app/ のファイルはすべて画面になり、_layout.tsx がナビゲーターを決める。画面でないコード（部品・フック）は src/app/ の外に置く」と書かれています。

React Navigation（コードで定義する）

reactnative.dev の「Navigating Between Screens」にある、スタック（画面を積み重ねる移動）の例です。

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

import {createStaticNavigation, useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {title: 'Welcome'},
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

画面の中では useNavigation() で取り出した navigation.navigate('Profile', {name: 'Jane'}) で移動します。Expo を使わないプロジェクトでは、react-native-screens などを npm install で入れ、iOS は pod install を実行します。

AndroidとiOSで書き分ける（Platform・.ios.tsx）

この節では、OS ごとに違う処理や部品を書く2つの方法が分かります。

import { Platform } from 'react-native';

const color = Platform.OS === 'ios' ? 'red' : 'green';

const style = Platform.select({
  ios: { backgroundColor: 'red' },
  android: { backgroundColor: 'green' },
  default: { backgroundColor: 'blue' },   // Web など
});

処理が大きく違うときは、Button.ios.tsx と Button.android.tsx のようにファイルを分け、import Button from './Button' と拡張子を書かずに読み込みます。Metro が OS に合うファイルを選びます。

Web 用に出力するときに、存在しないファイルを読み込ませたところ、Metro が探した順番がエラーに出ました。.web.tsx のような OS 別のファイルが、拡張子だけのファイルより先に探されます。

None of these files exist:
  * components/Header(.web.ts|.ts|.web.tsx|.tsx|.web.mjs|.mjs|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css)
  * components/Header

既定のひな形にも、app-tabs.tsx（スマホ用）と app-tabs.web.tsx（Web 用）が並んでいます。Platform.Version は、Android では OS の版ではなく API レベル（数値）、iOS では "17.0" のような文字列が入ります。

Webで動かす（expo export）

この節では、同じコードをブラウザ向けに出力したときに何ができるかを、実物で確かめます。

Expo では、react-dom・react-native-web・@expo/metro-runtime を入れると Web にも出力できます。上のやることアプリを出力しました。

$ npx expo install react-dom react-native-web @expo/metro-runtime
$ npx expo export --platform web
Starting Metro Bundler

Web Bundled 11998ms index.ts (217 modules)

› web bundles (1):
_expo/static/js/web/index-6570a3412022bfd201442cc0880a6155.js (455KB)

› Files (3):
favicon.ico (15KB)
index.html (1.2KB)
metadata.json (49B)

Exported: dist

dist/index.html には、中身が空の div id="root" の要素と、JS を読み込む <script> が書かれていて、ブラウザで JS が動いてから画面ができます。dist/ は静的なファイルなので、そのまま Web サーバーに置けます。Expo の既定のひな形は app.json の web.output が server になっていて、出力の形が変わります（SDK 58 の告知：web.output を書かないときの既定もサーバー出力）。

テストを書く（jest-expo）

この節では、Expo のプロジェクトで jest のテストを動かす手順と、つまずきやすい点が分かります。

docs.expo.dev の「Unit testing」の手順で入れ、package.json に "jest": { "preset": "jest-expo" } を足しました。

npx expo install jest-expo jest @types/jest --dev
npx expo install @testing-library/react-native --dev

// __tests__/App.test.tsx
import { fireEvent, render, screen } from '@testing-library/react-native';
import App from '../App';

test('入力した文字がリストに追加される', async () => {
  await render(<App />);
  expect(screen.getByText('まだありません')).toBeTruthy();

  await fireEvent.changeText(screen.getByPlaceholderText('入力して追加'), '牛乳を買う');
  await fireEvent.press(screen.getByText('追加'));

  expect(screen.getByText('牛乳を買う')).toBeTruthy();
  expect(screen.queryByText('まだありません')).toBeNull();
});

test('空のままでは追加されない', async () => {
  await render(<App />);
  await fireEvent.press(screen.getByText('追加'));
  expect(screen.getByText('まだありません')).toBeTruthy();
});

$ npx jest --verbose
PASS __tests__/App.test.tsx
  ✓ 入力した文字がリストに追加される (211 ms)
  ✓ 空のままでは追加されない (6 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.961 s, estimated 1 s
Ran all test suites.

@testing-library/react-native 14 では、render と fireEvent に await を付けます。 付けずに書くと、You seem to have overlapping act() calls, this is not supported. と出たあと、入力した文字が見つからずにテストが失敗しました。テストの書き方は、関連記事「React Testing Library使い方｜getBy・findByの違い」で扱っています。

TypeScript 6 では、tsconfig.json に "types": ["jest"] を足さないと、テストのファイルで型のエラーが出ました。

__tests__/App.test.tsx(4,1): error TS2593: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": ["jest"]
  }
}

この設定のあと、npx tsc --noEmit はエラーなしで終わりました。React の props の型の書き方は、関連記事「React TypeScriptの型の書き方｜props・イベント型一覧」で扱っています。

android・iosのフォルダを作る（expo prebuild）

blank のひな形で npx expo prebuild --platform android --no-install を実行すると、android/ フォルダ（53ファイル）ができ、package.json の android のスクリプトが expo start --android から expo run:android に書き換わりました。

› Android package name: com.anonymous.hellorn
✔ Created native directory
✔ Updated package.json
✔ Finished prebuild

生成された android/gradle.properties には、newArchEnabled=true・hermesEnabled=true・android.enableMinifyInReleaseBuilds=true が入っていました。最後の設定は、SDK 58 の告知にある「リリースビルドで R8（コードの圧縮）が既定で有効」に当たります。

FlutterやSwift・Kotlinとの違い

この節では、React Native と、ほかのアプリの作り方の違いを、公式のドキュメントにある事実で比べます。

項目	React Native	Flutter	Swift（SwiftUI）	Kotlin（Compose）
言語	TypeScript・JavaScript	Dart	Swift	Kotlin
画面の部品	OS のビューを作る	Flutter が自前で描く	OS の部品	OS の部品
公式の対象	Android・iOS（Web・Windows 等は別のプロジェクト）	Android・iOS・Web・Windows・macOS・Linux	Apple のプラットフォーム	Android
パッケージ	npm（package.json）	pub.dev（pubspec.yaml）	Swift Package Manager など	Gradle
変更をすぐ反映	Fast Refresh	ホットリロード	Xcode のプレビュー	Compose のプレビュー

React Native の Web・Windows・macOS 対応は、公式の「Out-of-Tree Platforms」に、react-native-web（コミュニティ）や Microsoft の React Native Windows・macOS（パートナー）として載っています。Flutter のドキュメントは、違いを「React Native はネイティブのウィジェットに変換し、Flutter はネイティブのコードまでコンパイルする」と説明しています。

状況	選ぶもの	理由
チームが React と TypeScript に慣れている	React Native	書き方・npm の資産・型がそのまま使える
Web 版の React と処理やロジックを共有したい	React Native	同じ言語とライブラリ
Android・iOS で見た目を完全にそろえたい	Flutter	部品を自前で描く
デスクトップも1つのコードで公式に対応したい	Flutter	6つの OS が公式の対象
iPhone・Mac だけで OS の新機能をすぐ使う	Swift（SwiftUI）	Apple の公式の道具
Android だけで OS の新機能をすぐ使う	Kotlin（Jetpack Compose）	Android が推奨する UI の作り方

Flutter の仕組みと始め方は、関連記事「Flutterとは｜始め方・インストールとDartの基本を図と実例で解説」で扱っています。

React Nativeのよくあるエラーと直し方

この節では、作成から実行・テストまでに出るエラーの原文と、原因・直し方を引けます。「実行」は手元で再現した原文、「公式」は reactnative.dev・docs.expo.dev の原文です。

エラー・表示（原文）	原因	直し方
Text strings must be rendered within a <Text> component. Detected attempt to render "こんにちは" string within a <View> component.（実行）	文字を <View> に直接書いた	文字を <Text> で囲む
Unable to resolve module ./components/Header from …/App.tsx（実行）	ファイル名・パスの誤り、ファイルが無い	パスと大文字小文字を直す。表示された候補の拡張子を確かめる
CommandError: Port 30402 is unavailable and 'npx expo' is running in non-interactive mode, so it can't prompt to use another port.（実行）	ポートを別のプロセスが使っている（既定は 8081）	そのプロセスを止めるか --port で別の番号にする
error TS2593: Cannot find name 'test'.（実行）	TypeScript 6 で jest の型が読まれていない	tsconfig.json に "types": ["jest"]
You seem to have overlapping act() calls, this is not supported.（実行）	Testing Library 14 で await を付けていない	await render(...)・await fireEvent...
SafeAreaView has been deprecated and will be removed in a future release.（0.88 のソース）	非推奨の部品を使った	react-native-safe-area-context に替える
Project is incompatible with this version of Expo Go（公式）	プロジェクトの SDK と Expo Go の版が合わない	対応する Expo Go を入れる、development build を使う
You need to be signed in to Expo Go and Expo CLI to open your project.（公式）	iPhone の実機で Expo Go と CLI にログインしていない	npx expo login と、Expo Go で同じアカウントにサインイン
"code":"ENOSPC","errno":"ENOSPC"（公式）	Linux で監視できるファイル数の上限	fs.inotify.max_user_watches を増やす
Error: spawnSync ./gradlew EACCES（公式）	Mac で gradlew に実行の権限が無い	chmod +x android/gradlew
com.android.ddmlib.ShellCommandUnresponsiveException（公式）	adb が応答しない	adb kill-server → adb start-server
npm WARN locking Error: EACCES（公式）	npm のフォルダの権限	~/.npm の所有者を自分にする

表の3行目のポートの番号は、再現したときに指定した番号です。対話できる端末では、別のポートを使うかを聞かれます。

版がずれたとき（expo install --check）

Expo では、npm install で版を指定せずに入れると、SDK と合わない版が入ることがあります。npx expo install は SDK に合う版を選び、--check で今の状態を確かめられます。

$ npx expo install --check
Dependencies are up to date

ずれていたときは npx expo install --fix で合わせます。docs.expo.dev は、うまくいかないときに npx expo-doctor@latest で依存と設定を診断する手順も案内しています。

React Nativeの学び方（次の一歩）

この節では、作り始めてから何をどの順に学ぶとよいかが分かります。

公式の docs.expo.dev には、最初のアプリを作りながら学ぶ「Tutorial」があり、日本語のページも用意されています。

よくある質問

Q. React Nativeとは何ですか？ A. Meta が開発している、React と JavaScript（TypeScript）で Android・iOS のアプリを作れるオープンソースのフレームワークです。画面には OS のビューが使われます。仕組みは「React Nativeの仕組み」の節で図にしています。

Q. React Nativeの読み方は？ A. 「リアクトネイティブ」と読みます。RN と略されることもあります。

Q. React Nativeは無料ですか？ A. 無料です（MIT ライセンス）。Expo も無料で、費用がかかるのはストアの登録料（2026年10月22日時点で Google Play は1回限り US$25、Apple は年 US$99）と、使う場合の EAS の有料プランです。

Q. ReactとReact Nativeの違いは？ A. 書き方（コンポーネント・JSX・Hooks）は同じで、React は Web の HTML を、React Native は Android・iOS のビューを作ります。div の代わりに <View>、<p> の代わりに <Text> を使います。

Q. ExpoとReact Nativeの違いは？ Expoは使うべきですか？ A. Expo は React Native の上に作られたフレームワークで、作成・実行・ビルドの道具とライブラリをまとめて提供します。reactnative.dev は、新しいアプリには Expo などのフレームワークを使うことを勧めています。選び方は「ExpoとReact Native CLIの違い」の判断フローにまとめています。

Q. WindowsでiPhoneのアプリは作れますか？ A. 手元で iOS 用にビルドするには Mac が要ります。Windows では、クラウドでビルドする EAS Build を使う方法があります。Expo Go で試すときは、App Store の Expo Go が対応する SDK（docs.expo.dev では SDK 54 まで）に注意が要ります。

Q. Expo Goで「Project is incompatible with this version of Expo Go」と出ます。 A. プロジェクトの SDK と、端末の Expo Go の版が合っていません。Android は expo.dev/go から合う版を入れられます。iPhone は development build を作るか、プロジェクトを Expo Go が対応する SDK に合わせます。

Q. React NativeとFlutterはどちらを選べばいいですか？ A. チームが React と TypeScript に慣れているなら React Native、OS をまたいで見た目を完全にそろえたい・デスクトップも公式に対応したいなら Flutter が向いています。「FlutterやSwift・Kotlinとの違い」の判断表にまとめています。

Q. React Nativeの新アーキテクチャとは？ 以前の構成に戻せますか？ A. JSI・Fabric・TurboModules による仕組みで、0.76 から既定、0.82 からはこれだけで動きます。0.82 以降は newArchEnabled=false を設定しても無視されます。

Q. React NativeはWeb版も作れますか？ A. 作れます。Expo では react-dom・react-native-web を入れて npx expo export --platform web を実行すると、dist/ に HTML と JS が出力されます。<View> は div、<TextInput> は <input> になりました。

Q. React Nativeはオワコンですか？ 将来性は？ A. 事実として、2026年も約2か月ごとに版が出ており（6月に 0.86、8月に 0.87、10月に 0.88）、0.88 は利用者向けの破壊的変更なしで公開されました。公式のショーケースには Meta・Microsoft・Amazon・Shopify のアプリが載っています。

まとめ

• React Native は、React と TypeScript で Android・iOS のアプリを作る Meta の無料のフレームワーク。2026年10月22日時点の最新は 0.88.0（React 19.3.0）。
• 0.82 からは新アーキテクチャ（JSI・Fabric・TurboModules）だけで動き、JavaScript は Hermes が実行する。
• 公式は Expo で始めることを勧めている。npx create-expo-app@latest で SDK 58 のひな形ができた。android・ios のフォルダは expo prebuild で生成する。
• Expo Go は対応する SDK が決まっている。合わないときは development build か、合う版の Expo Go を使う。
• 部品は <View>・<Text>・<TextInput>・<Pressable>・<FlatList>。文字は必ず <Text> の中。長いリストは FlatList（最初は10行だけ描く）。
• Flexbox の既定は縦並び（column）・flexShrink: 0。Web の出力でも同じ CSS が付く。
• Node.js は 22.13 以上（24.3 以上・26 以上も可）。Android は JDK 17 と Android Studio、iOS は Mac と Xcode。

参考・出典

確認日はいずれも 2026年10月22日です。

• React Native「Get Started with React Native」：https://reactnative.dev/docs/environment-setup
• React Native「Set Up Your Environment」：https://reactnative.dev/docs/set-up-your-environment
• React Native「Get Started Without a Framework」：https://reactnative.dev/docs/getting-started-without-a-framework
• React Native「About the New Architecture」：https://reactnative.dev/architecture/landing-page
• React Native「Fabric」：https://reactnative.dev/architecture/fabric-renderer
• React Native「Threading Model」：https://reactnative.dev/architecture/threading-model
• React Native「Turbo Native Modules」：https://reactnative.dev/docs/turbo-native-modules-introduction
• React Native「Core Components and Native Components」：https://reactnative.dev/docs/intro-react-native-components
• React Native「Style」：https://reactnative.dev/docs/style
• React Native「Layout with Flexbox」：https://reactnative.dev/docs/flexbox
• React Native「FlatList」：https://reactnative.dev/docs/flatlist
• React Native「Navigating Between Screens」：https://reactnative.dev/docs/navigation
• React Native「Platform-Specific Code」：https://reactnative.dev/docs/platform-specific-code
• React Native「Fast Refresh」：https://reactnative.dev/docs/fast-refresh
• React Native「Out-of-Tree Platforms」：https://reactnative.dev/docs/out-of-tree-platforms
• React Native「Troubleshooting」：https://reactnative.dev/docs/troubleshooting
• React Native Blog（0.82・0.84・0.87・0.88 のリリース）：https://reactnative.dev/blog
• React Native「Showcase」：https://reactnative.dev/showcase
• Expo「Create a project」：https://docs.expo.dev/get-started/create-a-project/
• Expo「Set up your environment」：https://docs.expo.dev/get-started/set-up-your-environment/
• Expo「Introduction to Expo Router」：https://docs.expo.dev/router/introduction/
• Expo「Unit testing with Jest」：https://docs.expo.dev/develop/unit-testing/
• Expo「Expo Go version mismatch」：https://docs.expo.dev/troubleshooting/expo-go-version-mismatch/
• Expo「Expo Go sign-in required」：https://docs.expo.dev/troubleshooting/expo-go-sign-in-required/
• Expo Changelog「Expo SDK 58」：https://expo.dev/changelog/sdk-58
• Expo「Pricing」：https://expo.dev/pricing
• Flutter「Flutter for React Native developers」：https://docs.flutter.dev/get-started/flutter-for/react-native-devs
• Apple Developer「メンバーシップの登録」：https://developer.apple.com/jp/help/account/membership/program-enrollment/
• Play Console ヘルプ「Play Console に登録する」：https://support.google.com/googleplay/android-developer/answer/6112435?hl=ja
• npm「react-native」「expo」「create-expo-app」：https://www.npmjs.com/package/react-native

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。