Need implement a border between tabs using react navigation

Question

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?

Answer 1

you can add the style under tabBarOptions

const Tabs = createBottomTabNavigator({
  Home:{screen:Home},
}, {
  tabBarOptions:{
   tabStyle:{borderColor:'purple', borderWidth:4,},
  }
})

hope it helps!