NativeBase tabs unable to customise borderBottomColor

Question

I have few tabs defined as below:

<Tabs renderTabBar={() => <ScrollableTab />}>
      <Tab heading="Tab1" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab2" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab3" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab4" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
      <Tab heading="Tab5" tabStyle={styles.tabStyling} activeTabStyle={styles.activeTabStyle} textStyle={styles.tabTextStyle} activeTextStyle={styles.activeTabTextStyle} />
</Tabs>

With below style:

const styles = StyleSheet.create({
  tabStyling: {
    backgroundColor: '#37b372'
  },
  activeTabStyle: {
    backgroundColor: '#37b372',
    borderColor: 'white',
    borderBottomColor: 'red'
  },
  tabTextStyle: {
    color: 'black'
  },
  activeTabTextStyle: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: 20
  }
});

on activeTabStyle, I've defined borderBottomColor: 'red' but it still giving me default blue color instead

And below is the interface from NativeBase

interface Tab {
  heading: React.ReactElement<TabHeading> | string;
  tabStyle?:ReactNative.ViewStyle | Array<ReactNative.ViewStyle>;
  activeTabStyle?: ReactNative.ViewStyle | Array<ReactNative.ViewStyle>;
  textStyle?: ReactNative.TextStyle;
  activeTextStyle?: ReactNative.TextStyle;
}

So activeTabStyle should be nothing more than just basic ReactNative.ViewStyle

score 1 · Accepted Answer · answered Apr 11 '18 at 20:16

The best way would be to use tabBarUnderlineStyle as mentioned here, since it is a property of Tabs and not Tab.

For example

<Tabs tabBarUnderlineStyle={{ backgroundColor: 'YOUR_SAMPLE_COLOR' }} renderTabBar={() => <ScrollableTab /> }>
  {... // Rest of the data}                   
</Tabs>

Also another thing to note is your style is being applied but it is hidden below the default border. To notice it, you can add

 activeTabStyle: {
    backgroundColor: '#37b372',
    borderColor: 'white',
    borderBottomColor: 'red',
    borderBottomWidth: 10
  },

NativeBase tabs unable to customise borderBottomColor

1 Answers1