1.x and 2.x versions

yarn add react-navigation
# or with npm
# npm install --save react-navigation

3.x version

yarn add react-navigation
# or with npm
# npm install react-navigation
yarn add react-native-gesture-handler react-native-reanimated
# or with npm
# npm install react-native-gesture-handler react-native-reanimated

1. If your version of react native is 0.59 or below, you need to manually add dependencies through the link command

react-native link react-native-reanimated
react-native link react-native-gesture-handler

After link, IOS is set, but some configuration is needed on Android. For react native gesture handler, the following configuration is also required: In the MainActivity.java file in Android, the root directory of the project, add the following configuration:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
// Import the following three packages
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }
// Override createReactActivityDelegate method
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

2. If your project's react native version is 0.60 or above, you don't need to manually execute the link command to add dependencies. ios needs to execute the following command to complete the link dependency. Note that Cocoapods needs to be installed.

cd ios
pod install
cd ..

4.x version

yarn add react-navigation
# or with npm
# npm install react-navigation

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

ReactNative 0.60 and higher does not need to execute the link command manually. For ios, the following commands need to be executed

cd ios
pod install
cd ..

For the newly added library on Android side: react native screens, you need to configure it as follows. Add the following dependencies to the android/app/build.gradle file in the root directory of the project:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

If your version of react native is 0.59 or less, you need to configure it as follows:

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens

Using Android X configuration to support jetifier:

yarn add --dev jetifier
# or with npm
# npm install --save-dev jetifier

Add a script to the package.json text file of the project:

"scripts": {
  "postinstall": "jetifier -r"
}

After that, run the postinstall you just added

yarn postinstall
# or with npm
# npm run postinstall

For Android, the react native gesture handler library needs to be further configured, which is consistent with version 3.x. import the package in MainActivity.java file and rewrite the response method:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

Finally, in the entry file such as index.js or App.js, import the following

import 'react-native-gesture-handler'

Run now

React native run IOS or react native run Android compile and run the project

Last React native developers, what version of react navigation do you use now? Please leave a message at the bottom of the article for discussion.

Personal website: https://wayne214.github.io Welcome to WeChat's public address: Junwei said.