I’ve created new React Native project running following command:

react-native init Navigation

Of course I had everything installed and setup before.

Now it’s time to install Regux with few additions to it (middleware and logger) by simply running:

npm install — save react-redux redux redux-logger redux-thunk

I’m not sure if I’ll use middleware but let’s lave it for now. In the next step I’ve setup Redux basing on (IMO really great) lesson from Jon Lebensold. I basically crated following files (reducers.js, createReducer.js, index.js, types.js) and I wired up Redux on main index.js file.

Now it’s time to navigate! Let’s define some screens:

Pretty simple, three screens should be enough for now. I’ve created simple React component for each of the screen. Which of those component should be rendered will be determined by navigation store’s state. Let’s define the reducer:

Initial state for our store is set to screen called TOP (line 2).

Notice that NAVIGATION_CHANGE handler does one extra thing: it pushes current screen to the history array (line 9). We will focus on that later to handle navigating back to previous screen.

We also need an action creator for this reducer, let’s call it navigate() and dispatch our event inside.

Now let’s create navigation component which will be responsible for rendering screens basing on the data from store.

In this component we’re reading current screen from navigation store (it’s bound to props on line 27) and rendering actual screen component ( switch statement on line 4).

It’s not a surprise that screen called TOP is rendered. And this is not because we set default on the switch statement above. That’s because we set TOP screen as initial state in navigationreducer.js . Feel free to change it and see the result.

Now let’s make an use from navigate action we created. I’ll make a menu component and place it at the bottom of the screen. A little bit of styling, material design colors, simple icons made with Figma and viola!

And here’s how menu component looks like: