[React Native] NativeBase のTabsの線を消す

NativeBaseのTabのborderTopの線を消す

NativeBaseでTabsを使用するとTabsの上側の線がスタイルで線幅をゼロにしても消えなかったので、何か方法を探していたら、下記stackoverflowがヒントになりました。

https://stackoverflow.com/questions/51466904/how-to-remove-the-border-of-native-base-tabs

下の様にコードを書きました。

let width = Dimensions.get('window').width; //full width

<Tabs renderTabBar={()=> <ScrollableTab />}>
    <Tab heading="A"
        tabStyle={{backgroundColor: '#E91E63', width: width/2}}
        textStyle={{color: '#fff'}}
        activeTabStyle={{backgroundColor: '#E91E63', width: width/2}}>
    </Tab>
    <Tab heading="B"
        tabStyle={{backgroundColor: '#E91E63', width: width/2}}
        textStyle={{color: '#fff'}}
        activeTabStyle={{backgroundColor: '#E91E63', width: width/2}}>
    </Tab>
</Tabs>

ScrollableTabを使用するとTabの幅のデフォルトがうまく合わなかったので、Dimensionsからwidthを取得して、tabStyleで幅を指定しました。

ご参考まで。