Nativebase: Tabs Bottom border not changeable

[mcpracht]

Hi,

I am setting up a Tabs view and cannot seem to get rid off the bottom border of the tab bar container.

"native-base": "^2.1.1",
"react": "16.0.0-alpha.6",
"react-native": "0.43.1",

Please see the screenshot. The only thing I want to remove is the bottom border currently in color #ccc width width 1px.
Somehow it seems none of my styling attempts have worked trying to set "borderBottomColor" or "borderWidth"

[xkyii]

there is a way to do this:

1. eject theme if you do not eject before (Run node node_modules/native-base/ejectTheme.js)
2. edit appRoot/native-base-theme/components/TabContainer.js,set borderBottomWidth: 0

Note that this will affect all Tabs

[mcpracht]

Thanks! That did it.

[hunwalk]

In case of ScrollableTabBar:

Go to node_modules/native_base/dist/src/basic/tabs/ScrollableTabBar.js
Search for this: this.props.tabsContainerStyle
add a comma and then this.
{borderBottomWidth: this.props.tabsBorderBottomWidth}

It should be like that:

_react2.default.createElement(View,{
style:[
styles.tabs,
{width:this.state._containerWidth},
this.props.tabsContainerStyle,
{borderBottomWidth: this.props.tabsBorderBottomWidth}],

Now go to your code and:

<ScrollableTab tabsBorderBottomWidth={0} >

Have a nice day :)

P.S.: If you want to 0 border as default then in the same file at the bottom:

container:{
height:50,
borderWidth:0,
borderTopWidth:0,
borderLeftWidth:0,
borderRightWidth:0,
borderBottomWidth:0,
borderColor:"#ccc"},

Add borderBottomWidth:0,