React Native — React Navigation and Redux Saga

donald lee
Apr 28 · 3 min read
For more tips and tricks and general programming knowhow, join us!

So, I’m working on creating my login to profile screen functionality of my mobile app. That is, when a user logs in successfully, we throw them to their profile.

Right now, I’m using React Navigation and Redux saga (as per the title of this story). So, here’s the thing, when I log in, I call the respective login generator function in my sagas.

# sagas.jsimport * as NavigationService from './services/navigation/NavigationService.js'export function* loginUser(action) {
try {
const response = yield call(api.loginUser, action.user_data)
storeTokens(response)
yield put(usersDataActions.loginUser(response.data))
NavigationService.navigate('Profile');
} catch(e) {
Alert.alert("Login unsucessful!","Sorry, it looks like your user/password combination is invalid.")
console.log(e.body)
if(environment.APP_ENV == 'production'){
sentryHelper.sentryConfigureScope(action.user_data.email)
Sentry.captureException(new Error(e.body))
}
yield put(usersDataActions.loginFailed(e.responseText))
}
}

Maybe I’ll talk about Sentry in another story…

So. What is that “NavigationService”? That’s the magic that will make your navigation life a BREEZE.

As you can see, I have mine placed in my services folder under ./services/navigation/NavigationService.js (maybe I’ll go through app structuring at some later date too — subscribing to me right now seems like a good idea, doesn’t it? ;)! )

Ok, let’s take a look at what this NavigationService.js file is:

#./services/navigation/NavigationService.jsimport { NavigationActions } from 'react-navigation';const config = {};export function setNavigator(nav) {
if (nav) {
config.navigator = nav;
}
}
export function navigate(routeName, params) {
if (config.navigator && routeName) {
let action = NavigationActions.navigate({ routeName, params });
config.navigator.dispatch(action);
}
}
export function goBack() {
if (config.navigator) {
let action = NavigationActions.back({});
config.navigator.dispatch(action);
}
}

So, basically, it encapsulates some really important logic of NavigationActions from react-navigation. The navigate function will take the screen name and navigate to that screen when used. As per:

NavigationService.navigate('Profile');

when I needed to move to the Profile screen after logging in.

Similarly, if we are on a screen that is stacked on top of another, for example, if you have a SearchResults screen stacked on top of a Search screen, then calling …

NavigationService.goBack()

would bring us from the SearchResults screen back to the Search screen.

DON’T FORGET to add this to the Root of your app, for example, at my root i have this…

import React, {Component} from 'react';
import { Provider } from 'react-redux';
import store, { history } from './store'
import { StyleSheet, Text, View } from 'react-native';
import {RootApp} from './router'
import * as NavigationService from './services/navigation/NavigationService.js'
export default class App extends Component {
componentDidMount() {
NavigationService.setNavigator(this.navigator);
}
render() {
return (
<Provider store={store}>
<RootApp ref={nav => {
this.navigator = nav;
}} />
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

where router.js is basically createAppContainer from react-navigation.


Well, I hope that helped! Right to the point! If you like this and want to support me on making more stories like this, then please connect with me!

Here’s a video if you don’t like to read!

Don’t forget to thumb up and subscribe!

Connect with me!

Linkedin: https://www.linkedin.com/in/donaldlee50

Instagram: https://www.instagram.com/donlee50/

Twitter: https://twitter.com/donaldlee50

Subscribe to our mailing list here!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade