Nativebase: Unable to change Tabs border bottom color

[feelinc]

react-native, react and native-base version

"native-base": "^2.1.2",
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",

Expected behaviour

Able to change the bottom border color.

Actual behaviour

The bottom border color always appear in white color.

Steps to reproduce (code snippet or screenshot)

const tabProps = {
  underlineStyle: {borderColor: '#f65857'}
};

return (
  <Tabs>
    <Tab heading="Tab 1" {...tabProps}>
      <Tab1 />
    </Tab>
    <Tab heading="Tab 2" {...tabProps}>
      <Tab2 />
    </Tab>
    <Tab heading="Tab 3" {...tabProps}>
      <Tab3 />
    </Tab>
  </Tabs>
);

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Only tested in Android.

Any other additional info which would help us debug the issue quicker.

None.

[shivrajkumar]

@feelinc it should be tabBarUnderlineStyle: { backgroundColor: '#f65857' }
Let me know if this works

[feelinc]

@shivrajkumar still not working. re-compiled and restart the npm, but still not working.

[shivrajkumar]

@feelinc tabBarUnderlineStyle needs to be applied to <Tabs> not <Tab>

[feelinc]

applied to not?

[shivrajkumar]

Ah! my bad.
Applied to <Tabs> not <Tab>

[feelinc]

Thanks a lot, it's working :)

[kurniawanj26]

@shivrajkumar how do I implemented the tabBarUnderlineStyle ?
<Tabs>....</Tabs>

[prasanthlrb]

[skraloupak]

@prasanthlrb Hi, you have to paste it to braces { } and use = after tabBarUnderlineStyle
example:
<Tabs tabBarUnderlineStyle={{ backgroundColor: '#f65857' }}>

[impradeepsaini]

Hi

tabBarUnderlineStyle works for the active tab but for the rest of tabs, how to change their body color?

[SupriyaKalghatgi]

Check NativeBase Docs https://docs.nativebase.io/