App definition.js

//We continue defining our app
const App = ({ navigation }) => {
  //with Hook states we set some initial values (the user profile, if the app is loading, and so on)
  const [isDarkTheme, setIsDarkTheme] = useState(status);
  const [userLogged, setUserLogged] = useState(false);
  const [userProfile, setUserProfile] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  
  //theme will be the dark or default (defined earlier) based on isDarkTheme
  const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme;

  //on startup let's check if we are alredy authenticathed, adjusting the previous variable accordingly
  useEffect(() => {
    Firebase.auth().onAuthStateChanged((user) => {
      setUserLogged(user ? true : false);
      setIsLoading(false);
      setUserProfile(user);
    });
  }, []); //<--- this means that useEffet will only run once, and not on every update

  //this mainC will be passed to the context, so that every child of the provider will access these functions and objects
   const mainC = useMemo(
    () => ({
      userProfile: { userProfile },
      inHome: () => setIsDarkTheme((isDark) => !isDark),
      signOutUser: () => Firebase.auth().signOut(),
      handleLogin: (email, password) => {
        setIsLoading(true);
        Firebase.auth()
          .signInWithEmailAndPassword(email, password)
          .catch((error) => console.log(error));
        setIsLoading(false);
      },
    }),
    []
  );
 //This would render at startup (while checking if we are already logged)  
 //and during login (see above, we use setIsLoading(true) at the beginning of authentication)
 //This way the user will see a spinning wheel while the app is "working" in background
 
  if (isLoading) {
    // Checking if already logged in
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator animating={true} size="large" />
      </View>
    );
  }
  //Once the isLoading is gone (logged or not logged) the app will render this stack
  return (
    <mainContext.Provider value={mainC}> //the context 
      <PaperProvider theme={theme}> //the paper theme
        {isDarkTheme ? <StatusBar style="light" /> : <StatusBar style="dark" />} //the status bar based on theme
        <NavigationContainer theme={theme}> //we create a navigation container
          <AppStack.Navigator initialRouteName="Login"> //That will hold the stack
            {userLogged == false ? ( //then we check if the user is logged in
              <>
                //the user is not logged so we show the LoginScreen+SignupScreen stack
                <AppStack.Screen name="Login" component={LoginScreen} /> 

                <AppStack.Screen
                  name="Signup"
                  options={{ title: loc.t('signup') }}
                >
                  {() => <SignUpScreen />}
                </AppStack.Screen>
              </>
            ) : (
              <>//the user is logged is so we show the HomeScreen
                <AppStack.Screen name="Home">
                  {() => <HomeScreen  />}
                </AppStack.Screen>
              </>
            )}
          </AppStack.Navigator>
        </NavigationContainer>
      </PaperProvider>
    </mainContext.Provider>
  );
};

export default App;