How to center tabs in MaterialTopTabNavigator in ReactNative - react-native

Question

I added tabStyle: { width: "auto" } to fit the tabs of MaterialTopTabNavigator to the width of the text, but by adding this, the tabs are moved to the left side as shown in the image below.
Tabs are too far to the left.
The answer to this question says to remove tabStyle, but if I remove tabStyle, all tabs will have the same width.
I thought about using my own component in the tabBar, but I gave up because I couldn't reproduce the animation when moving the tab.
I thought about using paddingHorizontal to force it to be centered, but I decided against it because it might not be centered if the font size is changed in the OS.
If you know more about this, please let me know how to solve it.
The design I want to implement (edited in Paint)
import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();
const Page = () => {
return (
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 14,
fontWeight: "bold",
},
activeTintColor: "#ffffff",
inactiveTintColor: "#000000",
pressOpacity: 1,
indicatorStyle: {
backgroundColor: "black",
height: 30,
borderRadius: 30,
top: 9,
},
tabStyle: {
width: "auto",
},
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Message" component={Message} />
<Tab.Screen name="Store" component={Store} />
</Tab.Navigator>
);
};
export default Page;

Answer 1

I think this should definitely work. If not, let me know.
import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();
const Page = () => {
return (
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 14,
fontWeight: "bold",
},
activeTintColor: "#ffffff",
inactiveTintColor: "#000000",
pressOpacity: 1,
indicatorStyle: {
backgroundColor: "black",
height: 30,
borderRadius: 30,
top: 9,
},
tabStyle: {
width: "auto",
},
}}
>
<View style={{flexDirection:"row", justifyContent:"center"}}>
<View>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Message" component={Message} />
<Tab.Screen name="Store" component={Store} />
</View>
</View>
// If the above does not work than use the below one and comment the above part
// <View style={{flexDirection:"row", justifyContent:"center"}}>
// <Tab.Screen name="Home" component={Home} />
// <Tab.Screen name="Message" component={Message} />
// <Tab.Screen name="Store" component={Store} />
// </View>
</Tab.Navigator>
);
};

Answer 2

You can add tabBarContentContainerStyle attribute below, it works well for me：
<Tab.Navigator
initialRouteName="Attention"
screenOptions={{
lazy: true,
tabBarPressOpacity: 1,
tabBarPressColor: 'rgba(0,0,0,0)',
tabBarInactiveTintColor: Style.unActiveText,
tabBarActiveTintColor: Style.mainColor,
tabBarContentContainerStyle: {
alignItems: 'center',
justifyContent: 'center',
},
tabBarIndicatorStyle: {
display: 'none',
},
tabBarItemStyle: {
width: 70,
paddingHorizontal: 0,
position: 'relative',
padding: 0,
height: 45,
},
tabBarLabelStyle: {
fontSize: 15,
},
tabBarStyle: {
width: 'auto',
height: 45,
borderBottomColor: 'red',
backgroundColor: '#fff',
},
}}>
</Tab.Navigator>

Answer 3

Just apply those styles to screenOptions parameter in your navigator and you're done:
tabBarStyle: {
alignSelf: "center",
flexDirection: "row",
},
tabBarItemStyle: {
width: "auto",
}