Handling wix react native navigation with redux


There are many navigation options available for handling navigation in react native applications like react-native-router-flux, react-navigation,airbnb-native-navigation and wix-react-native-navigation out of which I like to use react-native-navigation because of its highly configurable navigation and screen options along with well maintained and updated codebase. React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps and we have the option to create single screen as well as Tabbar based applications. The best part is the application screen transitions are smooth even in the dev build and any kind of issues are actively resolved by github codebase maintainers.

In this tutorial we are going to create a simple application and set up react-native navigation with redux store. First we need to make changes in android/ios files as explained in the official documentation here.

Next we install all redux and other required modules as follows:

Next we set up directory structure as follows:

We need to define initial state for the redux store inside the reducers folder as follows:

The initialState is sometimes kept as empty jsons in some projects. I personally like to store offline data in initialState as it allows users to view application content event when they have no network connectivity.

Next we define action constants in actionTypes within constants folder:

We can define all types of action names as constants in this file. Typically constants are defined to retrieve and send data from server and update state of store accordingly.

Now we need to define our page level reducers for our home screen in homeReducer.js in appscreens folder within reducers folder.

All kinds of ajax requests and logic/conditions to update state of store can be defined in this file.

Next we define rootReducer in reducers folder which is responsible for combining all page level reducers in a single entity.

Now we will setup the central redux store which will be used by all components in the project in configureStore.js within store folder:

By this step our redux setup is complete and we can move forward towards creating application screens.First let us create a simple HomePage to be displayed as first screen in Home.js within modules->appscreens folder:

Now we need to register our page in navigation screens to be used by react-native-navigation.

Now we need to bring this all components together in App.js:

Last but not the least edit index.js file as follows:

Now you can see a simple application as follows:

App screen
App screen

Next we will add a drawer to the app in drawer in modules->global folder and update app.js as follows:



I have added a simple FirstScreen page similar to home to illustrate use of navigation options in drawer.

You can see the drawer as follows:

This concludes today’s tutorial for setting up react-native-navigation. You can find the entire source code which can be used directly to create applications in future here: Github

Bonus Tips:

You can define suitable actions to call within screens in actions folder by creating actions file for each screen. I have not covered making ajax requests in this article to keep the tutorial as simple as possible.

And kindly also star June Domingo’s opensource movie app on Github since the directory structure and coding style is mainly based on that application.

Connect Deeper:

In the next part we are going to cover populating home screen with content by making ajax requests to server. In order to get notified you can follow our facebook page: Technoetics

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development