Migrate from ExNavigation to React Navigation

I’ve been using ExNavigation for quite a while. It’s simple to setup and has consistently worked for me. If you’ve checked out the the README in the last few months you may have noticed that it’s in maintenance mode — meaning it’s not being updated (unless necessary) because all future resources are going to React Navigation. Also, in the last React Native release you may have noticed a warning popping up that NavigationExperimental is being deprecated (which ExNavigation is built on) so now is a good time to start the migration.

So what is React Navigation? It’s a routing solution that builds on the knowledge and experience gained from a host of other navigation solutions for React Native. I won’t go into detail on it here but if you’re interested I’ve got a getting started guide for React Navigation.

Today I want to walk you through the process of migrating from ExNavigation to React Navigation. So far I’ve found it to be a simple process and has simplified my code a fair amount.

Full source code is available on Github. In the readme I’ve got links to diffs for each step. If you want a step-by-step walkthrough on how to migrate watch the videos, otherwise I’ll link to the source code and give a brief description of what I’m doing.

Alerts

Though the usage of this.props.navigator.showLocalAlert might not be used often/by many it’s something that I used often and found will quickly break when doing this migration so it’s the first thing I’m replacing.

To do this I’m using the react-native-dropdownalert package and then making a higher order component to make the dropdown methods available anywhere I need to in my app (original issue with code).

I won’t go into the details of creating the HOC — that can just be copied and pasted into your app if you want to go that route, just pay attention to the Alert component, install hoist-non-react-statics, and react-native-dropdownalert into your project if you do copy it.

With that done I then wrap my app with the [AlertProvider](https://github.com/spencercarli/ex-navigation-to-react-navigation/blob/9faf79529c9c36e0dfea976be30241042bf5c5fa/app/index.js#L11) and connect any components where I would want to invoke and alert from.

Diff of Changes

StackNavigation to StackNavigator

In ExNavigation the StackNavigation component was at the core of much of your application. In React Navigation you’ll be using the StackNavigator for this purpose.

Updating is pretty straightforward. First you need to create the appropriate StackNavigators for your app and then use those new StackNavigators wherever you were using the StackNavigation component before. If you stopped at only swapping out the StackNavigation for StackNavigator you’ll lose some functionality that’s built into ExNavigation but if you do it all at once, which I imagine you will, you won’t have issues.

On all of your screens you’ll need to replace the

static route = {
  navigationBar: {
    title: '...'
  }
}

with

static navigationOptions = {
  title: '...'
}

as well as any other navigation options your app needs. You’ll want to check out the stack navigation docs for the new names.

Finally, you’ll want to replace any this.props.navigator.push('screenName'); with this.props.navigation.navigate('screenName');. For me it was as simple as a find and replace. navigate will default to the push type animations (from right to left on iOS, fade from bottom on Android).

If you want to pass props to the new screen the syntax is this.props.navigation.navigate('screenName', { name: 'Spencer' });

Diff of Changes

TabNavigation to TabNavigator

I love the way TabNavigator works in React Navigation — it has allowed me to write much less code and matches the platform the app is running on even better.

All I’ve had to do is create a new TabNavigator with the same tabs as my current TabNavigation and use the StackNavigator’s we set up before as the screens. I then replace the Tabs component in my app entry point with the new TabNavigator and I’m all set.

Last thing to do is delete all the code you wrote to get the TabNavigation working. There’s something so satisfying about deleting code while keeping the same functionality.

Diff of Changes

DrawerNavigation to DrawerNavigator

Replacing the DrawerNavigation with a DrawerNavigator is much like replacing Tabs.

First thing I have to do is create a new DrawerNavigator. In this case it’s got the same screens as the TabNavigator we setup before.

We can then go ahead and import the new Drawer in our app entry point and everything should render fine. Since we’re no longer using ex-navigation you can get rid of the [NavigationProvider](https://github.com/spencercarli/ex-navigation-to-react-navigation/compare/TabNavigation-to-TabNavigator...DrawerNavigation-to-DrawerNavigator#diff-2018087f584c4398b5c3a23fc0e5f9db) component and the dummy Router we have.

You may have noticed that there is no longer a default icon in the navbar to open the drawer (though you can swipe to open it) so you’ll want to add that.

Finally, you get to delete any previous Drawer related logic :)

Diff of Changes

Conclusion

This isn’t definitive but in converting a few apps these were the things I found myself doing. Converting an app from ExNavigation to React Navigation isn’t super complex since the APIs are pretty similar.