React Navigation Bottom Tabs occupying the whole screen in React Native Web

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