Using react-navigation 3.0 in React Native apps

Source: One Trip at a Time

react-navigation is probably the only dependency I use in React Native apps. I’m happy with it so far, then version 3.0 came out with a few breaking changes. It’s not that big deal but may take us sometime upgrading if we don’t pay enough attention. Here is my exploration and how to overcome the upgrading pains.

React Navigation is born from the React Native community’s need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

The thing I like about react-navigation is its thorough documentation, easy to customise APIs and very nifty to use. It solves almost all basic needs.

React Navigation

This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators.

I like to read source code, and I was surprised to see that react-navigation is all pure Javascript code.

module.exports = {
  // Native
  get createAppContainer() {
    return require('@react-navigation/native').createAppContainer;
  },
  get createNavigationContainer() {
    console.warn(
      '`createNavigationContainer()` has been deprecated, please use `createAppContainer()` instead. You can also import createAppContainer directly from @react-navigation/native'
    );
    return require('@react-navigation/native').createAppContainer;
  },
  get createKeyboardAwareNavigator() {
    return require('@react-navigation/native').createKeyboardAwareNavigator;
  },
}

react-navigation/native refers to this separated react-navigation-native, and it in turns relies on react-navigation-core and they are all Javascript code. I thought it is just Javascript wrapper around Activity or UINavigationViewController but they aren’t. How pretty is that. All the code worths taking a look.

Also all the tab and stack navigators like react-navigation-tabs and react-navigation-stack have been moved out to separated repos for…