Issue with React Navigation 5: Bottom tab navigator not rendering correctly showing a small box with a shadow

Question

So Im using @react-navigation/bottom-tabs to create a simple bottom tab navigator between two screens and im getting this weird look:

emulator screenshot

Im using a very simple example, here's the code for my first and second screen:

    const ScreenOne = () => {
      return <Text>Screen 1</Text>;
    };
    
    const Favorites = () => {
      return <Text>Favorites</Text>;
    };

and here's the code used for my bottom navigator:

    const RootNavigator = () => {
      return (
        <BottomTabs.Navigator
          initialRouteName="Screen One">
          <BottomTabs.Screen name="Screen One" component={ScreenOne} />
          <BottomTabs.Screen name="Favorites" component={FavoritesScreen} />
        </BottomTabs.Navigator>
      );
    };

Here's my component in App.js

    const App = () => {
      return (
        <NavigationContainer theme={{colors: {background: 'white'}}}>
          <View style={{backgroundColor: 'white', flex: 1}}>
            <RootNavigator />
          </View>
        </NavigationContainer>
      );
    };
    
    export default App;

Why is this happening, and is there anyway to fix this using screenOptions prop or the options prop in each individual screen?

Answer 1

Here is an implementation for above Bottom Tabs

Your RootNavigation.js should look like this -

import * as React from 'react';
import { View } from 'react-native';
import { useTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ScreenOne from '../screens/ScreenOne';
import Favourites from '../screens/Favourites';

const Tab = createBottomTabNavigator();

function RootNavigation() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <Tab.Navigator>
        <Tab.Screen name="ScreenOne" component={ScreenOne} />
        <Tab.Screen name="Favourites" component={Favourites} />
      </Tab.Navigator>
    </View>
  );
}

export default RootNavigation;

Your App.js should look like this -

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import RootNavigation from './navigation/RootNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <RootNavigation />
    </NavigationContainer>
  );
}