How to presist log in using Async Storage?

Question

I'm trying to save the login status of the user with Async Storage like this: in the Login screen:

function LoginScreen({navigation, route, props}) {
  **AsyncStorage.setItem('isLoggedIn', false);**
function loginTrial() {
    setIsLoggingIn(true);
    fetch('https://bazarti.com/api/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: username.toString(),
        password: password,
      }),
    })
      .then(res => {
        if (res.status === 200) {
          AsyncStorage.setItem('isLoggedIn', true);
          AsyncStorage.setItem('token', res.headers.get('token'));
          Alert.alert('Sign-in', 'Sign-in was successful'[
            {
              text: 'ok',
              onPress: () => navigation.navigate('UserProduct'),
            },
          ]);
        }
        if (!res.status === 200) {
          Alert.alert('Error', 'Invalid Creditentials', [
            {
              text: 'ok',
            },
          ]);
        }
      })
      .catch(error => console.log(error, 'error'));
  }

and in app navigation js file:

function AppStackNavFunc() {
  let loggstat = AsyncStorage.getItem('isLoggedIn').then(res => res);
  if (loggstat === false) {
    return (
      <AppStackNav.Navigator>
        <AppStackNav.Screen
          name="LoginScreen"
          component={LoginScreen}
          options={LoginScreen.navigationoptions}
        />
        <AppStackNav.Screen
          name="UserProduct"
          component={UserProductScreen}
          options={UserProductScreen.navigationoptions}
        />
        <AppStackNav.Screen
          name="CreateNewProd"
          component={CreateNewProdScreen}
          options={CreateNewProdScreen.navigationoptions}
        />
        <AppStackNav.Screen
          name="OtherUsersProd"
          component={OtherUsersProdScreen}
          options={OtherUsersProdScreen.navigationoptions}
        />
      </AppStackNav.Navigator>
    );
  }
  if (loggstat === true) {
    return (
      <AppStackNav.Navigator>
        <AppStackNav.Screen
          name="UserProduct"
          component={UserProductScreen}
          options={UserProductScreen.navigationoptions}
        />
        <AppStackNav.Screen
          name="CreateNewProd"
          component={CreateNewProdScreen}
          options={CreateNewProdScreen.navigationoptions}
        />
        <AppStackNav.Screen
          name="OtherUsersProd"
          component={OtherUsersProdScreen}
          options={OtherUsersProdScreen.navigationoptions}
        />
      </AppStackNav.Navigator>
    );
  }
}
export default AppStackNavFunc;

the problem is that apparently in the app navigation js file, the code is unable to read the isLoggedIn from AsyncStorage and the AppNavStackFunc just do nothing. how can I implement the AsyncStorage correctly?

Answer 1

AsyncStorage setItem method takes in value also as string but you're passing a Boolean value, which is why the value isn't read. Here check the docs. It is given that the type is string(for value) so you have to initialise & make use of this in the same manner