React-Native router flux with Redux

A few weeks ago, I started to create an application with React Native and related architectures. Since then, I think it’s pretty awesome but Navigation should be a stumbling block for beginner so let’s drill down more.

To get start, we will be beginning with a new react native project

react-native init ReactNativeRouterFluxDemo

Here is the list of dependencies:

react-native-router-flux: Router for React Native based on new React Native Navigation API

Redux: It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger

react-redux: Official React bindings for Redux

redux-logger: Logger middleware for Redux

let cd into the project and install dependencies,

npm install -S react-native-router-flux react-redux redux redux-logger

Then create the root directory for whole app

mkdir app && cd app

Create three folders for basic structure of redux

 mkdir components reducers store

Create a reducer file ./app/reducers/routes.js for the routing actions that will be dispatched by react-native-router-flux

Create ./app/reducers/index.js for combining above reducer with the rest of the reducers for your app

Create ./app/store/configureStore.js for configure the redux store and insert the middleware redux logger for displaying states and actions at the store

We have finished the basic setup on redux store and made the routing reducers so far. Time to create the components for demo the routing.

touch landing.js home.js search.js 

landing.js is the landing scene for the app. You can redirect user to login, register or tab page after authentication.

There are few things doing here:

1. we connected to store with last line. Now can access the current scene with this.props.routes.scene or access the routes from any component using Context

• With react-native route flux lib to navigate from one route to another, an Action must be called. This take the form of:

Actions.SCENE_KEY(PARAMS)

so routing to rootTabBar’s components when text “This is page one!” on pressed

Let’s create the two components home.js and search.js for rootTabBar now:

So it’s time to bundling scenes, routing reducer and store at ./app/index.js

Several things in here:

1. I imported the configured store at heading and put the store input redux <Provider> tag
2. I also imported the Routes and Scene components from react-native-router-flux and declared the RouterWithRedux variable for wrapping the <Scene>. This is the magic happened while react-native-router-flux helping us to connect the every single scene to redux under the hook. I tried to implement the redux store and manage the scenes without react-native route flux library. It’s more complicated than my thought and thanks the library save my life
3. Wrapping up the basic scene and tabBar scene within the root scene

4. Set up the scene icon with tab title. Red scene title for current scene and the rest tabs icon would be black color

Last but not least, import the index.js to your index.ios.js

That’s it! Now you have a starter project using React Native, react-native-router-flux and Redux. Also you hopefully have a better understanding of the new apis and where they are headed.

With redux-logger, you can log down the actions and states at chrome and debugging. This awesome feature make development experience more enjoyable and reduce the headache for developers.

You may want modal for login wherever the app so let create the login component first:

Then call it anywhere with Actions.login , I call it on the landing page when Text Open modal on press

Here is the final repo:

teddylun/react-native-router-flux

Thanks for reading! 😁

My Name is Teddy Lun. I am a Software Engineer at eBay Gumtree Australia and located in Hong Kong. I started to learn React Native for mobile app development recently and hope to use it on coming project. Feel free to drop me some lines if you have any thought about React/React Native. I also have some web and app dev experiences on React , AngularJS, AngularJS2.

If you like AngularJS, checkout my last work on Gumtree hire site

If you enjoyed this article, please recommend and share it! Thanks for your time.