Cannot read AsyncStorage value on React Native app startup - ios

Question

I am using React Native with Redux. The following code is used to create the Redux store, and uses AsyncStorage to check if the user is logged in by checking the presence of an authToken.
import {createStore} from 'redux';
import {persistStore} from 'redux-persist';
async function getAuthToken() {
return await AsyncStorage.getItem('authToken');
}
export function createStore(onCompletion:() => void):any {
...
const store = createStore(
reducer,
{
auth: {
authenticated: !!getAuthToken()
}
},
enhancer);
persistStore(store, {
storage: AsyncStorage,
},
onCompletion);
}
The creation of the store:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
store: createStore(...),
};
}
render() {
return (
<Provider store={this.state.store}>
<AppNavigator />
</Provider>
);
}
}
The authToken value get correctly set once the user logs in, and is removed once the user logs out. But the authToken does not get persisted after the app is relaunched. The first call to getAuthToken always returns this junk value from AsyncStorage:
{ _45: 0, _81: 0, _65: null, _54: null }
Why could this be happening?

Answer 1

Now you're returning a promise from AsyncStorage, you need to return the token value. Try:
async function getAuthToken() {
return await AsyncStorage.getItem('authToken').then((token) => token);
}

Answer 2

With hooks you useEffect
import AsyncStorage from '#react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';
export function App() {
const [token, setToken] = useState<string>();
useEffect(()=>{
(async function() {
setToken(await AsyncStorage.getItem());
await SplashScreen.hideAsync();
})();
},[]);
if (token) {
return (<View><Text>{token}</Text></View>);
} else {
return null;
}
}