Menu
In react navigation v5, when implementing a materialTopTabNavigator, how can I remove the bottom horizontal border separating the tab menu and individual tab pages?
I've tried borderWidth, borderBottomWidth, borderTopWidth in tabBarOptions.style to no avail.
616
(React Nav ver6. x) add this code snipet "options={{headerShown: false}}" in "<Tab. Screen />". It will delete header of each tab you add into.
Add icons to the tab bar To add icons to each tab, first import the Icon component from react-native-vector-icons library inside the navigation/TabNavigator/index. js file. For this example, let's use AntDesign based icons. // after other import statements import Icon from 'react-native-vector-icons/AntDesign';
At times, the UI of the screen might not require a header border or shadow at all. In such cases, you can always customize the screenOptions by adding the property headerShadowVisible and setting it to false .
screenOptions={{
tabBarStyle: {
borderTopWidth: 0
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
