AsyncStorage returns null [react-native] - react-native

Question

I have a createSwitchNavigator which has 3 routes with initialRouteName as AuthLoading
App.js
import AuthLoadingScreen from './screens/AuthLoadingScreen';
import {
createDrawerNavigator,
createBottomTabNavigator,
DrawerItems,
createSwitchNavigator,
createStackNavigator
} from "react-navigation";
import AuthScreen from "./screens/AuthScreen";
import ProductsScreen from "./screens/ProductsScreen";
import AuthLoadingScreen from "./screens/AuthLoadingScreen";
import ForgetPasswordScreen from "./screens/ForgetPasswordScreen";
import ProductsDemo from "./screens/ProductsDemo";
import RegisterScreen from "./screens/RegisterScreen";
const AppNavigator = () => {
return <MainNavigation />;
};
const AppBottomTabNavigator = createBottomTabNavigator(
{
home: ProductsScreen
}
);
const MainNavigation = createDrawerNavigator(
{
Home: AppBottomTabNavigator,
},
{
drawerWidth: width - width / 4,
drawerPosition: "left",
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "DrawerToggle",
drawerBackgroundColor: "#fff",
initialRouteName: "Home"
}
);
const AuthDrawerNavigator = createDrawerNavigator(
{
Products: createStackNavigator(
{
SignIn: AuthScreen,
ForgetPwd: ForgetPasswordScreen,
SignUp: RegisterScreen,
Product: ProductsDemo
},
{
initialRouteName: "Product",
navigationOptions: {
header: null
}
}
)
},
{
drawerWidth: width - width / 4,
drawerPosition: "left"
}
);
class App extends Component {
componentDidMount() {
SplashScreen.hide();
navigatorRef = this.navigator;
}
render() {
const Main = createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthDrawerNavigator,
App: AppNavigator
});
return (
<StoreProvider store={store}>
<PaperProvider theme={theme}>
<Main />
</PaperProvider>
</StoreProvider>
);
}
}
export default App;
The AuthLoadingScreen just checks... if app has a token, log user in else route to AuthDrawerNavigator, the AuthDrawerNavigator has a registration and login page.
AuthLoadingScreen.js
import React, { Component } from "react";
import { View, ActivityIndicator, AsyncStorage, StatusBar } from
"react-native";
class AuthLoadingScreen extends Component {
constructor() {
super()
this.loadApp()
}
loadApp = async () => {
const userToken = await AsyncStorage.getItem('userToken');
this.props.navigation.navigate(userToken? 'App' : 'Auth');
}
render() {
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
flex: 1,
backgroundColor: "#fff"
}}
>
<StatusBar translucent={false} backgroundColor="#007aff" />
<ActivityIndicator size="large" color="#007aff" />
</View>
);
}
}
export default AuthLoadingScreen;
In my RegisterScreen, as the user gets registered on backend, im storing his or her details locally using AsyncStorage...
const registerUser = async (first_name, last_name, email, pwd_1, phone, dispatch) => {
axios.post(`${ROOT_URL}registerUser`, {
phone: `+91${phone}`,
first_name: `${first_name}`,
last_name: `${last_name}`,
email: `${email}`,
pwd: `${pwd_1}`
})
.catch(err => dispatch({
type: REQ_FAIL,
val: err.message
}))
dispatch({
type: REQ_SUCCESS
})
await AsyncStorage.setItem('f_name', first_name);
await AsyncStorage.setItem('l_name', last_name);
await AsyncStorage.setItem('email', email);
await AsyncStorage.setItem('phone', phone);
}
Now, as the user is getting registered, im storing their details locally and after registration im routed to loginScreen and after login, im able to see details in homeScreen
ProductsScreen.js
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
StatusBar,
Image,
TextInput,
AsyncStorage,
} from "react-native";
import { Appbar } from "react-native-paper";
import { Icon } from "react-native-elements";
class ProductsScreen extends Component {
state = {
first_name: "",
last_name: "",
phone: "",
email: ""
};
async componentWillMount() {
let f_name = await AsyncStorage.getItem("f_name");
let l_name = await AsyncStorage.getItem("l_name");
let phone = await AsyncStorage.getItem("phone");
let email = await AsyncStorage.getItem("email");
this.setState({
first_name: f_name,
last_name: l_name,
phone: phone,
email: email
});
}
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: "#fff",
borderRadius: 12,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
marginHorizontal: 12,
marginVertical: 5,
elevation: 1,
zIndex: 9
}}
>
<Image
style={{
height: 50,
width: 50,
marginVertical: 8
}}
alignSelf="center"
resizeMode="contain"
source={require("../components/Images/avatar.png")}
/>
<View style={{ justifyContent: "space-around" }}>
<Text>{`${this.state.first_name} ${
this.state.last_name
}`}</Text>
<Text>{this.state.phone}</Text>
<Text>{this.state.email}</Text>
</View>
</View>
</View>
</View>
);
}
}
export default ProductsScreen;
But next time as the user is already registered,user is directly routed to loginScreen and after logging in, this time AsyncStorage is returning null
Though the code for retrieving values from asyncStorage is same as above:
async componentWillMount() {
let f_name = await AsyncStorage.getItem("f_name");
let l_name = await AsyncStorage.getItem("l_name");
let phone = await AsyncStorage.getItem("phone");
let email = await AsyncStorage.getItem("email");
this.setState({
first_name: f_name,
last_name: l_name,
phone: phone,
email: email
});
}