JAVASCRIPT

React Native Root Element, deciding on async call

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