React Native Root Element, deciding on async call - react-native

Question

I'm currently writing an App in React-Native, which also includes a login. I use AsyncStorage for saving the credentials. Now I want to show the user different Screens (Navigators) whether he is logged in or not.
To check if he is logged in, I check if there are credentials in the AsyncStorage, and the function to check this returns a promise. So now when I call the function in my component, it wont wait until the promise has resolved and I don't have any idea on how to solve. I tried with but this also failed. Maybe you have any idea. Below my code. Thanks
import 'react-native-gesture-handler'
import { NavigationContainer } from '#react-navigation/native'
import AppNavigation from './navigation/AppNavigation.js'
import { ThemeProvider, Text } from 'react-native-magnus'
import { useState, useEffect, useCallback, Suspense} from 'react'
import {React } from 'react'
import getNutrientsCompare from './utils/getNutrientsCompare.js'
import getLoginSession from './utils/getLoginSession.js'
import Login from './pages/Login.js'
import { ActivityIndicator } from 'react-native'
const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout));
}
const RootElement = () => {
const [result, setResult] = useState(null)
getLoginSession().then(data => {
[loginSessionState, setLoginSessionState] = useState("");
if (loginSessionState != null) {
setResult((
<ThemeProvider>
<NavigationContainer >
<AppNavigation />
</NavigationContainer>
</ThemeProvider>))
} else {
setResult((
<ThemeProvider>
<Login>
</Login>
</ThemeProvider>
))
}
})
return result
}
const App = () => {
return (
<Suspense fallback={<ActivityIndicator />}>
<RootElement />
</Suspense>
)
}
export default App

Answer 1

Give this a try
import { ActivityIndicator } from "react-native";
const RootElement = () => {
const [loggedIn, setLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
try {
const data = await getLoginSession();
if (data != null) {
setLoggedIn(true);
}
} catch (error) {
setLoggedIn(false);
}
setLoading(false);
})();
}, []);
return (
<>
{!loading ? (
loggedIn ? (
<ThemeProvider>
<NavigationContainer>
<AppNavigation />
</NavigationContainer>
</ThemeProvider>
) : (
<ThemeProvider>
<Login />
</ThemeProvider>
)
) : (
<ActivityIndicator size="large" color="#00ff00" />
)}
</>
);
};