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 is being deprecated (which ExNavigation is built on) so now is a good time to start the migration. NavigationExperimental 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 . 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. Github Alerts Though the usage of 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. this.props.navigator.showLocalAlert To do this I’m using the package and then to make the dropdown methods available anywhere I need to in my app ( ). react-native-dropdownalert making a higher order component 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 component, install , and into your project if you do copy it. Alert hoist-non-react-statics react-native-dropdownalert With that done I then and where I would want to invoke and alert from. wrap my app with the [AlertProvider](https://github.com/spencercarli/ex-navigation-to-react-navigation/blob/9faf79529c9c36e0dfea976be30241042bf5c5fa/app/index.js#L11) connect any components 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 for the new names. stack navigation docs Finally, you’ll want to replace any with . For me it was as simple as a find and replace. will default to the push type animations (from right to left on iOS, fade from bottom on Android). this.props.navigator.push('screenName'); this.props.navigation.navigate('screenName'); navigate 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 as my current TabNavigation and use the StackNavigator’s we set up before as the screens. I then replace the component in my app entry point with the new TabNavigator and I’m all set. create a new TabNavigator with the same tabs Tabs 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. it’s got the same screens as the TabNavigator we setup before. In this case 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. Interested in more tips and tricks for React Native? and I’ll share them with you! Sign up for my email list