React Navigation and Redux in React Native Applications


April 7, 2017
Using React Navigation and Redux in Your React Native Application

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.


Bershadskiy_Stan square
Stan Bershadskiy is an architect at Modus Create and specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook, which was released in December 2016. Stan is located in New York City and can be found co-organizing NYC.JS Meetups and presenting at conferences around the country.

  • Cristian Pérez Matturro

    Hi, thanks for sharing.

    I’m doing exactly the same as your explanation and I’m getting the following error:

    Warning: Failed prop type: The prop `navigation.state` is marked as required in `CardStack`, but its value is `undefined`.
    in CardStack
    in Unknown (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (created by AppWithNavigationState)
    in AppWithNavigationState (created by FlyerCat)
    in Provider (created by FlyerCat)
    in FlyerCat
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer”

    Any ideas?

    • Stan Bershadskiy

      Did you enable the decorator babel preset to use @connect? Can you put a gist of the source code?

      • Cristian Pérez Matturro

        Yes, it was because of the connect thing. Thank you

  • Rafael Schär

    Hi Thanks a lot! Unfortunately I get
    “Cannot read property ‘router’ of undefined.

    I searched and tried a lot of things,… any way to have a clue from you? :)

    Cannot read property ‘router’ of undefined
    handleException @ ExceptionsManager.js:63
    handleError @ InitializeCore.js:125
    reportFatalError @ error-guard.js:44
    guard @ MessageQueue.js:48
    callFunctionReturnFlushedQueue @ MessageQueue.js:107
    (anonymous) @ debuggerWorker.js:71
    YellowBox.js:71 Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).
    console.warn @ YellowBox.js:71
    (anonymous) @ debuggerWorker.js:25
    (anonymous) @ debuggerWorker.js:53

    • Stan Bershadskiy

      Did you create a routes config and instantiate StackNavigator?


What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

LET'S GET STARTED

We're Hiring!

Join our awesome team of dedicated engineers.

Loading...

APPLY NOW