React Navigation Bottom Tabs occupying the whole screen in React Native Web - react-native

Question

I'm trying to use React-Navigation bottom tabs in React-Native-Web, the result is the expected in the device:
result in device
But in the web it gets like this:
result in the browser
If I inspect the page I can find the elements of main in there.
and here is the code:
src/App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import {StatusBar} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Main from './pages/Main/index';
const Tab = createBottomTabNavigator();
const App = () => {
return (
<>
<StatusBar
backgroundColor="transparent"
translucent
barStyle="light-content"
/>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main} />
</Tab.Navigator>
</NavigationContainer>
</>
);
};
export default App;
src/pages/Main/index.js
import React, {useState, useEffect} from 'react';
import {View, Dimensions} from 'react-native';
// import api from '../../services/api';
import Company from '../../components/Company';
import {Container, Title, List} from './styles';
export default function Main() {
//...
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
height: Dimensions.get('window').height,
justifyContent: 'center',
}}>
<Container>
<Title>Empresas Cadastradas</Title>
<List
keyboardShoulPersistTaps="handled"
data={companies}
keyExtractor={(item) => String(item.id)}
renderItem={({item}) => <Company data={item} />}
/>
</Container>
</View>
);
}
src/pages/Main/styles.js
import styled from 'styled-components/native';
export const Container = styled.View`
background-color: #7159c1;
padding-top: 30px;
flex: 1;
`;
export const Title = styled.Text`
font-size: 32px;
color: #fff;
font-weight: bold;
padding: 0 20px;
margin-bottom: 10px;
`;
export const List = styled.FlatList.attrs({
contentContainerStyle: {paddingHorizontal: 10},
showsVerticalScrollIndicator: false,
})`
margin-top: 20px;
`;

Answer 1

I've encountered the same problem, and the solution is to add index.css somewhere in your src, load it in your index.js or index.web.js, then put this:
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%;
}
Found the solution in the following discussion:
https://github.com/react-navigation/react-navigation/issues/9187