I hope you can help me with this problem. Context: I am creating a native mobile application with React Native using Expo. The app works perfectly in the emulator, and after compiling, the login works correctly. However, after performing authentication and navigating to the home screen, this screen becomes completely white, preventing me from interacting with any of the components it contains. I researched and only found a page that talked about the white screen of death and suggested creating a component to handle this error. I did this and set it as the parent of my screen, but the error persisted. I entered each of the home components and handled the logic within try-catch blocks in case there was an error I wasn’t seeing, but the problem continued. I decided to start removing components, and I realized that the issue was specifically caused by the Tab Navigator from React Navigation, which contains 4 components within a Tab Screen child of the Tab Navigator. When I removed the Tab Navigator, my app rendered the home screen. I don’t know how to fix this error because I need the Tab Navigator to navigate between screens. This is the home screen:

export default function Home() {
    return (
        <View style={styles.container}>
            <StatusBar style="auto" /> 
            <Text style={styles.topTitulo}>Athenas</Text>
            <Tab.Navigator
                initialRouteName="Proyectos"
                screenOptions={{
                    tabBarActiveTintColor: '#007BFF',
                    tabBarLabelStyle: { fontSize: 12 },
                    tabBarStyle: { backgroundColor: 'white' },
                    tabBarPressColor: "white",
                    tabBarShowLabel: false,
                }}


            >
                <Tab.Screen
                    name="Proyectos"
                    component={Projects}
                    options={{
                        tabBarLabel: 'Agenda', tabBarIcon: () => (
                            <FontAwesome5 name="home" size={24} color="#9641D9" />
                        )
                    }}
                />
                <Tab.Screen
                    name="Perfil"
                    component={Profile}
                    options={{
                        tabBarLabel: 'Agenda', tabBarIcon: () => (
                            <FontAwesome5 name="user-alt" size={20} color="#9641D9" />
                        )
                    }}
                />

                <Tab.Screen
                    name="Cuentas"
                    component={Counts}
                    options={{
                        tabBarLabel: 'Agenda', tabBarIcon: () => (
                            <FontAwesome5 name="hand-holding-usd" size={24} color="#9641D9" />
                        )
                    }}
                />

                <Tab.Screen
                    name="Opciones"
                    component={Bars}
                    options={{
                        tabBarLabel: 'Agenda', tabBarIcon: () => (
                            <FontAwesome5 name="bars" size={20} color="#9641D9" />
                        )
                    }}
                />
            </Tab.Navigator>
        </ View>
    );
}

Now this is the father component:

function MyTabs() {
  const { session } = useUserInfo();
  const isLogged = session !== null;

  return (
    <Stack.Navigator
      initialRouteName={isLogged ? 'Home' : 'Login'}
      screenOptions={{ headerShown: false }}
    >
      {isLogged ? (
        <>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="ProfileEdit" component={ProfileEdit} />
          <Stack.Screen name="CountsDetail" component={CountsDetail} /> 
       </>
      ) : (
        <Stack.Screen name="Login" component={Login} />
      )}
    </Stack.Navigator>
  );
}

export default function Navigator() {
  return <MyTabs />;
}

That component is inside this one:

export default function App() {
return (
<AuthProvider>
<NavigationContainer>
<MyErrorBoundary>
<Navigator />
</MyErrorBoundary>
</NavigationContainer>
</AuthProvider>
);
}

Finally, the error boundary that tries to handle the error is this:

import React from 'react';
class MyErrorBoundary extends React.Component {
state = {
hasError: false,
};

    static getDerivedStateFromError(error) {
        return { hasError: true };
    };
    componentDidCatch(error, errorInfo) {
        console.log(error);
        console.log(errorInfo);
    };
    render() {
        return this.state.hasError ? <FallbackUI /> : this.props.children;
    }

}

export default MyErrorBoundary;

I need to fix this error, please, so I can present my thesis. Thank you very much to anyone who takes the time to help me.