0

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

5eb
  • 14,798
  • 5
  • 21
  • 65
L2Program
  • 3
  • 1
  • 2

1 Answers1

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.

5eb
  • 14,798
  • 5
  • 21
  • 65
  • Thanks for your reply :) Still, I got another question: I'm using expo and the Ionicons but still, if i set "tabBarIcon" as I did in my code, it is not getting displayed. Do you know why? – L2Program Jul 16 '20 at 09:13
  • 2
    Okay, I found the error myself: You have to use an arrow function to pass an icon to the tabbar like this: }}> – L2Program Jul 16 '20 at 09:23