Migration guide from ex-navigation to react-navigation

2 min readApr 2, 2018

I will be updating this guide frequently as I am currently migrating a project from ex-navigation to react-navigation. You can always refer to this gist to track the changes of this blog.
Please let me know if there are any mistakes or if it could be done in a better way.

Hope this guide helps everyone who ever is planning to migrate or even starting with react-navigation.

react-navigation: 1.5.2 and react-native: 0.45.1

In react-navigation header consists of 3 parts:

1. headerLeft (allows us to specify custom component)
2. headerTitle (the centre portion of the navbar)
3. headerRight (can be used to add a profile switcher or any other button if needed)

Adding header logo/title in centre:

Hiding back button alone on a particular screen:

In iOS the headerTitle appears in centre but in Android the header moves towards the left if there is no navigation history (as the header layout is aligned towards left). So in some cases we would want the headerLeft to just occupy left portion, just to make the headerTitle centred.

const PlaceholderButton = () => {
  return (
   <View style={{ backgroundColor: ‘#fff’ }} />
  );
 };const Stack = StackNavigator({
     home: {
      screen: Home,
      navigationOptions: {
      headerTitle: <Header />,
      headerLeft: <PlaceholderButton />,
      headerRight: <ProfileIcon />,
     }
   },
 });

Hiding header for a stack:

ex-navigation

react-navigation:

Replacement for NavigationProvider, StackNavigation:

There is no NavigationProvider in react-navigation its all about stacks.
Declaring a stack in ex-navigation:

Declaring a stack in react-navigation:

Passing navigation prop from stack to a screen’s navigation-bar in a nested stack:

We would normally need to pass navigation prop to a nested stack in-order to close the child stack and return to parent stack:

react-navigation

Passing route params

ex-navigation

// passing params `name: foo`
this.props.navigator.push(‘home’, { name: ‘foo’ });// accessing name from params
this.props.route.params.name;

react-navigation

// passing params `name: foo`
this.props.navigation.navigate(‘home’, { name: ‘foo’ });// accessing name from params
this.props.navigation.state.params.name;

Dynamically passing initialRouteName, initialRouteParams

ex-navigation

react-navigation

Nested TabNavigator’s example:

You can see the demo over here:

TabNavigator

Android

snack.expo.i

In iOS nested TabNavigators work as they you expect it to be, but if you try doing the same thing in android, you will see both top and bottom Tabs but only the bottom tab is going to work. Its because by default in Android when you implement a Tab it has a sliding gesture to it.

Now by having two Tabs and having sliding gestures enabled for both makes the top bar break.

The workaround here is that you disable swipe gesture for any of the two tabs:

const BottomStack = TabNavigator({
  home: {
    screen: TopStack,
  },
  bookmarks: {
    screen: () => <CustomComponent screenName={'Bookmarks'} />
  }
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
});