React-native-tab-view: Centering tabs + constant tab width (and indicator width)

[bartzy]

Current behaviour

I'm trying to create the following UI for the TabBar, but am having trouble with centering the indicator below the tabs.

Expected result (ignore the icons):

Actual result (with the code below):

Expected behaviour

The indicator tab should be aligned with the tabs, even if they're centered.

Code sample

<TabBar
  {...props}
  style={{
    backgroundColor: 'white',
  }}
  tabStyle={{
    width: 80,
    marginHorizontal: 8,
  }}
  contentContainerStyle={{
    justifyContent: 'center',
  }}
  labelStyle={{
    fontSize: 13,
    fontWeight: '600',
    textTransform: 'capitalize',
  }}
  indicatorStyle={{
    height: 3,
    bottom: 6,
    backgroundColor: 'rgb(107,132,243)',
  }}
  activeColor={'rgb(107,132,243)'}
  inactiveColor={'rgb(168,170,199)'}
/>

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | either
| react-native | 0.61.4
| react-native-tab-view | 2.11.0
| react-native-gesture-handler | 1.5.2
| react-native-reanimated | 1.4.0
| node | 12.3
| npm or yarn | npm

[qzxqqa]

Have you solved the problem

[douglasdc]

To do that you can adjust the margin of the indicator like:

Behaviour

Code Sample

<TabView
  navigationState={navigationState}
  onIndexChange={index =>
    setNavigationState({ ...navigationState, index })
  }
  renderScene={renderScene}
  initialLayout={{ width: Dimensions.get("window").width }}
  renderTabBar={props => (
    <TabBar
      {...props}
      activeColor={colors.blue}
      inactiveColor={colors.lightText}
      indicatorStyle={{
        backgroundColor: colors.blue,
        marginHorizontal: 40,
        width: 140
      }}
      style={{
        backgroundColor: "white",
        shadowOffset: { height: 0, width: 0 },
        shadowColor: "transparent",
        shadowOpacity: 0,
        elevation: 0,
        marginBottom: 8
      }}
      indicatorContainerStyle={{
        width: Dimensions.get("screen").width
      }}
      contentContainerStyle={{
        justifyContent: "center"
      }}
      tabStyle={{ elevation: 0, width: 140 }}
      labelStyle={{ fontSize: 14 }}
      getLabelText={({ route }) => route.title}
    />
  )}
/>

[JungHsuan]

I have an idea.

According to the picture, you can set left to center the indicator like this:
indicatorStyle={{ width: w, left: (100 - w) / 2 }}

[aleppos]

Same issue on RTL

[pisangGoreng]

Have some issue in here

[ardanfeb]

On my case, i add margin and padding horizontal where value of paddingHorizontal twice from marginHorizontal in indicatorContainerStyle, like this :

indicatorContainerStyle={{ marginHorizontal: 30, paddingHorizontal: 60 }}

Sample :

<TabBar
  {...props}
  activeColor={'rgba(78,55,178,1)'}
  inactiveColor={'rgba(78,55,178,.5)'}
  indicatorStyle={{ backgroundColor: 'rgba(78,55,178,1)' }}
  indicatorContainerStyle={{ marginHorizontal: 40, paddingHorizontal: 80 }}
  labelStyle={[styles.txtBold, { textTransform: 'capitalize' }]}
  style={{ backgroundColor: '#fff', borderBottomColor: '#eee', borderBottomWidth: 1, elevation: 0 }}
/>

It works for me.

[muhammadtaha1998]

I have an idea.

According to the picture, you can set left to center the indicator like this:
indicatorStyle={{ width: w, left: (100 - w) / 2 }}

This is the solution. Of course 100 is just a placeholder here. You have to replace it by Dimension.get('window').width / Number of Tabs for it work responsively on all screen widths. So it would become
indicatorStyle={{ width: w, left: (Dimensions.get('window').width / Number of tabs - w) / 2 }}