CODEWITHSUNDEEP
androidiosreact-nativereact-navigationreact-native-safe-area-view
L2Program
L2Program

Reputation: 3

React-Native Tab Navigation Bar cut off

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

Upvotes: 0

Views: 4901

Answers (1)

bas
bas

Reputation: 15462

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.

Upvotes: 1

Related Questions