React Native User Login Problem ( AsyncStorage ) - react-native

Question

I am trying to make a membership login system but I get an error. I couldn't understand much because I had just started. What's the problem?
export default async () => {
const [isLoading, setIsLoading] = React.useState(true);
const [userToken, setUserToken] = React.useState(null);
const AsyncUserValue = await AsyncStorage.getItem('userid');
console.log(AsyncUserValue); // (userid 15)
if(AsyncUserValue != null){
console.log('AsyncStorageParse: ' + AsyncUserValue); // (userid 15)
setUserToken(AsyncUserValue);
console.log('Tokken: ' + userToken); // NULL
}
React.useEffect(() => {
setTimeout(() =>{
setIsLoading(false);
}, 1000);
}, []);
if(isLoading) { return <SplashScreen /> }
return(
<NavigationContainer>
{userToken ? (
<AppTabs />
) : (
<LoginStack />
) }
</NavigationContainer>
)
}

Answer 1

You returned functional component as asynchronous (note top export default async ()).
You can't do that - components are required to return React elements (so they have to be synchronous).
What you can do instead is to create a inner async function and do all your async logic there:
export default () => {
const [state, updateState] = useState();
async function myWork() {
const data = await getDataAsyncWay();
updateState(data);
}
useEffect(() => {
myWork()
}, [])
return <View>{...}</View>
}
Note: avoid exporting anonymous function as components - this way, their name won't be visible in stack trace (see your screenshot). What you can do instead is:
function MyComponent() {...};
export default MyComponent