React Native AsyncStorage not working - now what am I doing wrong?

Question

What am I leaving out here? At this point I just want to see it write a value and retrieve a value. By setting the variable "appType" I can see if it's working. It is not because the initial value of "appType" is not changing. I can tell this by which page is loading. I need this information upfront to determine which page is to load first.

import 'react-native-gesture-handler';
import React from 'react';

import { NavigationContainer }    from '@react-navigation/native';
import { createStackNavigator }   from '@react-navigation/stack';

import AsyncStorage  from '@react-native-community/async-storage';

import SpMyPage      from './screens/s_mypg';
import UsMyPage      from './screens/u_mypg';
import UsRegPage     from './screens/u_regs';



function checkAsyncStorage(){
  var appType = '';

  const storeData = async () => {
    try {
      await AsyncStorage.setItem('random_time', '50000')
    } catch (e) {
      // saving error
    }
  }

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('random_time')
      if(value !== null) {
        // value previously stored
        appType = 'S';
      }
      else {
        appType = 'U';  
      }
    } catch(e) {
      // error reading value
      appType = 'U';
    }
  }

  return appType; 
}

function PreHomeScreen() {
  var appType = checkAsyncStorage();

  if (appType == 'S') {
    return <SpMyPage />;
  }
  else {
    if (appType == 'U') {
      return <UsMyPage />;
    }
    else {
      return <UsRegPage />;
    }  
  }
}


/* ************************************************************************** */

const Stack = createStackNavigator();

function App() {
  return (
    <>
    <NavigationContainer>
    
      <Stack.Navigator
        initialRouteName = "PreHomeScreen"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="PreHomeScreen" component={PreHomeScreen} />
        <Stack.Screen name="SpMyPage" component={SpMyPage} />
        <Stack.Screen name="UsMyPage" component={UsMyPage} />
        <Stack.Screen name="UsRegPage" component={UsRegPage} />
      </Stack.Navigator>
    
    </NavigationContainer>
    </>
  );
};

export default App;

Answer 1

// The import statement should be like:

import AsyncStorage from '@react-native-community/async-storage';

// The function to retrieve previously stored data (In this example it's "userId")

retrieveData = async () => {
    try {
      const userId = await AsyncStorage.getItem('userId');
      if (userId != null) {
        console.log(userId);
      }
    } catch (e) {
      console.log(e);
    }
};

// The function to store data (In this example it's "userId")

storeData = async () => {
    try {
        await AsyncStorage.setItem('userId', value);
    } catch (e) {
        console.log(e);
    }
};

Answer 2

My original goal was to use AsyncStorage. I coded it the way the examples showed.

But, I found that apparently I don't need to have an "async function" wrapped around the AsyncStorage methods. Hence no "await" needed either. Not sure if this is going to cause a problem but for now it seems to work.

function checkAsyncStorage(){
  var appType = '';
  
    try {
      AsyncStorage.setItem('random_time', '50000')
    } catch (e) {
      // saving error
    }

    try {
      const value = AsyncStorage.getItem('random_time')
      if(value !== null) {
        // value previously stored
        appType = 'S';
      }
      else {
        appType = '';  
      }
    } catch(e) {
      // error reading value
      appType = 'U';
    }

  return appType; 
}

Answer 3

I think the right way to import AsynStorage is

import AsyncStorage from '@react-native-community/async-storage';

Here's an example from the repo. https://github.com/react-native-community/async-storage/blob/master/example/examples/GetSetClear.js