CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Janaki Narayanan
Janaki Narayanan

Reputation: 543

Need implement a border between tabs using react navigation

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?

Upvotes: 3

Views: 2991

Answers (2)

marsman
marsman

Reputation: 75

You can now use tabBarItemStyle. To prevent having a border on the very right, you can add negative margin on the container:

const HomeTabs = createBottomTabNavigator({
  screens: {
    Home: HomeScreen,
    Tab2: TabTwoScreen,
    Tab3: TabThreeScreen,
  },
  screenOptions: {
    tabBarStyle: {
      marginRight: -1, // add negative margin here to prevent last divider
    },
    tabBarItemStyle: {
      borderRightWidth: 1,
      borderColor: "black",
    },
  },
});

Upvotes: 0

displayname
displayname

Reputation: 1074

you can add the style under tabBarOptions 

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

hope it helps!

Upvotes: 4

Related Questions