I have added an update to this article in the end, Do check it out The React-Native community is finally settling for React-Navigation as the default navigation solution. React-Navigation has a vast and powerful API and one of the best thing is that React-Navigation provides really great support for redux, but the bad news which I personally felt is a lack of proper documentation. In this article I try to explain the basics of integrating React-Navigation with Redux and finally introducing flow to the app. I have divided this writing in two parts, Part-1 contains the basic setup for integrating redux & react-navigation, Part-2 contains the logical flow for authentication. . authentication Both the parts are contained in this article Prerequisites To continue reading you should have experience with at least React-Native, React-Navigation, Redux. I haven’t used any authentication API(that isn’t a issue in the demo, the flow will be same as a real world app) in the demonstration app. In Real world situation you will need something like redux-thunk etc. I have used Redux-Persist to mimic the real-world behaviour of persisting user session. PART-1: Setting up React-Navigation with redux The whole idea of integrating React-Navigation with redux is to manage navigation state in redux. Thus we can manage all of the app state from the global redux store easily. In Part-1 we will be integrating redux and React-navigation by creating a navigation reducer which will handle the state for the navigation and add the redux’s dispatch method to handle action’s dispatched through redux. I have created small demonstrable gists for better step by step understanding, the whole project code for understanding how these little parts integrate in the current PART-1 is available here (repo’s master branch): _redux-react-navigation - React-Native + Redux + Redux-Persist + React Navigation_github.com shubhnik/redux-react-navigation First let’s get familiar with some react-navigation’s API, we will use these APIs while integrating redux: : This API helps us to pass our own prop to the Navigator. The prop passed to the navigator will override the default prop. [addNavigationHelpers](https://reactnavigation.org/docs/navigators/custom#addNavigationHelpers) navigation navigation navigation : This API receives and and returns an action which is needed to update the navigation state. In simple words it tells us “ Consider the following example, see the below, it indicates to perform a to the : [getActionForPathAndParams](https://reactnavigation.org/docs/routers/api#getActionForPathAndParams-path-params)(path, params) path(the key defined for a route in Navigator params hey! You need to perform this action to navigate to this path”. console.log NAVIGATE action routeName: ‘screen1’ 3. : We have calculated the action for navigating to a particular route using , now we need to update the state of the Navigator to actually navigate to the route. For this, comes handy. It receives the action and the current state of the navigator and returns the new updated state. In simple words it says It will return null if it couldn’t understand the provided. Consider this sample demo code just to understand how works: [getStateForAction(action, state)](https://reactnavigation.org/docs/routers/api#getStateForAction-action-state) getActionForPathAndParams getStateForAction hey! I am giving you a new navigation state based on the action and the current state you provided to me. action getStateForAction We have calculated the new state, now we want to pass this state to the Navigator. So lets get the act of integrating redux and react-navigation done: Let’s create a reducer which will handle the navigation state: navigationReducer The above reducer returns the new state for the navigator. will be if an action provided to isn’t understandable, that case could be when we are trying to navigate to a route which is not defined in our navigator . newState null getStateForAction AppNavigator Now lets pass the calculated new state from the reducer to the navigator( ). We will also pass the dispatch to the navigator. For this purpose we will be using API as discussed above. Following is the basic code we will use to pass the new prop (containing and ) to the navigator( ): AppNavigator addNavigationHelpers navigation state dispatch AppNavigator Here in line 17 in the above code snippet, we have passed the and to the navigator. All the routes defined in will receive these and . dispatch state AppNavigator state dispatch Now what? How do we navigate to the new route(screen)? What we have to do is dispatch an action and the will calculate the new state and pass it to the navigator. The navigation state will be updated and we will navigate to the new route. Suppose we are currently on following is a demonstration of how to dispatch an action to navigate to : [basicNavigationReducer](https://gist.github.com/shubhnik/b55602633aaeb5919f6f3c15552d1802) screen1 , screen2 API of react-navigation returns an action object as shown in the gist above. The returned object is same as that returned by . [NavigationActions](https://reactnavigation.org/docs/navigators/navigation-actions) getActionForPathAndParams Now we have checked all the parts: a reducer to handle navigation state, passing our own navigation prop to the navigator, dispatching actions to update navigation state. We saw them in gists, now you should check all those parts assembled and working together, understand the flow in here: _redux-react-navigation - React-Native + Redux + Redux-Persist + React Navigation_github.com shubhnik/redux-react-navigation PART-2: Implementing authentication flow In this part we will be creating an authentication flow using redux and react-navigation. We will be following this navigator for reference: const AppNavigator = StackNavigator({login: {screen: Login},screen1: {screen: Screen1},screen2: {screen: Logout}}); Here is how our authentication flow will work: If a user isn’t signed in, he/she will be shown the screen, he/she can’t access or . login screen1 screen2 A signed in user cant go back to the login screen without logging out. If a user signed in, kills the app and then reopens the app, will be presented, not the screen. screen1 login We will be using this demonstrable minimal loginReducer to manage our login states: The most important logic of managing state for authentication flow is managed by our navigation reducer. Our has transformed into a little which can handle authentication flow, let’s take a look at our new : [basicNavigationReducer](https://gist.github.com/shubhnik/b55602633aaeb5919f6f3c15552d1802) more capable reducer navigationReducer Let’s get through this step by step: navigationReducer In line 4, we are calculating , the action we need to navigate to screen when the user isn’t logged in. And in line 7, we are calculating which will return the navigation state for the logged out user i.e ActionForLoggedOut login stateForLoggedOut login screen will be displayed. In line 5, we are calculating , the action we need to navigate to when the user is logged in. And in line 8, we are calculating which will return the navigation state for the logged in user i.e ActionForLoggedIn screen1 stateForLoggedIn screen1 will be displayed. In line 9, we are assembling and into . Based on if the user is logged in we will pass or if not logged in than we will pass from to our navigator, : stateForLoggedOut stateForLoggedIn initialState stateForLoggedIn stateForLoggedOut initialState AppNavigator In line 19 of , consider the case. On dispatching action the field is set to in , and correspondingly we will update the , now our navigation stack will consist of two routes: stacked over screen. Thus we will navigate to . We will configure the by disabling gestures and the back button, because we want to keep the route in our navigation stack for the logout case. [navigationReducer.js](https://gist.github.com/shubhnik/9f7bafd3145e66434705cd1e995d1356) Login LOGIN isLoggedIn true [loginReducer.js](https://gist.github.com/shubhnik/55cb0a9f82d6eeb20004e43ee6b3e746) stateForLoggedIn screen1 login screen1 screen login In line 25 of , consider the case. On dispatching action the field is set to false which results in being fed to the navigator. Thus we have to update the chunk of the navigation state and reset it to contain only the route. [navigationReducer.js](https://gist.github.com/shubhnik/9f7bafd3145e66434705cd1e995d1356) Logout LOGOUT isLoggedIn stateForLoggedOut stateForLoggedOut login In line 36 of , all the dispatched actions except and are handled in default case. Currently in the demonstration app the only action that is being handled here is to navigate to . Since is only accessible by logged in users, hence we need to update the only. [navigationReducer.js](https://gist.github.com/shubhnik/9f7bafd3145e66434705cd1e995d1356) LOGIN LOGOUT screen2 screen2 stateForLoggedIn One more pending case is handling the action . This action is automatically dispatched by redux when the app is opened. We are considering this action for this case: Suppose we hadn’t consider this action, than, If the user is already logged in, the will be displayed to the user. The current navigation stack will only contain . Now user navigates to and dispatches the action from there. Since for action screen needs to be displayed but it isn’t in our current navigation stack. Thus a not so smooth animation will happen(see the header animation of left gif below). But since we are handling the and we are inserting the route at the bottom of the navigation stack hence we are enabling a smooth transition animation for logging out(right gif below). Consider the following two animations(without and with handling ): @@redux/INIT screen1 screen1 screen2 LOGOUT LOGOUT login @@redux/INIT login (see line 16) , @@redux/INIT On left we aren’t handling the “@@redux/INIT” and hence the unpleasant header animation, on right we are handling the “@@redux/INIT” action and hence a more natural and a pleasant header animation. By now we have investigated the which is handling the authentication flow. The authentication flow has been set up now. I have used Redux-Persist for persisting user session. React-Navigation and redux have finally found harmony with authentication flow 😃. navigationReducer For checking the complete authentication flow and how it plays along, checkout the for better understanding: authFlow branch of this repo _redux-react-navigation - React-Native + Redux + Redux-Persist + React Navigation_github.com shubhnik/redux-react-navigation Handling the hardware back button in Android Since we are handling the navigation state with redux, thus react-navigation loses its control over managing state. Thus we have to handle back button in Android on our own. The official docs of react-navigation has a great documentation for handling back button in Android here: _Edit description_reactnavigation.org Redux Integration Guide | React Navigation What’s next? The most important part of integrating redux with react-navigation is done. Adding more complex nested navigation won’t be any tough task now. I will be adding more demos for nested navigations to the github repo . . You can also fork the repo and share your solutions with the community. Don’t forget to star and watch the repo for more updates If this guide happens to be useful for you, than do show some love with claps and don’t forget to share it with others 🔔 🎉. You can follow me on where sometimes my tweets have some meaning. twitter UPDATE Initially I have used which isn’t a kind of good practice. We shouldn’t deprive redux of its own actions 😢. You can check how I am managing state without using in the [**@@redux/INIT**](https://github.com/shubhnik/redux-react-navigation/blob/authFlow/src/Reducers/navigationReducer.js#L25) @@redux/Init nestedNavigators branch . 2. Since I published this article, I have added two more branches and demonstrating more complex navigation structure. nestedTabs nestedNavigators 3. Discussions/feedbacks are appreciated 😄.

Flow

Harmony

Community Is

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A comprehensive guide for integrating React-Navigation with Redux including authentication flow

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

Shubhnik Singh Mann

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A comprehensive guide for integrating React-Navigation with Redux including authentication flow

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

Shubhnik Singh Mann

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES