1

I'm using the react native component material-bottom-tabs to create navigation tabs. On the tablet (I used as example device Pixel C 9,9") the tabs are centered in the middle like you can see in the attached picture.

So far I did not find out how to control the centering of the tabs. Does someone have an idea? My goal is that each tab have 33,33% of the width.

My app runs with the following versions:

"react-native": "0.64.1",
"@react-navigation/material-bottom-tabs": "^5.2.12",
"@react-navigation/native": "^5.5.1",

Edit:

I tried out set margin on icons like proposed here:

Alignment Issue with tabBarLabel and Icon in react-navigation-material-bottom-tabs

This worked at least but does not really help since the container for the icons seems to be quite small, so it is not possible to align the tabs perfectly with this approach.

It should be a way to increase the width of the underlying container of the icons but I did not find out yet. I tried to set styles to Tab.Screen but this does not have any effect.

<Tab.Screen
   name="TrackingList"
   style={{marginTop: -150}}
   component={TrackingList}
   options={this.getNavigationOptions(translate("footer-list-label"), 'list')}
   />

Middle centering of tabs

Jamiu S.
  • 5,257
  • 5
  • 12
  • 34
Vik
  • 324
  • 3
  • 9

1 Answers1

1

This may help but not sure

 <Tab.Screen name="Profile" component={ProfileScreen} options={{
      tabBarStyle: {
        width: '30%'
        padding: 1,
      },
    }}
    />
Jamiu S.
  • 5,257
  • 5
  • 12
  • 34
Sudharsan Palanisamy
  • 123
  • 1
  • 8
  • Thank you for the suggestion, I've tried it out but it does not have any effect. – Vik Dec 25 '21 at 12:09