React Navigation Bottom Tabs doesn't work with React Native for Web

Question

I'm building a web app using react-native-web with @react-navigation/bottom-tabs.

But the screen content doesn't appear on the web, it only shows the Tab Bar. It works fine on iOS and Android.

Here is the code:

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {Text, View} from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the home screen</Text>
    </View>
  );
};

const RootView = () => {
  const Tab = createBottomTabNavigator();
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default React.memo(RootView);

Dependencies:

"dependencies": {
    "@react-native-community/async-storage": "^1.12.1",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@reduxjs/toolkit": "^1.5.0",
    "axios": "^0.21.1",
    "class-transformer": "^0.3.1",
    "react": "16.13.1",
    "react-dom": "^17.0.1",
    "react-native": "0.63.3",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-web": "^0.14.10",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.2.0",
    "redux-persist": "^6.0.0",
    "rxjs": "^6.6.3",
    "styled-components": "^5.2.1"
  },

And the result on web and iOS:

Answer 1

I finally can resolve this issue by setting these styles in public/index.html

<style>
  /* These styles make the body full-height */
  html,
  body {
    height: 100%;
  }
  /* These styles disable body scrolling if you are using <ScrollView> */
  body {
    overflow: hidden;
  }
  /* These styles make the root element full-height */
  #root {
    display: flex;
    height: 100%;
  }
</style>