React Native アプリのナビゲーションとインタラクションアーキテクチャ
これら 5 つのライブラリは、React Native アプリにおける画面遷移、ジェスチャー操作、アニメーション、およびパフォーマンス最適化の基盤を形成します。react-navigation と react-native-navigation はナビゲーション構造を管理する主要な選択肢であり、それぞれ JavaScript ベースとネイティブベースのアプローチを取ります。一方、react-native-gesture-handler、react-native-reanimated、react-native-screens は、それらのナビゲーションライブラリを支える、あるいは単独で高度なインタラクションを実現するためのインフラストラクチャとして機能します。
npmのダウンロードトレンド
GitHub Starsランキング
統計詳細
React Native ナビゲーションとインタラクション：アーキテクチャ比較
React Native アプリにおいて、画面遷移とユーザーインタラクションの品質は、アプリの信頼性を左右する重要な要素です。ここで比較する 5 つのパッケージは、それぞれ異なる役割を持ちますが、組み合わせることで堅牢なモバイル体験を構築できます。特に react-navigation と react-native-navigation の選択はアーキテクチャの根幹に関わり、他の 3 つはそれを支える技術スタックとなります。
🗺️ ナビゲーション構造：JavaScript ベース vs ネイティブベース
ナビゲーションライブラリの選択は、アプリ全体の構造とパフォーマンス特性を決定します。
react-navigation は JavaScript 内でルーティングを管理します。
- 設定は JavaScript オブジェクトで行い、React コンポーネントとして画面を定義します。
react-native-screensと組み合わせることで、ネイティブのパフォーマンス恩恵を受けられます。
// react-navigation: スタックナビゲーターの定義
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
react-native-navigation はネイティブコントローラーを直接使用します。
- 画面登録はネイティブ側で行い、JavaScript からコマンドを送信して遷移します。
- ブリッジを介さないため、重い遷移でもフレームドロップが起きにくいです。
// react-native-navigation: ルートの設定
import { Navigation } from 'react-native-navigation';
Navigation.registerComponent('com.example.Home', () => HomeScreen);
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'com.example.Home'
}
}
]
}
}
});
🖐️ ジェスチャー処理：ネイティブ優先 vs 標準タッチ
複雑なジェスチャー（スワイプ、ピンチ、ロングプレス）を扱う場合、標準の Touchable では不十分なことがあります。
react-native-gesture-handler はジェスチャーをネイティブスレッドで処理します。
- JavaScript スレッドがビジーでもジェスチャーが反応します。
- ナビゲーションのスイプバックや、ドラッグ可能な UI に不可欠です。
// react-native-gesture-handler: パンジェスチャーの実装
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
function DraggableBox() {
const onGestureEvent = (event) => {
// ネイティブスレッドでイベント処理
};
return (
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
</PanGestureHandler>
);
}
react-navigation (標準タッチ) は JavaScript スレッドに依存します。
- 単純なタップには十分ですが、複雑なジェスチャー中は UI が詰まる可能性があります。
gesture-handlerをラッパーとして使うことでこの制限を回避します。
// react-navigation: 標準のボタン操作
import { TouchableOpacity } from 'react-native';
function SimpleButton() {
return (
<TouchableOpacity onPress={() => console.log('Pressed')}>
<Text>Tap Me</Text>
</TouchableOpacity>
);
}
🎬 アニメーションエンジン：UI スレッド vs JavaScript スレッド
滑らかなアニメーションには、フレームレートを維持するための適切なスレッド選択が必要です。
react-native-reanimated はアニメーションを UI スレッドで実行します。
useSharedValueとuseAnimatedStyleを使用して、JavaScript を介さずに値を更新します。- ジェスチャーと連動したアニメーションで真価を発揮します。
// react-native-reanimated: UI スレッドアニメーション
import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
function AnimatedBox() {
const offset = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ translateY: offset.value }]
};
});
return <Animated.View style={[animatedStyle, { width: 50, height: 50 }]} />;
}
react-native-navigation はネイティブ遷移アニメーションを提供します。
- 画面遷移時のフェードやスライドは、ネイティブ側で最適化されています。
- 細かいカスタマイズには追加の設定が必要です。
// react-native-navigation: ネイティブ遷移アニメーション
Navigation.push('componentId', {
component: {
name: 'Details'
},
options: {
animations: {
push: {
content: {
translationX: {
from: 1000,
to: 0,
duration: 300
}
}
}
}
}
});
📦 パフォーマンス最適化：ネイティブコンテナ vs 標準ビュー
多数の画面をスタックする場合、メモリ管理とマウントコストが問題になります。
react-native-screens は画面をネイティブコンテナでラップします。
- 非表示の画面をネイティブレベルでアンマウントし、メモリを解放します。
react-navigationと併用することで、大幅なパフォーマンス向上が見込めます。
// react-native-screens: スクリーンの有効化
import { enableScreens } from 'react-native-screens';
import { Screen } from 'react-native-screens';
enableScreens();
function OptimizedScreen() {
return (
<Screen>
<View>{/* コンテンツ */}</View>
</Screen>
);
}
react-navigation (標準) は JavaScript 内でビューを管理します。
screensを使用しない場合、隠れた画面もメモリ上に残り続ける可能性があります。- 小規模なアプリでは問題ありませんが、大規模化するとボトルネックになります。
// react-navigation: 標準のビュー管理（screens なし）
// 隠れた画面もツリーに残るため、メモリ使用量が増加する可能性があります
function StandardStack() {
return (
<View>
<HomeScreen />
<DetailsScreen style={{ display: 'none' }} />
</View>
);
}
🔗 統合アーキテクチャ：推奨される組み合わせ
現代の React Native 開発では、これらを組み合わせて使うのが標準的です。
推奨スタック: react-navigation + react-native-screens + react-native-gesture-handler + react-native-reanimated
この構成は、開発のしやすさ（react-navigation）とパフォーマンス（他 3 つ）のバランスが取れています。
// 統合例：App.js
import 'react-native-gesture-handler'; // 最初にインポート
import { enableScreens } from 'react-native-screens';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
enableScreens();
const Stack = createNativeStackNavigator();
export default function App() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
</GestureHandlerRootView>
);
}
📊 比較サマリー
| 機能 | react-navigation | react-native-navigation | gesture-handler | reanimated | screens |
|---|---|---|---|---|---|
| 主な役割 | ナビゲーション管理 | ネイティブナビゲーション | ジェスチャー認識 | アニメーションエンジン | 画面最適化 |
| 実行スレッド | JS (Screens 併用時ネイティブ) | ネイティブ | ネイティブ | UI スレッド | ネイティブ |
| 設定の容易さ | 🟢 簡単 | 🔴 複雑 | 🟢 簡単 | 🟡 中程度 | 🟢 簡単 |
| コミュニティ | 🟢 非常に大きい | 🟡 中程度 | 🟢 大きい | 🟢 大きい | 🟢 大きい |
| 必須度 | ⭐ どちらか必須 | ⭐ どちらか必須 | ⭐ 推奨 | ⭐ 推奨 | ⭐ 推奨 |
💡 結論：どちらを選ぶべきか
react-navigation を選ぶべきケース:
- 標準的なモバイルアプリを開発している。
- 豊富なドキュメントとコミュニティサポートを求めている。
- JavaScript 中心の開発ワークフローを維持したい。
react-native-navigation を選ぶべきケース:
- 既存のネイティブコードとの統合が深い。
- 極めて高いパフォーマンスが要求される大規模アプリ。
- ネイティブ側の制御を優先したい。
インフラライブラリ (gesture-handler, reanimated, screens) の位置付け:
これらは選択というより、現代の React Native アプリにおける標準装備です。ナビゲーションライブラリがどちらであっても、これらを併用することで、ユーザーに滑らかで反応の良い体験を提供できます。特に react-navigation を使う場合は、これら 3 つとの統合が公式に推奨されており、事実上必須の依存関係となっています。
最終的なアドバイス: 新規プロジェクトでは、react-navigation を基盤とし、gesture-handler、reanimated、screens を組み合わせたスタックから始めるのが最もリスクが少なく、生産性が高い選択です。
選び方: react-native-screens vs react-native-gesture-handler vs react-native-reanimated vs react-navigation vs react-native-navigation
- react-native-screens:
ナビゲーションスタックのメモリ使用量とパフォーマンスを最適化したい場合に選択します。画面をネイティブのコンテナでラップし、不要なビューをアンマウントすることで、アプリの応答性を高めます。
react-navigationと併用するのが一般的です。 - react-native-gesture-handler:
ネイティブレベルのジェスチャー認識が必要な場合に選択します。タッチイベントを JavaScript スレッドではなくネイティブスレッドで処理するため、スクロールやドラッグ中の UI ブロックを防ぎます。複雑なジェスチャーや、ナビゲーションライブラリと連携してスワイプバックなどを実装する際に必須です。
- react-native-reanimated:
60fps で滑らかなアニメーションを実装する必要がある場合に選択します。アニメーションロジックを UI スレッドで実行するため、JavaScript スレッドの負荷に影響されません。複雑なインタラクションや、ジェスチャーに連動したアニメーションを作る際の標準ツールです。
- react-navigation:
コミュニティ標準のナビゲーションソリューションが必要な場合に選択します。JavaScript ベースで動作し、設定が容易でエコシステムが豊富です。
react-native-screensやreact-native-gesture-handlerと統合することで、ネイティブに近いパフォーマンスと機能性を両立できます。 - react-native-navigation:
完全なネイティブナビゲーションスタックが必要な大規模アプリで選択します。Wix によって維持されており、JavaScript ブリッジを介さずにネイティブ画面遷移を行うため、パフォーマンス面で有利です。ただし、設定が複雑で、JavaScript 中心のワークフローとは異なる学習コストがかかります。
人気の比較
react-native-screens のREADME
This project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.
Fabric
To learn about how to use react-native-screens with Fabric architecture, head over to Fabric README. Instructions on how to run Fabric Example within this repo can be found in the FabricExample README.
Supported platforms
- iOS
- Android
- tvOS
- visionOS
- Windows
- Web
Installation
iOS
Installation on iOS is completely handled with auto-linking, if you have ensured pods are installed after adding this module, no other actions are necessary.
Android
On Android the View state is not persisted consistently across Activity restarts, which can lead to crashes in those cases. It is recommended to override the native Android method called on Activity restarts in your main Activity, to avoid these crashes.
For most people using an app built from the react-native template, that means editing MainActivity.java, likely located in android/app/src/main/java/<your package name>/MainActivity.java
You should add this code, which specifically discards any Activity state persisted during the Activity restart process, to avoid inconsistencies that lead to crashes.
Please note that the override code should not be placed inside MainActivityDelegate, but rather directly in MainActivity.
Java
import android.os.Bundle;
import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory;
public class MainActivity extends ReactActivity {
//...code
//react-native-screens override
@Override
protected void onCreate(Bundle savedInstanceState) {
getSupportFragmentManager().setFragmentFactory(new RNScreensFragmentFactory());
super.onCreate(savedInstanceState);
}
public static class MainActivityDelegate extends ReactActivityDelegate {
//...code
}
}
Kotlin
import android.os.Bundle;
import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory;
class MainActivity: ReactActivity() {
//...code
//react-native-screens override
override fun onCreate(savedInstanceState: Bundle?) {
supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
super.onCreate(savedInstanceState);
}
}
For people that must handle cases like this, there is a more detailed discussion of the difficulties in a series of related comments.
Need to use a custom Kotlin version?
Since v3.6.0 react-native-screens has been rewritten with Kotlin. Kotlin version used in this library defaults to 1.4.10.
If you need to use a different Kotlin version, set kotlinVersion ext property in your project's android/build.gradle and the library will use this version accordingly:
buildscript {
ext {
...
kotlinVersion = "1.4.10"
}
}
Disclaimer: react-native-screens requires Kotlin 1.3.50 or higher.
Windows
Installation on Windows should be completely handled with auto-linking when using React Native Windows 0.63+. For earlier versions, you must manually link the native module.
How can I take advantage of that?
Screens are already integrated with the React Native's most popular navigation library react-navigation and Expo.
Supported react-native version
Below we present tables with mapping of the library version to the last supported react-native version. These tables are for the 4.x line of the library. For compat tables
of 3.x line please see readme on the 3.x branch.
Support for Fabric
Fabric is React Native's default rendering system since 0.76.
Here's a table with summary of supported react-native versions:
| library version | react-native version |
|---|---|
| 4.19.0+ | 0.81.0+ |
| 4.14.0+ | 0.79.0+ |
| 4.5.0+ | 0.77.0+ |
| 4.0.0+ | 0.76.0+ |
Support for Paper
Paper is the legacy rendering system.
Here's a table with summary of supported react-native versions with old architecture turned on:
| library version | react-native version |
|---|---|
| 4.19.0+ | 0.80.0+ |
| 4.14.0+ | 0.79.0+ |
| 4.9.0+ | 0.76.0+ |
| 4.5.0+ | 0.74.0+ |
| 4.0.0+ | 0.72.0+ |
Usage with react-navigation
[!CAUTION] JS API of the native stack has been moved from
react-native-screens/native-stackto@react-navigation/native-stacksince version v6. Currently, native stack v5 (imported fromreact-native-screens/native-stack) is deprecated and will be removed in the upcoming minor release.react-native-screensv4 will support only@react-navigation/native-stackv7.
Screens support is built into react-navigation starting from version 2.14.0 for all the different navigator types (stack, tab, drawer, etc).
To configure react-navigation to use screens instead of plain RN Views for rendering screen views, simply add this library as a dependency to your project:
# bare React Native project
yarn add react-native-screens
# if you use Expo managed workflow
npx expo install react-native-screens
Just make sure that the version of react-navigation you are using is 2.14.0 or higher.
You are all set 🎉 – when screens are enabled in your application code react-navigation will automatically use them instead of relying on plain React Native Views.
Experimental support for react-freeze
You have to use React Native 0.68 or higher, react-navigation 5.x or 6.x and react-native-screens >= v3.9.0
Since v3.9.0, react-native-screens comes with experimental support for react-freeze. It uses the React Suspense mechanism to prevent parts of the React component tree from rendering, while keeping its state untouched.
To benefit from this feature, enable it in your entry file (e.g. App.js) with this snippet:
import { enableFreeze } from 'react-native-screens';
enableFreeze(true);
Want to know more? Check out react-freeze README
Found a bug? File an issue here or directly in react-freeze repository.
Disabling react-native-screens
If, for whatever reason, you'd like to disable native screens support and use plain React Native Views add the following code in your entry file (e.g. App.js):
import { enableScreens } from 'react-native-screens';
enableScreens(false);
You can also disable the usage of native screens per navigator with detachInactiveScreens.
Using createNativeStackNavigator with React Navigation
To take advantage of the native stack navigator primitive for React Navigation that leverages UINavigationController on iOS and Fragment on Android, please refer:
- for React Navigation >= v6 to the Native Stack Navigator part of React Navigation documentation
FullWindowOverlay
Native iOS component for rendering views straight under the Window. Based on RCTPerfMonitor. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child View, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/apps/src/tests/Test1096.tsx
Interop with react-native-navigation
React-native-navigation library already uses native containers for rendering navigation scenes so wrapping these scenes with <ScreenContainer> or <Screen> component does not provide any benefits. Yet if you would like to build a component that uses screens primitives under the hood (for example a view pager component) it is safe to use <ScreenContainer> and <Screen> components for that as these work out of the box when rendered on react-native-navigation scenes.
Interop with other libraries
This library should work out of the box with all existing react-native libraries. If you experience problems with interoperability please report an issue.
Guide for navigation library authors
If you are building a navigation library you may want to use react-native-screens to have control over which parts of the React component tree are attached to the native view hierarchy.
To do that, react-native-screens provides you with the components documented here.
Common problems
Problems with header on iOS
- Focused search bar causes new screens to have incorrect header
- Scrollable content gets cut off by the header with a search bar
- RefreshControl does not work properly with NativeStackNavigator and largeTitle
Solution
Use ScrollView with prop contentInsetAdjustmentBehavior=“automatic” as a main container of the screen and set headerTranslucent: true in screen options.
Other problems
Contributing
There are many ways to contribute to this project. See CONTRIBUTING guide for more information. Thank you for your interest in contributing!
License
React native screens library is licensed under The MIT License.
Credits
This project has been build and is maintained thanks to the support from Shopify, Expo.io, and Software Mansion.
React Native Screens is created by Software Mansion
Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.