How to customise TabBar width for Tablets?

[vikrantnegi]

Current behaviour

Need to customize the tababr design on the tablets. Currently, they stretch full width.

Expected behaviour

I want the TabBar to have the design as follows:

Code sample

<TabBar
    {...props}
    indicatorStyle={{backgroundColor: colors.coolBlue, height: 5}}
    style={styles.tabBar}
    inactiveColor={colors.greyishBrown}
    activeColor={colors.violet}
    tabStyle={{paddingVertical: 15}}
    renderLabel={({route, focused, color}) => {
      const labelColor = focused ? colors.violet : colors.warmGrey;
      return (
        <Text style={[{color: labelColor}, styles.tabBarLabel]}>
          {route.title}
        </Text>
      );
    }}
  />

What have you tried

I've tried to use different props available like tabStyle, contentContainerStyle and style to achieve the desired design but I'm not able to replicate the same.

Your Environment

software	version
ios or android	iPad
react-native	0.63.4
react-native-tab-view	2.15.2
node	v15.8.0
npm or yarn	yarn

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.4, latest: 0.64.0)
• react-native-tab-view (found: 2.15.2, latest: 3.0.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[oliveirasWell]

@vikrantnegi did you find any solution?

[vikrantnegi]

@oliveirasWell No, I didn't find any solution yet.