react-native-expo について
react-native-expoは、Expo SDK 52以降と新しいReact Nativeを使った開発・アップグレード向けのスキルです。アーキテクチャ変更、移行時の注意点、開発とデバッグの手順を扱います。
主な機能
- 01Expoプロジェクトの作成と起動
- 02新アーキテクチャへの移行ガイド
- 03React 19の変更点
- 04React Native DevToolsでのデバッグ
- 05アップグレード時の問題対処
活用シーン
- 01Expoアプリの作成
- 02旧React Nativeプロジェクトの更新
- 03新アーキテクチャ互換性の問題調査
- 04DevToolsでのログ確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ ovachiever/ droid-tings --skill react-native-expoインストール後、Claude Code で/react-native-expoを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.md.claude-plugin/plugin.jsonassets/css-features-cheatsheet.mdexample-template.txtnew-arch-decision-tree.mdreferences/example-reference.mdexpo-sdk-52-breaking.mdnew-architecture-errors.mdreact-19-migration.mdscripts/check-rn-version.shexample-script.sh詳細
React Native Expo(0.76-0.82+ / SDK 52+)
ステータス:本番環境対応 最終更新:2025-11-22 依存関係:Node.js 18+、Expo CLI 最新バージョン:[email protected]、expo@~52.0.0、[email protected]
クイックスタート(15分)
1. 新しい Expo プロジェクトを作成する(RN 0.76+)
# Create new Expo app with React Native 0.76+
npx create-expo-app@latest my-app
cd my-app
# Install latest dependencies
npx expo install react-native@latest expo@latest
重要な理由:
- Expo SDK 52+ では、デフォルトで新アーキテクチャが有効な React Native 0.76+ が使われます
- React Native 0.82+ では新アーキテクチャが必須です(無効化できません)
- Hermes のみがサポート対象の JavaScript エンジンです(Expo Go から JSC は削除されました)
2. 新アーキテクチャが有効になっていることを確認する
# Check if New Architecture is enabled (should be true by default)
npx expo config --type introspect | grep newArchEnabled
重要:
- React Native 0.82+ では新アーキテクチャが必須です。レガシーアーキテクチャは完全に削除されています
- 0.75 以前から移行する場合は、相互運用レイヤーを使用するため、まず 0.76-0.81 にアップグレードしてください
- 0.82+ で新アーキテクチャを無効にしようとしないでください(ビルドに失敗します)
3. 開発サーバーを起動する
# Start Expo dev server
npx expo start
# Press 'i' for iOS simulator
# Press 'a' for Android emulator
# Press 'j' to open React Native DevTools (NOT Chrome debugger!)
重要:
- 古い Chrome デバッガーは 0.79 で削除されました。代わりに React Native DevTools を使用してください
- Metro ターミナルには
console.log()が出力されなくなりました。DevTools Console を使用してください - キーボードショートカットの「a」/「i」は CLI では動作しますが、Metro ターミナルでは動作しません
重大な破壊的変更(2024年12月以降)
🔴 新アーキテクチャの必須化(0.82+)
変更点:
- 0.76-0.81:新アーキテクチャがデフォルト、レガシーアーキテクチャは凍結(新機能の追加なし)
- 0.82+:レガシーアーキテクチャがコードベースから完全に削除
影響:
# This will FAIL in 0.82+:
# gradle.properties (Android)
newArchEnabled=false # ❌ Ignored, build fails
# iOS
RCT_NEW_ARCH_ENABLED=0 # ❌ Ignored, build fails
移行手順:
- まず 0.76-0.81 にアップグレードします(0.75 以前の場合)
- 新アーキテクチャを有効にしてテストします
- 互換性のない依存関係(Redux、i18n、CodePush)を修正します
- その後、0.82+ にアップグレードします
🔴 propTypes の削除(React 19 / RN 0.78+)
変更点:
React 19 では propTypes が完全に削除されました。実行時の検証も警告もなく、エラーにならず無視されます。
変更前(古いコード):
import PropTypes from 'prop-types';
function MyComponent({ name, age }) {
return <Text>{name} is {age}</Text>;
}
MyComponent.propTypes = { // ❌ Silently ignored in React 19
name: PropTypes.string.isRequired,
age: PropTypes.number
};
変更後(TypeScript を使用):
type MyComponentProps = {
name: string;
age?: number;
};
function MyComponent({ name, age }: MyComponentProps) {
return <Text>{name} is {age}</Text>;
}
移行:
# Use React 19 codemod to remove propTypes
npx @codemod/react-19 upgrade
🔴 forwardRef の非推奨化(React 19)
変更点:
forwardRef は不要になりました。ref を通常のプロパティとして渡してください。
変更前(古いコード):
import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => { // ❌ Deprecated
return <TextInput ref={ref} {...props} />;
});
変更後(React 19):
function MyInput({ ref, ...props }) { // ✅ ref is a regular prop
return <TextInput ref={ref} {...props} />;
}
🔴 iOS テンプレートのデフォルトが Swift に変更(0.77+)
変更点:
新しいプロジェクトでは、Objective-C の AppDelegate.mm の代わりに Swift の AppDelegate.swift が使われます。
以前の構成:
ios/MyApp/
├── main.m # ❌ Removed
├── AppDelegate.h # ❌ Removed
└── AppDelegate.mm # ❌ Removed
新しい構成:
// ios/MyApp/AppDelegate.swift ✅
import UIKit
import React
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, ...) -> Bool {
// App initialization
return true
}
}
移行(0.76 → 0.77): 既存のプロジェクトをアップグレードする場合は、次の行を必ず追加してください:
// Add to AppDelegate.swift during migration
import React
import ReactCoreModules
RCTAppDependencyProvider.sharedInstance() // ⚠️ CRITICAL: Must add this!
🔴 Metro のログ転送を削除(0.77+)
変更点:
Metro ターミナルには console.log() の出力が表示されなくなりました。
変更前(0.76):
# console.log() appeared in Metro terminal
$ npx expo start
> LOG Hello from app! # ✅ Appeared here
変更後(0.77+):
# console.log() does NOT appear in Metro terminal
$ npx expo start
# (no logs shown) # ❌ Removed
# Workaround (temporary, will be removed):
$ npx expo start --client-logs # Shows logs, deprecated
解決策: 代わりに React Native DevTools Console を使用してください(CLI で「j」を押します)。
🔴 Chrome デバッガーの削除(0.79+)
変更点:
古い Chrome デバッガー(chrome://inspect)は削除されました。代わりに React Native DevTools を使用してください。
以前の方法(削除済み):
# ❌ This no longer works:
# Open Dev Menu → "Debug" → Chrome DevTools opens
新しい方法(0.76+):
# Press 'j' in CLI or Dev Menu → "Open React Native DevTools"
# ✅ Uses Chrome DevTools Protocol (CDP)
# ✅ Reliable breakpoints, watch values, stack inspection
# ✅ JS Console (replaces Metro logs)
制限事項:
- サードパーティ製拡張機能(Redux DevTools など)はまだサポートされていません
- ネットワークインスペクターは 0.83(2025年後半)に追加予定です
🔴 JSC エンジンがコミュニティ管理に移行(0.79+)
変更点: JavaScriptCore(JSC)は React Native のコアから切り離され、Hermes がデフォルトになりました。
変更前(0.78):
- Hermes と JSC の両方が同梱
- Expo Go で JSC を利用可能
変更後(0.79+):
// If you still need JSC (rare):
{
"dependencies": {
"@react-native-community/javascriptcore": "^1.0.0"
}
}
Expo Go:
- JSC は Expo Go から完全に削除されました(SDK 52+)
- Hermes のみ
**注:**JSC は将来的に React Native から完全に削除される予定です。
🔴 ディープインポートの非推奨化(0.80+)
変更点: 内部パスからのインポートは、今後動作しなくなります。
変更前(古いコード):
// ❌ Deep imports deprecated
import Button from 'react-native/Libraries/Components/Button';
import Platform from 'react-native/Libraries/Utilities/Platform';
変更後:
// ✅ Import only from 'react-native'
import { Button, Platform } from 'react-native';
新機能(2024年12月以降)
CSS プロパティ(0.77 以降の新アーキテクチャのみ)
React Native では、以前はウェブでしか利用できなかった多くの CSS プロパティがサポートされるようになりました。
1. display: contents
要素を「見えなく」しつつ、その子要素はレイアウト内に維持します。
<View style={{ display: 'contents' }}>
{/* This View disappears, but Text still renders */}
<Text>I'm still here!</Text>
</View>
ユースケース: レイアウトに影響させたくないラッパーコンポーネント。
2. boxSizing
幅や高さの計算方法を制御します。
// Default: padding/border inside box
<View style={{
boxSizing: 'border-box', // Default
width: 100,
padding: 10,
borderWidth: 2
// Total width: 100 (padding/border inside)
}} />
// Content-box: padding/border outside
<View style={{
boxSizing: 'content-box',
width: 100,
padding: 10,
borderWidth: 2
// Total width: 124 (100 + 20 padding + 4 border)
}} />
3. mixBlendMode + isolation
Photoshop のようにレイヤーをブレンドします。
<View style={{ backgroundColor: 'red' }}>
<View style={{
mixBlendMode: 'multiply', // 16 modes available
backgroundColor: 'blue'
// Result: purple (red × blue)
}} />
</View>
// Prevent unwanted blending:
<View style={{ isolation: 'isolate' }}>
{/* Blending contained within this view */}
</View>
利用可能なモード: multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity
4. outline プロパティ
レイアウトに影響しない(border とは異なる)視覚的なアウトラインです。
<View style={{
outlineWidth: 2,
outlineStyle: 'solid', // solid | dashed | dotted
outlineColor: 'blue',
outlineOffset: 4, // Space between element and outline
outlineSpread: 2 // Expand outline beyond offset
}} />
主な違い: アウトラインは要素のサイズを変えず、レイアウトの再計算も発生させません。
Android XML Drawable(0.78 以降)
ネイティブの Android ベクタードローアブル(XML)を画像ソースとして使用します。
// Load XML drawable at build time
import MyIcon from './assets/my_icon.xml';
<Image
source={MyIcon}
style={{ width: 40, height: 40 }}
/>
// Or with require:
<Image
source={require('./assets/my_icon.xml')}
style={{ width: 40, height: 40 }}
/>
メリット:
- スケーラブルなベクター画像(解像度に依存しません)
- PNG と比べて APK のサイズが小さくなります
- オフスレッドでデコードされるため、パフォーマンスが向上します
制約:
- ビルド時のリソースのみ(ネットワークからの読み込みには対応していません)
- Android のみ(iOS では引き続き SF Symbols または PNG を使用します)
React 19 の新しいフック
1. useActionState(フォームのパターンを置き換えます)
import { useActionState } from 'react';
function MyForm() {
const [state, submitAction, isPending] = useActionState(
async (prevState, formData) => {
// Async form submission
const result = await api.submit(formData);
return result;
},
{ message: '' } // Initial state
);
return (
<form action={submitAction}>
<TextInput name="email" />
<Button disabled={isPending}>
{isPending ? 'Submitting...' : 'Submit'}
</Button>
{state.message && <Text>{state.message}</Text>}
</form>
);
}
2. useOptimistic(楽観的な UI 更新)
import { useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [optimisticLikes, addOptimisticLike] = useOptimistic(
initialLikes,
(currentLikes, amount) => currentLikes + amount
);
async function handleLike() {
addOptimisticLike(1); // Update UI immediately
await api.like(postId); // Then update server
}
return (
<Button onPress={handleLike}>
❤️ {optimisticLikes}
</Button>
);
}
3. use(レンダリング中に Promise/コンテキストを読み取ります)
import { use } from 'react';
function UserProfile({ userPromise }) {
// Read promise directly during render (suspends if pending)
const user = use(userPromise);
return <Text>{user.name}</Text>;
}
React Native DevTools(0.76 以降)
アクセス方法:
- CLI で
jを押します - または、Dev Menu を開き、"Open React Native DevTools" を選択します
機能:
- ✅ 信頼性の高いブレークポイント(従来の Chrome デバッガーとは異なります)
- ✅ 値の監視、コールスタックの確認
- ✅ JS コンソール(Metro のログを置き換えます)
- ✅ Chrome DevTools Protocol(CDP)ベース
- ⏳ ネットワークインスペクター(0.83 で追加予定)
- ❌ サードパーティー拡張機能にはまだ対応していません
既知の問題の予防
このスキルは、文書化されている 12 件の問題を予防します。
Issue #1:propTypes が無視される
エラー: エラーは表示されません。propTypes が機能しないだけです
出典: React 19 アップグレードガイド
発生する理由: React 19 では実行時の propTypes 検証が削除されました
予防策: 代わりに TypeScript を使用し、npx @codemod/react-19 upgrade を実行して削除します
Issue #2:forwardRef の非推奨警告
エラー: Warning: forwardRef is deprecated
出典: React 19 アップグレードガイド
発生する理由: React 19 では ref を通常のプロパティとして使用できます
予防策: forwardRef のラッパーを削除し、ref をプロパティとして直接渡します
Issue #3:新アーキテクチャを無効化できない(0.82 以降)
エラー: newArchEnabled=false でビルドが失敗します
出典: React Native 0.82 リリースノート
発生する理由: レガシーアーキテクチャがコードベースから完全に削除されました
予防策: 0.82 以降にアップグレードする前に、新アーキテクチャへ移行します
Issue #4:「Fabric component descriptor not found」
エラー: Fabric component descriptor provider not found for component
出典: 新アーキテクチャ移行ガイド
発生する理由: コンポーネントが新アーキテクチャ(Fabric)に対応していません
予防策: ライブラリを新アーキテクチャ対応バージョンに更新するか、相互運用レイヤーを使用します(0.76~0.81)
Issue #5:「TurboModuleが登録されていない」
エラー: TurboModule '[ModuleName]' not found
参照元: 新アーキテクチャ移行ガイド
発生する理由: ネイティブモジュールが新アーキテクチャ(TurboModules)に対応している必要があります
予防策: ライブラリをTurboModulesに対応するよう更新するか、相互運用レイヤーを使用します(0.76-0.81)
Issue #6:SwiftのAppDelegateにRCTAppDependencyProviderがない
エラー: RCTAppDependencyProvider not found
参照元: React Native 0.77リリースノート
発生する理由: Objective-CからSwiftのテンプレートに移行するときに発生します
予防策: AppDelegate.swiftにRCTAppDependencyProvider.sharedInstance()を追加します
Issue #7:Metroのログが表示されない
エラー: console.log()がターミナルに表示されません
参照元: React Native 0.77リリースノート
発生する理由: Metroのログ転送は0.77で削除されました
予防策: React Native DevToolsのコンソールを使用する(「j」を押す)か、--client-logsフラグを一時的に使用します
Issue #8:Chromeデバッガーが動作しない
エラー: Chrome DevToolsが接続されません 参照元: React Native 0.79リリースノート 発生する理由: 従来のChromeデバッガーは0.79で削除されました 予防策: 代わりにReact Native DevToolsを使用します(「j」を押す)
Issue #9:深いパスからのインポートエラー
エラー: Module not found: react-native/Libraries/...
参照元: React Native 0.80リリースノート
発生する理由: 内部パスは非推奨となり、厳格なAPIが適用されます
予防策: 'react-native'からのみインポートし、深いパスからはインポートしないでください
Issue #10:新アーキテクチャでReduxストアがクラッシュする
エラー: Reduxストアの作成時にアプリがクラッシュします
参照元: Redux Toolkit移行ガイド
発生する理由: 古いreduxとredux-thunkは新アーキテクチャと互換性がありません
予防策: 代わりにRedux Toolkit(@reduxjs/toolkit)を使用します
Issue #11:新アーキテクチャでi18n-jsが不安定
エラー: 翻訳が更新されない、またはアプリがクラッシュします
参照元: コミュニティからの報告(GitHubのイシュー)
発生する理由: i18n-jsは新アーキテクチャと完全には互換性がありません
予防策: 代わりにreact-i18nextを使用します
Issue #12:AndroidでCodePushがクラッシュする
エラー: Androidがnullという名前のバンドルを探してクラッシュします
参照元: CodePushのGitHubイシュー
発生する理由: 新アーキテクチャとの既知の互換性の問題です
予防策: 新アーキテクチャではCodePushを避けるか、公式サポートを待ちます
移行ガイド:0.72-0.75 → 0.82+
ステップ1:まず相互運用レイヤーにアップグレードする(0.76-0.81)
理由: レガシーアーキテクチャを使用している場合、0.82に直接移行することはできません。相互運用レイヤーが失われます。
# Check current version
npx react-native --version
# Upgrade to 0.81 first (last version with interop layer)
npm install [email protected]
npx expo install --fix
ステップ2:新アーキテクチャを有効にする(未有効の場合)
# Android (gradle.properties)
newArchEnabled=true
# iOS
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
# Rebuild
npm run ios
npm run android
ステップ3:互換性のない依存関係を修正する
よくある非互換性:
# Replace Redux with Redux Toolkit
npm uninstall redux redux-thunk
npm install @reduxjs/toolkit react-redux
# Replace i18n-js with react-i18next
npm uninstall i18n-js
npm install react-i18next i18next
# Update React Navigation (if old version)
npm install @react-navigation/native@latest
ステップ4:十分にテストする
# Run on both platforms
npm run ios
npm run android
# Test all features:
# - Navigation
# - State management (Redux)
# - API calls
# - Deep linking
# - Push notifications
ステップ5:React 19に移行する(0.78+にアップグレードする場合)
# Run React 19 codemod
npx @codemod/react-19 upgrade
# Manually verify:
# - Remove all propTypes declarations
# - Remove forwardRef wrappers
# - Update to new hooks (useActionState, useOptimistic)
ステップ6:0.82+にアップグレードする
# Only after testing with New Architecture enabled!
npm install [email protected]
npx expo install --fix
# Rebuild
npm run ios
npm run android
ステップ7:iOSをSwiftに移行する(新規プロジェクトの場合)
新規プロジェクト(0.77+)では、デフォルトでSwiftが使用されます。既存のプロジェクトの場合:
# Follow upgrade helper
# https://react-native-community.github.io/upgrade-helper/
# Select: 0.76 → 0.77
# CRITICAL: Add this line to AppDelegate.swift
RCTAppDependencyProvider.sharedInstance()
よくあるパターン
パターン1:新しいフックを使った条件付きレンダリング
import { useActionState } from 'react';
function LoginForm() {
const [state, loginAction, isPending] = useActionState(
async (prevState, formData) => {
try {
const user = await api.login(formData);
return { success: true, user };
} catch (error) {
return { success: false, error: error.message };
}
},
{ success: false }
);
return (
<View>
<form action={loginAction}>
<TextInput name="email" placeholder="Email" />
<TextInput name="password" secureTextEntry />
<Button disabled={isPending}>
{isPending ? 'Logging in...' : 'Login'}
</Button>
</form>
{!state.success && state.error && (
<Text style={{ color: 'red' }}>{state.error}</Text>
)}
</View>
);
}
使用する場面: 読み込み中/エラー状態を伴うフォーム送信
パターン2:propTypesの代わりにTypeScriptを使う
// Define prop types with TypeScript
type ButtonProps = {
title: string;
onPress: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary';
};
function Button({ title, onPress, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<Pressable
onPress={onPress}
disabled={disabled}
style={[styles.button, styles[variant]]}
>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
使用する場面: 常に(React 19ではpropTypesが削除されています)
パターン3:視覚効果向けの新しいCSS
// Glowing button with outline and blend mode
function GlowButton({ title, onPress }) {
return (
<Pressable
onPress={onPress}
style={{
backgroundColor: '#3b82f6',
padding: 16,
borderRadius: 8,
// Outline doesn't affect layout
outlineWidth: 2,
outlineColor: '#60a5fa',
outlineOffset: 4,
// Blend with background
mixBlendMode: 'screen',
isolation: 'isolate'
}}
>
<Text style={{ color: 'white', fontWeight: 'bold' }}>
{title}
</Text>
</Pressable>
);
}
使用する場面: レイアウトに影響を与えない視覚効果(新アーキテクチャのみ)
バンドルされたリソースの使用
スクリプト(scripts/)
check-rn-version.sh - React Nativeのバージョンを検出し、アーキテクチャの要件について警告します
使用例:
./scripts/check-rn-version.sh
# Output: ✅ React Native 0.82 - New Architecture mandatory
# Output: ⚠️ React Native 0.75 - Upgrade to 0.76+ recommended
参考資料(references/)
react-19-migration.md - React 19 の詳細な破壊的変更と移行手順
new-architecture-errors.md - 新アーキテクチャを有効にしたときによく発生するビルドエラー
expo-sdk-52-breaking.md - Expo SDK 52 以降に固有の破壊的変更
Claude がこれらを読み込むタイミング: 移行エラー、ビルドの失敗、React 19 に関する詳細な質問に直面したとき
アセット(assets/)
new-arch-decision-tree.md - React Native のバージョンを選択するための判断ツリー
css-features-cheatsheet.md - 新しい CSS プロパティの完全な使用例
Expo SDK 52 以降の固有情報
破壊的変更
Expo Go からの JSC の削除:
// This no longer works in Expo Go (SDK 52+):
{
"jsEngine": "jsc" // ❌ Ignored, Hermes only
}
Expo Go からの Google Maps の削除(SDK 53 以降):
# Must use custom dev client for Google Maps
npx expo install expo-dev-client
npx expo run:android
プッシュ通知に関する警告: Expo Go ではプッシュ通知に関する警告が表示されます。本番環境でテストする際は、カスタム開発クライアントを使用してください。
新機能(SDK 52)
expo/fetch(WinterCG 準拠):
import { fetch } from 'expo/fetch';
// Standards-compliant fetch for Workers/Edge runtimes
const response = await fetch('https://api.example.com/data');
React Navigation v7:
npm install @react-navigation/native@^7.0.0
公式ドキュメント
- React Native: https://reactnative.dev
- Expo: https://docs.expo.dev
- React 19: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
- 新アーキテクチャ: https://reactnative.dev/docs/new-architecture-intro
- アップグレードヘルパー: https://react-native-community.github.io/upgrade-helper/
- Context7 ライブラリ ID: /facebook/react-native
パッケージバージョン(2025-11-22 確認済み)
{
"dependencies": {
"react": "^19.1.0",
"react-native": "^0.82.0",
"expo": "~52.0.0",
"@react-navigation/native": "^7.0.0",
"@reduxjs/toolkit": "^2.0.0",
"react-i18next": "^15.0.0"
},
"devDependencies": {
"@types/react": "^19.0.0",
"typescript": "^5.7.0"
}
}
トラブルシューティング
問題:「Fabric component descriptor not found」でビルドが失敗する
解決策: ライブラリが新アーキテクチャに対応していません。ライブラリのドキュメントで新アーキテクチャのサポートを確認するか、相互運用レイヤーを使用してください(0.76~0.81 のみ)。
問題:「propTypes is not a function」エラーが発生する
解決策: React 19 では propTypes が削除されました。代わりに TypeScript を使用して型をチェックしてください。npx @codemod/react-19 upgrade を実行してください。
問題:Metro のターミナルに console.log() が表示されない
解決策: Metro のログ転送は 0.77 で削除されました。React Native DevTools のコンソール(「j」を押す)か、npx expo start --client-logs(一時的な回避策)を使用してください。
問題:iOS のビルド中に Swift の AppDelegate エラーが発生する
解決策: AppDelegate.swift に RCTAppDependencyProvider.sharedInstance() を追加してください。Swift の移行セクションを参照してください。
問題:Redux ストアが起動時にクラッシュする
解決策: 従来の redux と redux-thunk の組み合わせではなく、Redux Toolkit を使用してください。@reduxjs/toolkit をインストールしてください。
問題:0.82 以降で新アーキテクチャを無効にできない
解決策: 0.82 以降では新アーキテクチャが必須です。従来のアーキテクチャが必要な場合は、0.81 以前を使用してください(推奨しません)。
セットアップ完了チェックリスト
このチェックリストを使って、セットアップを確認してください。
- React Native 0.76 以降、または Expo SDK 52 以降がインストールされている
- 新アーキテクチャが有効になっている(0.82 以降では自動)
- Hermes エンジンが有効になっている(デフォルト)
- React 19 への移行が完了している(propTypes、forwardRef を使用していない)
- 型チェック用に TypeScript が設定されている
- React Native DevTools にアクセスできる(「j」を押す)
- ディープインポート(
react-native/Libraries/*)を使用していない - Redux Toolkit を使用している(従来の redux ではない)
- react-i18next を使用している(i18n-js ではない)
- iOS のビルドが成功する(新規プロジェクトでは Swift テンプレート)
- Android のビルドが成功する
- 開発サーバーがエラーなく動作する
- すべてのナビゲーションと状態管理が機能する
質問や問題がありますか?
- ビルドエラーについては
references/new-architecture-errors.mdを確認してください - React 19 の問題については
references/react-19-migration.mdを確認してください - 公式ドキュメントを確認してください:https://reactnative.dev/docs/new-architecture-intro
- 新アーキテクチャが有効になっていることを確認してください(0.82 以降では必須)
- すべての依存関係が新アーキテクチャに対応していることを確認してください
ナレッジギャップを補完: このスキルでは、LLM が把握していない 2024 年 12 月以降の React Native の更新を扱います。このスキルがないと、Claude は非推奨の API、削除された機能、古いパターンを提案してしまいます。