React-Native Tab Navigation Bar cut off

Question

I'm currently using the material-bottom-tabs to implement navigation in my mobile app.

For some odd reason, it isn't displayed correctly but cut off at the bottom of my screen.

This happens regardless of whether I activate gesture control (so the Android built-in navigation bar disappears) or not.

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.

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.

This is my 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 ? (
      <Stack.Screen name="LogIn" component={LoginScreen} />
    ) : (
      <SafeAreaProvider>
        <NavigationContainer>
          <SafeAreaView>
            <Tab.Navigator style={{ paddingBottom: '10%' }}>
              <Tab.Screen
                name="Current Schedule"
                component={CarouselPage}
                options={{
                  tabBarLabel: 'Current\nSchedule',
                  tabBarIcon: <Ionicons name="ios-calendar" size={20} />,
                }}
              />
              <Tab.Screen name="Resources" component={ResourceScreen} />
              <Tab.Screen
                name="Schedule Selection"
                component={ScheduleSelectionScreen}
              />
              <Tab.Screen name="About" component={AboutScreen} />
            </Tab.Navigator>
          </SafeAreaView>
        </NavigationContainer>
      </SafeAreaProvider>
    );
  }
}

export default App;

A screenshot of the display issue

Answer 1

Try this:

// ...
<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen
      name="Current Schedule"
      component={CarouselPage}
      options={{
        tabBarLabel: 'Schedule',
        tabBarIcon: ({}) => (
            <Ionicons name="ios-calendar" size={20} />
        ),
      }}
    />
    // ...
  </Tab.Navigator>
</NavigationContainer>
// ...

The bar isn't cut off. The reason the text was cut off was, because you put a newline in the tabBarLabel text. I recommend to choose shorter words for your tab labels.

The documentation does not seem to provide an option to increase the padding for the label to allow for longer text.