Release 4.0.0
4.0.0 (2019-08-31)
In this release, we've extracted out the navigators to separate packages to make it easier to maintain and release updates faster. You can follow the guide below to upgrade your projects.
Upgrading
NOTE: Before making these changes, we recommend you to commit all local changes to git so you can revert back to a good state if something goes wrong with the upgrade.
Install the new packages
First, we need to install the react-navigation
package along with the various navigators. If you don't use some of these navigators, you can omit them.
To install them, run:
yarn add react-navigation react-navigation-stack@^1.7.3 react-navigation-tabs@^1.2.0 react-navigation-drawer@^1.4.0
This will install the versions compatible with your code if you were using react-navigation@3.x
, so you wouldn't need any more changes beyond changing the imports.
NOTE: If you have
@react-navigation/core
or@react-navigation/native
in yourpackage.json
, please remove them and change the imports to import fromreact-navigation
package instead.
Changing your code
Then change any imports for stack, tabs or drawer to import from the above packages instead of react-navigation
.
- import { createAppContainer, createStackNavigator } from 'react-navigation';
+ import { createAppContainer } from 'react-navigation';
+ import { createStackNavigator } from 'react-navigation-stack';
The following imports need to be changed to import from react-navigation-stack
:
createStackNavigator
StackGestureContext
Transitioner
StackView
StackViewCard
StackViewTransitionConfigs
Header
HeaderTitle
HeaderBackButton
HeaderStyleInterpolator
The following imports need to be changed to import from react-navigation-tabs
:
createBottomTabNavigator
createMaterialTopTabNavigator
BottomTabBar
MaterialTopTabBar
The following imports need to be changed to import from react-navigation-drawer
:
createDrawerNavigator
DrawerGestureContext
DrawerRouter
DrawerActions
DrawerView
DrawerNavigatorItems
DrawerSidebar
Upgrading navigators (optional)
You don't need to upgrade the navigators to their latest version when upgrading to react-navigation@4.x
. You can upgrade them separately later as per your convenience.
NOTE: We recommend to do these changes in a separate commit so you can revert back to a good state if something goes wrong with the upgrade.
Installing dependencies
The latest drawer and tabs depend on react-native-gesture-handler
and react-native-reanimated
. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on for installation instructions for these dependencies.
Installing dependencies into an Expo managed project
In your project directory, run the following:
expo install react-native-gesture-handler react-native-reanimated
This will install versions of these libraries that are compatible.
Installing dependencies into a bare React Native project
In your project directory, run yarn add react-native-reanimated react-native-gesture-handler react-native-screens
.
Next, we need to link these libraries. The steps depends on your React Native version:
-
React Native 0.60 and higher
On newer versions of React Native, linking is automatic.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
cd ios pod install cd ..
-
React Native 0.59 and lower
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
react-native link react-native-reanimated react-native link react-native-gesture-handler
To finalize installation of react-native-gesture-handler
for Android, make the following modifications to MainActivity.java
:
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);
+ }
+ };
+ }
}
Upgrading packages
To upgrade react-navigation-tabs
, run:
yarn add react-navigation-tabs
For list of breaking changes, refer to the release notes.
To upgrade react-navigation-drawer
, run:
yarn add react-navigation-drawer
For list of breaking changes, refer to the release notes.
More info
For more info and release notes, please refer to the individual packages:
react-navigation-stack
(Changelog)react-navigation-drawer
(Changelog)react-navigation-tabs
(Changelog)
TypeScript
If you're using TypeScript, you'll also need to upgrade the navigators to the latest version following the previous section. Since the navigators have been extracted out, navigator specific types have been removed from the main package. You'll need to update the types accordingly:
- Replace
NavigationScreenProp
with:NavigationSwitchProp
forcreateSwitchNavigator
fromreact-navigation
NavigationStackProp
forcreateStackNavigator
fromreact-navigation-stack
NavigationTabProp
forcreateBottomTabNavigator
andcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerProp
forcreateDrawerNavigator
fromreact-navigation-drawer
- Replace
NavigationScreenProps
with:NavigationSwitchScreenProps
forcreateSwitchNavigator
fromreact-navigation
NavigationStackScreenProps
forcreateStackNavigator
fromreact-navigation-stack
NavigationTabScreenProps
forcreateBottomTabNavigator
andcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerScreenProps
forcreateDrawerNavigator
fromreact-navigation-drawer
- Replace
NavigationScreenOptions
with:NavigationStackOptions
forcreateStackNavigator
fromreact-navigation-stack
NavigationBottomTabOptions
forcreateBottomTabNavigator
fromreact-navigation-tabs
NavigationMaterialTabOptions
forcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerOptions
forcreateDrawerNavigator
fromreact-navigation-drawer
- Replace
NavigationScreenComponent
with:NavigationSwitchScreenComponent
forcreateSwitchNavigator
fromreact-navigation
NavigationStackScreenComponent
forcreateStackNavigator
fromreact-navigation-stack
NavigationBottomTabScreenComponent
forcreateBottomTabNavigator
fromreact-navigation-tabs
NavigationMaterialTabScreenComponent
forcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerScreenComponent
forcreateDrawerNavigator
fromreact-navigation-drawer
See the docs for more details: https://reactnavigation.org/docs/en/typescript.html
TypeScript support is still a work in progress, so please open an issue in the respective package's repo if you're facing a problem.
Documentation
Updated documentation can be found on the official website.