Customise tabs of native base

Question

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

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

Solution 1

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>

Solution 2

If you're using a component with TabHeading instead of the string heading, using the tabStyle, textStyle props on the Tab or the TabHeading won't work (atleast as of now). You'll have to style your TabHeading, Icon and Text manually.

Here is an example -

This won't work

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

It won't work even if you move tabStyle and other props to the TabHeading component.

But this will work

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
   <Tab heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

If you want active tab style switching

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}} initialPage={this.state.currentTab} onChangeTab={({ i }) => this.setState({ currentTab: i })}>
   <Tab heading={<TabHeading style={this.state.currentTab == 0 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={this.state.currentTab == 1 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

I tried ☝ solution. It sucks! (in my opinion).

So I went with the original answer and decided not to have an icon in my Tab heading (which was a better price to pay rather than dealing with the state change delay)

I also noticed that they have tabStyle and other props for TabHeading, so maybe they're working on it and this is just a bug at this point of time?

Anyways, I just wanted to point this out.

Solution 3

You can simply achieved by:

<Tabs initialPage={this.state.index} 
            tabBarBackgroundColor='#fff'
            headerTintColor= '#fff'
            tabBarUnderlineStyle = {{backgroundColor: navigationColor}}
            tabBarPosition="top"
            onChangeTab={({ i }) => this.updateTabIndex(i)}
            >
                <Tab
                    heading={
                    <TabHeading style={{backgroundColor: '#fff'}}>
                        <Image source = {require('../../assets/Images/icon.png')} 
                        style = {styles.tabIcon}/>
                    </TabHeading>}
                >
                </Tab>
</Tabs>

Comments

[user3521011]

thank you , it almost solved my problem .. I edited my question so can you please double check for me .. In fact i need to make all red , not just when it's active

[Ally Jr]

@IrfanAli Hey, i'm unable to change the background color of my tabs. I've tried your code but unfortunately nothing seems to work, the tabs still have a blue background. any advice? or was there a change in the API?

[Irfan Ali]

they excluded react-native-scrollable-tab-view dependency in native base 2.1.4.

[w--]

thank you for this. totally wasted a couple hours on this stupid shit. NativeBase really needs to step up their documentation.

[TalESid]

this will only work if and only if you are using string heading heading="head" if you're using component like heading={<TabHeading>...</TabHeading>} , it will not work at all.

[Sagar]

How to change indicator color ?

[thinklinux]

@Sagar tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}

[Kote]

delay (kind of glitch) happens only when using scrollable tabs