i am learning react native / expo so this question might sound stupid. I am trying to load data from a page (in this case inbox.js) through a context page and then if data loaded or not i show the splashscreen or the inbox.js page.

i tryed to pass usestate to false when everthing is loaded to a context then check it in my app.js

const Stack = createNativeStackNavigator();


function AppNavigator() {

  const { isLoadingContextOne ,setIsLoadingContextOne }  = useContext(LoadingContextApp);

  

 
  if (isLoadingContextOne) {
    return <SplashScreens />;
  }
  
 const{isLoggedIn,isLoadingContext,loadAsyncData,setIsLoggedIn,setIsLogoutLoading,isLogoutLoading} = useContext(AuthContext);



  
  return (
    <Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
      {isLoggedIn ? (
        <>
        
          <Stack.Screen name="inbox" component={Test} options={{ title: 'inbox Page' }} />
        </>
      ) : (
        <>
          <Stack.Screen name="auth" component={Splash} options={{ title: 'auth Page' }} />
          <Stack.Screen name="Login" component={LoginPage} options={{ title: 'Login Page' }} />
          <Stack.Screen name="Register" component={RegisterPage} options={{ title: 'Register Page' }} />
        </>
      )}
    </Stack.Navigator>
  );
}




export default function App({navigation}) {

  const [IsReady, SetIsReady] = useState(false);
  

  const loadFontsAsync = async () => {
    await Font.loadAsync({
      test: require('./fonts/Unbounded-Bold.ttf'),
      
      
    });
  };
  

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={loadFontsAsync}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }
  

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NotifierWrapper>
      <LoadingProvider>
        <AuthProvider>
          
          <NavigationContainer>
            <AppNavigator />
            <Toast ref={(ref) => Toast.setRef(ref)} />
          </NavigationContainer>
        </AuthProvider>
          </LoadingProvider>

      </NotifierWrapper>
    </GestureHandlerRootView>
  );
}

Then in my inbox.js

useEffect(() => {
    if (
      !loadingInfoDeLuser &&
      !isLoading &&
      !isLoadingmessage &&
 
    ) {
     
      setIsLoadingContextOne(false); // This will remove the splash screen when all conditions are met
      
    }
  }, [
    loadingInfoDeLuser,
    isLoading,
    isLoadingmessage,
   
  ]);

and the context

import React, { useContext, createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import SplashScreens from './splashFinal';

const LoadingContextApp = createContext();

export const LoadingProvider = ({ children }) => {
  const [isLoadingContextOne, setIsLoadingContextOne] = useState(true);
  

  const setLoaded = () => {
    setIsLoadingContextOne(false);
  };


  
  

  return (
    <LoadingContextApp.Provider value={{ isLoadingContextOne,  setIsLoadingContextOne }}>
      {children}
    </LoadingContextApp.Provider>
  );
};

export default LoadingContextApp;

thank you