NavigationExperimental is no longer the preferred method of Navigation in React Native, and will soon be deprecated. I would suggest checking out React Navigation with is the current standard and my preferred method of navigation.

This is a continuation of Part 1. We will now be building navigation using React Native Navigation Experimental but adding Redux to manage state.

For part 1, click here.

For part 3, adding tabs, click here.

To see the final working repo, click here.

To get started, we will be beginning with a new React Native project:

react-native init RNExperimentalRedux

We will be using version 0.28.0-rc.0 for this tutorial. If you are on an older version, this code will not work. There were breaking api changes in version 0.28.0-rc.0. Any version after 0.28.0-rc.0 should also work. I will be keeping this repo up to date with any changes.

Then, cd into the project and install redux and react-redux:

npm i redux react-redux --save

Next, let’s set up our project structure.

Create a folder named app:

mkdir app

Then cd into the directory and create the following folders:

cd app

mkdir actions components constants containers reducers store

So now our folder structure should look like this:

First, let’s create our constants that we will use in Redux actions to navigate in the app. We will only need to push and pop for now, so let’s create these constants.

In app/constants, create ActionTypes.js: