React Navigation and Redux in React Native Applications

Front End Development
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:


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.

  • 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?

  • Nice overview, but quick question. Is the Redux integration necessary for React Navigation? Could you have a navigation that lives outside/alongside the Redux stores?

  • Why are you coupling the navReducer to the getStore function in store.js? Couldn’t you decouple that by creating the store before the Provider is rendered, and passing a rootReducer.js to that store? It’s confusing that getStore(navReducer) is what actually creates the store.

    • Stan Bershadskiy

      I’m not following exactly, I do understand the coupling concerns however. If you want to try out decoupling it and submit a PR or just post a snippet here that would be awesome 🙂

  • Ahmed Khaled A. Mohamed

    This is my effort to extend the github notetaker app done by Tyler Mcginnis. I updated the code to support latest versions of React and React Native, I also extended the app to use react-navigation which the latest navigation library supporting both iOS and Android. I added Redux to manage the store and used Redux-Sagas to handle asynchronous fetch of data. I would appreciate it if you check it out and give it thumbs up if its helpful. I will continue extending to support more features.

  • Jonathan

    Thanks Stan ! very good exemple 🙂 !

  • Иван Сусанин

    it’s simple. when you know how finite state machine works

Like What You See?

Got any questions?