React-native-tab-view: Center the tabs of a TabBar

[QuentinBrosse]

Hi,

I use your TabBar component with react-navigation and I am trying to center my tabs in the tab bar.

Expected behaviour

Actual behaviour

Code sample, screenshots

Here is my TabBar component call:

<TabBar
  {...props}
  onTabPress={this._handleOnPress}
  jumpToIndex={() => {}}
  renderIcon={this._renderIcon}
  renderIndicator={this._renderIndicator}
  style={styles.tabBar}
  tabStyle={styles.tabBarTab}
/>

with the corresponding styles:

tabBar: {
  backgroundColor: '#8FECC8',
  justifyContent: 'center',
},
tabBarTab: {
  borderRightWidth: 1,
  borderColor: 'white',
  width: 70,
},

What have you tried

As you can see above, I tried to add a justifyContent: 'center' to the style property of the TabBar but their is no effect.
Am I obliged to create a custom TabBar to do this kind of thing ? If it is the case, what is the best way to do it ?

Thanks a lot for your help ! :)

[satya164]

Wrap the tab bar in a view and add justify center on the view.

[QuentinBrosse]

Tanks a lot @satya164.
For those who would be interested, here is my solution:

I get this result:

with this code:

const widthTabBar = TabBarTop.tabWidth * numberOfTabs;

return (
<View style={styles.tabBarContainer}>
  <TabBar
     [...]
     style={[styles.tabBar, {width: widthTabBar}]}
     tabStyle={styles.tabBarTab}
  />
</View>
);

and the corresponding style:

tabBar: {
  shadowColor: 'transparent',
  borderBottomWidth: StyleSheet.hairlineWidth,
  borderBottomColor: 'rgba(0,0,0,0.5)',
  backgroundColor: null,
},
tabBarTab: {
  borderWidth: 0,
  width: TabBarTop.tabWidth,
},
tabBarContainer: {
  flexDirection: 'row',
  justifyContent: 'center',
}

[arun1705]

Hello,
I want to achieve the above mentioned functionality using dynamic tabs for these i tried the mentioned solution by @QuentinBrosse but i think TobTabBar component has been deprecated i am using "react-native-tab-view": "^2.14.2", please provide me the solution

[khanhubgit]

...
renderTabBar={props => (
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
tabStyle={{ width: 100}}
scrollEnabled={true}
style={{ backgroundColor: 'black'}}
labelStyle={{color: 'green', fontWeight: '500'}}
pressOpacity="0.7"
/>

)
/>