React Native Shows Blank White Screen on Web Browser

Question

I'm new in react native. My app works fine in android emulator. On web browser Home screen loads fine. But It shows blank screen on web browser when navigating from Home to Login or Signup screen.

Here's the App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { firebase } from './config';
import Home from './Home';
import Login from './Login';
import Signup from './Signup';
import Dashboard from './Dashboard';
import ForgotPass from './ForgotPass';

const Stack = createNativeStackNavigator();

function App() {
  const [initializing, setInitializing] = React.useState(true);
  const [user, setUser] = React.useState();

  //handle user state changes
  function onAuthStateChanged(user){
    setUser(user);

    if(initializing)
      setInitializing(false);
  }

  React.useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if(!user){
    return (
        <Stack.Navigator screenOptions = {{ headerShown: false }}>
          <Stack.Screen name='Home' component={Home} />
          <Stack.Screen name='Login' component={Login} />
          <Stack.Screen name="Signup" component={Signup} />
          <Stack.Screen name="ForgotPass" component={ForgotPass} />
        </Stack.Navigator>
    );
  }

  return(
    <Stack.Navigator screenOptions = {{ headerShown: false }}>
      <Stack.Screen name="Dashboard" component={Dashboard} />
    </Stack.Navigator>
  );
}

export default () => {
  return (
    <NavigationContainer>
      <App/>
    </NavigationContainer>
  )
}

And here's the Home screen code

import React from 'react';
import {View, Text, Image} from 'react-native';
import Background from './Background';
import Button from './Button';
import { busOrange, transGray} from './Constants';

const Home = (props) => {
    return (
        <Background>
            <View style = {{ marginVertical: 140, marginRight: 30 }} >
                <Image source={require("./assets/logo.png")}
                    style = {{ height: 150 , width: 250, alignItems: 'center', marginTop: 40, opacity: 1}}
                />
                <Text style = {{ color: 'black', fontSize: 54}} >Let's start</Text>
                <Text style = {{ color: 'black', fontSize: 34, marginBottom: 40}} >the journey...</Text>
                <Button bgColor={busOrange} textColor='white' btnLabel="Login" Press={() =>
                props.navigation.navigate('Login')}/>
                <Button bgColor={transGray} textColor={busOrange} btnLabel="Sign Up"  Press={() =>
                props.navigation.navigate('Signup')}/>
            </View>
        </Background>
    );
}

export default Home;

I've tried upgrading and downgrading the dependencies, nothing works.