react-native-tab-view width not getting 100% with two tab bars - react-native

Question

When two custom tab bars are used in react-native-tab-view, the width is not getting 100%, ie; in the image shown, there is an extra space after the 2nd tab(On Riding). When more than 2 tabs are there, it works fine. What I expect is to get 50% width for both tab bars without any red space. Screenshot of tab view
---------- TabView
<TabView
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{width: layout.width}}
renderTabBar={(props) => (
<TabBar
{...props}
scrollEnabled
style={{
borderRadius: 20,
elevation: 0,
backgroundColor: 'red',
}}
renderIndicator={() => null}
onTabLongPress={(scene) => {
const {route} = scene;
props.jumpTo(route.key);
}}
renderTabBarItem={({route, focused, color, scene}) => {
return (
<Pressable
onPress={() => {
props.jumpTo(route.key);
}}
style={[
route.key === props.navigationState.routes[index].key
? Styles.tabBarActive
: Styles.tabBarInActive,
Styles.tabBar,
]}>
<Text
style={[
route.key === props.navigationState.routes[index].key
? Styles.activeTabText
: Styles.inActiveTabText,
]}>
{route.title}
</Text>
</Pressable>
);
}}
/>
---------- Styles.js
tabBar: {
paddingHorizontal: '5%',
paddingVertical: '2%',
alignItems: 'center',
flex: 1,
},
tabBarActive: {
borderRadius: RFValue(25),
backgroundColor: Colors.AppPrimaryThemeColor,
justifyContent: 'center',
},
tabBarInActive: {
backgroundColor: 'green',
justifyContent: 'center',
},
activeTabText: {
color: Colors.AppMainColor,
fontFamily: Fonts.FONT_BOLD,
fontSize: RFPercentage(1.8),
},
inActiveTabText: {
color: Colors.AppPrimaryThemeColor,
fontFamily: Fonts.FONT_MEDIUM,
fontSize: RFPercentage(1.6),
},

Answer 1

Do you really need to scroll between the tabs?
if not, try deleting "ScrollEnabled".
renderTabBar={(props) => (
<TabBar
{...props}
style={{
borderRadius: 20,
elevation: 0,
backgroundColor: 'red',
}}