Navigation if not authorized does not work with react-native? - reactjs

Question

Problem:
I have created a react native application in there I am checking if not authorized I am removing the async storage and redirecting to login. To handle the Axios easily I have created an HTTP client file like this.
import axios from "axios";
import { AsyncStorage } from "react-native";
import { NavigationActions } from 'react-navigation';
// TODO: Replace this with actual JWT token from Keycloak
axios.defaults.headers.post["Content-Type"] = "application/json";
// Create axios instance for api calls
var instance = null;
export const setAuth = async () => {
const token = await AsyncStorage.getItem("jwt");
instance = axios.create({
baseURL: "",
timeout: 150000,
headers: {
Authorization: "Bearer " + token,
"Content-Type": "application/json"
}
});
instance.interceptors.response.use(
function(response) {
return response;
},
async function(error) {
console.log(error);
if (error.response.status) {
if (error.response.status === 401) {
AsyncStorage.removeItem('jwt')
AsyncStorage.removeItem("user");
NavigationActions.navigate({
routeName: 'login'
});
} else {
return error;
}
}
}
);
};
export const Get = (route, data) => {
function getData() {
return instance.get(
route,
data == null ? { data: {} } : { data: JSON.stringify(data) }
);
}
if (instance) return getData();
return setAuth().then(getData);
};
export const Post = (route, data) => {
function postData() {
return instance.post(route, JSON.stringify(data));
}
if (instance) return postData();
return setAuth().then(postData);
};
I am accessing this HTTP client file inside the redux logic function. So this is outside of the component. Problem Now I have faced is It is removing the Asyncstorage but the navigation does not seem to work correctly.
How I create My routes is this.
import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
// import { createStackNavigator } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import IonIcon from "react-native-vector-icons/Ionicons";
import { Image } from "react-native";
import LoginScreen from "./components/Login/Login";
import HomeScreen from "./components/Home/Home";
import SettingsScreen from "./components/Settings/Settings";
import FinesScreen from "./components/Fines/Fines"
import ChangePassword from "./components/Changepassword/Changepassword";
const SettingsTab = createStackNavigator(
{
settings: { screen: SettingsScreen },
changePassword: { screen: ChangePassword }
},
{
initialRouteName: "settings",
headerMode: "none"
},
(navigationOptions = {
headerMode: "none"
})
);
const TabNav = createBottomTabNavigator(
{
home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: false,
tabBarIcon: () => (
<Image source={require("../assets/invalid-name.png")} />
)
}
},
fines: {
screen: FinesScreen,
navigationOptions: {
tabBarLabel: false,
headerMode: "none",
tabBarIcon: () => (
<Image source={require("../assets/icon-service-fines.jpg")} />
)
}
},
settings: {
screen: SettingsTab,
navigationOptions: {
tabBarLabel: false,
headerMode: "none",
tabBarIcon: () => <Image source={require("../assets/settings.png")} />
}
}
},
{
tabBarPosition: "bottom",
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
activeTintColor: "#FFFFFF",
inactiveTintColor: "#F8F8F8",
borderTopColor: "transparent",
style: {
backgroundColor: "#fffff",
borderTopColor: "transparent",
paddingTop: 0
},
indicatorStyle: {
borderBottomColor: "#87B56A",
borderBottomWidth: 2
},
tabStyle: {
justifyContent: "center"
}
}
}
);
const MainNavigator = createStackNavigator(
{
login: { screen: LoginScreen },
tab: { screen: TabNav }
},
{
initialRouteName: "login",
headerMode: "none"
},
(navigationOptions = {
headerMode: "none"
})
);
const AppContainer = createAppContainer(MainNavigator);
export default AppContainer;
An I used it in the app.js file like this.
import React from "react";
// import Login from "./src/components/Login/Login";
// import Register from "./src/components/Register/Register";
import Route from "./src/route";
import { Provider } from "react-redux";
import { createLogicMiddleware } from "redux-logic";
import { createStore, applyMiddleware, compose } from "redux";
import NavigationService from "./src/services/navigationService";
import reducers from "./src/reducers";
import services from "./src/services";
const logicMiddleware = createLogicMiddleware(services, {});
const middleware = applyMiddleware(logicMiddleware);
const composeEnhancers = compose;
const enhancer = composeEnhancers(middleware);
let store = createStore(reducers, enhancer);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Route
// ref={navigatorRef => {
// NavigationService.setNavigator(navigatorRef);
// }}
></Route>
</Provider>
);
}
}
Can someone help me to solve this issue? Thank you.

Answer 1

NavigationActions return an object that can be sent to the router using navigation.dispatch() method
You can achieve solution in multiple ways. Here I am going to explaining without Props
First you need to create a service
let _navigator;
function setNavigator(navRef) {
_navigator = navRef;
}
function navigate(navAction) {
_navigator.dispatch(
navAction
);
}
// add other navigation functions that you need and export them
export default {
navigate,
setNavigator,
};
In App container create a ref for
<AppContainer
ref={navigatorRef => {
NavigationService.setNavigator(navigatorRef);
}}
/>
Use in your http client file
import NavigationService from 'path-to-NavigationService.js';
NavigationService.navigate(NavigationActions.navigate({
routeName: 'login'
}););
expo reference