CODEWITHSUNDEEP
androidandroid-layoutreact-nativetabsreact-navigation
Matt
Matt

Reputation: 8962

Part of bottom tab bar is hidden

I use React Navigation for routing and navigation in a react native project. I have a bottom tab bar component, which is partially hidden in Android.

TabNavigator

...    
{
        lazy: true,
        tabBarPosition: 'bottom',
        animationEnabled: false,
        initialRouteName: 'Schedule',
        swipeEnabled: false,
        tabBarOptions: {
          showIcon: true,
          showLabel: true,
          allowFontScaling: true,
          upperCaseLabel: false,
          activeTintColor: Colors.white,
          inactiveTintColor: Colors.darkGrey,
          indicatorStyle: {
            // backgroundColor: 'transparent',
          },
          labelStyle: {
            fontSize: 15,
            fontWeight: '500',
          },
          style: {
            backgroundColor: Colors.darkBlue,
            height: 50,
          },
          iconStyle: {
            height: TAB_ICON_SIZE,
            width: TAB_ICON_SIZE,
            padding: 0,
            margin: 0,
          },
        },
      },

enter image description here

Upvotes: 0

Views: 388

Answers (2)

Matt
Matt

Reputation: 8962

There was margin: 8 for labelStyle.

Changing labelStyle fixed that:

labelStyle: {
        fontSize: 15,
        fontWeight: '500',
        margin: 2,
      },

Upvotes: 0

csath
csath

Reputation: 1316

Add following alignSelf property to iconStyle and make sure that TAB_ICON_SIZE is not greater that 24. Because it's following material guid designs in react-native android.

iconStyle: {
        height: TAB_ICON_SIZE,
        width: TAB_ICON_SIZE,
        padding: 0,
        margin: 0,
        alignSelf: 'center'
      }

Upvotes: 1

Related Questions