I using createBottomTabNaviagtor to create tab in bottom of the page.It is working fine.But I need to display a border line in between each tabs.
Below is the code I have used.I have no idea in implementing tabBarComponent.
const Tabs = createBottomTabNavigator(
{
tab1: {
screen: tab1,
navigationOptions: {
tabBarLabel: "tab1",
tabBarIcon: ({ tintColor }) => (
<Image
source={require("./../css/images/search-vehicle.png")}
style={[CommonCss.tabIcon, { tintColor: tintColor }]}
/>
),
tabStyle: {
marginTop: Platform.OS === "ios" ? 0 : 0,
labelStyle: { fontSize: 10 }
}
}
},
tab2: {
screen: tab2,
navigationOptions: {
tabBarLabel: "tab2",
tabBarIcon: ({ tintColor }) => (
<Image
source={require("./../css/images/search-vehicle.png")}
style={[CommonCss.tabIcon, { tintColor: tintColor }]}
/>
),
tabStyle: {
marginTop: Platform.OS === "ios" ? 0 : 0,
labelStyle: { fontSize: 10 }
}
}
},
{
tabBarOptions: {
showIcon: true,
showLabel: true,
animationEnabled: true,
upperCaseLabel: false,
activeBackgroundColor: Colors.white,
inactiveBackgroundColor: Colors.greyLight,
activeTintColor: Colors.brandPrimary,
inactiveTintColor: Colors.textPrimaryDark,
swipeEnabled: true,
adaptive: true,
lazy: true,
style: {
backgroundColor: Colors.white,
borderColor: "gray",
height: 65,
},
indicatorStyle: {
backgroundColor: Colors.greyLight,
borderBottomWidth: 4,
borderColor: '#6C1D7C'
}
}
}
);
Can anyone help me to implement custom UI of tabs using tabBarComponent?
you can add the style under tabBarOptions
const Tabs = createBottomTabNavigator({
Home:{screen:Home},
}, {
tabBarOptions:{
tabStyle:{borderColor:'purple', borderWidth:4,},
}
})
hope it helps!