React Navigation and Redux in React Native Applications

In React Native, the question of “how am I going to navigate from one screen to the next?” has been pondered since day one. There have been several attempts at tackling application navigation from both the community and Facebook. Fortunately, it looks there is finally an implementation that shines brighter than the rest.

React Navigation

React Navigation was the result of lessons learned from Navigator, NavigationExperimental, and a few of the community-built React Native navigation libraries. React Navigation makes a strong effort to be entirely flexible, and work on iOS, Android and web platforms. It is based on a concept of Routers that can be composed and nested to define your application’s navigation flow inside of Navigators. There are three built-in Navigators that will solve most basic application needs: StackNavigator, TabNavigator, and DrawerNavigator. Most importantly, React Navigation also leverages the Animated API with native driver support (where applicable) to achieve 60fps for scene transitions. Here’s a basic use-case of React Navigation (please make sure you have installed the react-navigation package through npm):

Using Redux with React Navigation

It’s safe to say that Redux has been the flavor of the year when it comes to data binding or Flux implementations in React applications. Many React Native applications written today are using Redux. Some for very valid reasons, others because of its growing popularity. Fortunately, the React Navigation team kept that in mind and provided an excellent solution for integrating Redux. With React Navigation, you simply need to create a navigation reducer that holds your navigation state inside the store. Then, you declare your navigation state in your top-level container component and it will be passed down as a prop like anything else in your redux store’s state. Here’s a snippet of how to set up Redux and React Navigation in your app container:

You can see a full working implementation of a simple React Native application that uses React Navigation, Redux and a remote API in the following repo:

https://github.com/ModusCreateOrg/react-navigation-redux-sample

Conclusion

React Navigation is the result of the community’s many hours of frustration dealing with Navigator, NavigationExperimental and their numerous abstractions. It’s time to implement routing and navigation to its simplest form, and allow developers to extend and build upon a strong foundation. With React Navigation’s modular approach, each of the core parts can adjust to any target platform and implementation.