title: React-Native Tab Navigation Bar cut off
body: <p>I'm currently using the material-bottom-tabs to implement navigation in my mobile app.</p>
  <p>For some odd reason, it isn't displayed correctly but cut off at the bottom of my screen.</p>
  <p>This happens regardless of whether I activate gesture control (so the Android built-in navigation bar disappears) or not.</p>
  <p>If I add padding to the style of my Tabs.Navigator, then the Tab-Navigation-Bar is still cut off, now by a white padding.</p>
  <p>I tried to wrap my Tab.Navigator inside a SafeAreaView (from react-native-safe-area-context) but if I do this, I just get a plain white screen back.</p>
  <p>This is my code:</p>
  <pre><code>import React, { Component } from 'react';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import DrawerHome from './DrawerHome';
  import Bookmarks from './Bookmarks';
  
  const Tab = createMaterialBottomTabNavigator();
  const Stack = createStackNavigator();
  //const insets = useSafeArea();
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        userToken: 1, // set to 'null' in production state
      };
    }
    render() {
      return this.userToken === null ? (
        &lt;Stack.Screen name=&quot;LogIn&quot; component={LoginScreen} /&gt;
      ) : (
        &lt;SafeAreaProvider&gt;
          &lt;NavigationContainer&gt;
            &lt;SafeAreaView&gt;
              &lt;Tab.Navigator style={{ paddingBottom: '10%' }}&gt;
                &lt;Tab.Screen
                  name=&quot;Current Schedule&quot;
                  component={CarouselPage}
                  options={{
                    tabBarLabel: 'Current\nSchedule',
                    tabBarIcon: &lt;Ionicons name=&quot;ios-calendar&quot; size={20} /&gt;,
                  }}
                /&gt;
                &lt;Tab.Screen name=&quot;Resources&quot; component={ResourceScreen} /&gt;
                &lt;Tab.Screen
                  name=&quot;Schedule Selection&quot;
                  component={ScheduleSelectionScreen}
                /&gt;
                &lt;Tab.Screen name=&quot;About&quot; component={AboutScreen} /&gt;
              &lt;/Tab.Navigator&gt;
            &lt;/SafeAreaView&gt;
          &lt;/NavigationContainer&gt;
        &lt;/SafeAreaProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/151dJ.png" rel="nofollow noreferrer">A screenshot of the display issue</a></p>