Customise tabs of native base

user3521011 picture user3521011 · Mar 30, 2017 · Viewed 28.5k times · Source

I need to customise tabs (change their background color ) from native base in my react native application, like shown in the image enter image description here

I've already tried this style={{ backgroundColor: '#C0C0C0' }} but i keep getting the default theme.

Answer

Irfan Ali picture Irfan Ali · Mar 30, 2017

You can apply, your own style to native base tabs like below.

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
</Tabs>