I need top tab navigation like expected output.I used React native navigation material top navigation.I couldn't do centre the label on the top tab navigator and active indicator. This is my code
return (
<Tab.Navigator initialRouteName="HomeScreen"
screenOptions={{tabBarActiveTintColor:'white',
tabBarIndicatorStyle:{backgroundColor:'black'},
tabBarScrollEnabled: true,
tabBarLabelStyle: {fontSize: 12,color: 'black',fontFamily:"Regular",},
tabBarItemStyle: {},
tabBarStyle: {elevation:0,width: "auto",},
}}>
<Tab.Screen
name={'HomePage'}
component={HomePage}
options={{
tabBarLabel: 'Home',
headerShown: false,
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name={'Profile'}
component={Profile}
options={{
tabBarLabel: 'Profile',
headerShown: false,
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="book-open-blank-variant"
color={color}
size={size}
/>
),
}}
/>
</Tab.Navigator>
);
};