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

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

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

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

// 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);
}
};