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.

Irfan Ali · Accepted Answer · 2017-03-30T09:47:07.100

67

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>

edited Mar 30 '17 at 09:47

answered Mar 30 '17 at 09:38

Irfan Ali

2,238
1
23
22

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 – user3521011 Mar 30 '17 at 09:44
1

@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? – Ally Jr Jun 07 '17 at 07:58
they excluded react-native-scrollable-tab-view dependency in native base 2.1.4. – Irfan Ali Jun 07 '17 at 09:33
1

this will only work if and only if you are using string heading `heading="head"` if you're using component like `heading={...}` , it will not work at all. – TalESid Jul 09 '19 at 10:36
1

How to change indicator color ? – Sagar Oct 17 '19 at 10:29
@Sagar `tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}` – thinklinux Oct 29 '19 at 12:55

score 25 · Answer 2 · edited Jun 20 '20 at 09:12

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.

thank you for this. totally wasted a couple hours on this stupid shit. NativeBase really needs to step up their documentation. — w--, Aug 06 '18 at 10:57
delay (kind of glitch) happens only when using scrollable tabs — Kote, Apr 27 '20 at 12:59

score 1 · Answer 3 · answered Dec 12 '19 at 12:37

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>

score 0 · Answer 4 · answered Mar 31 '19 at 00:08

Just note that if you are using the ScrollableTab in the renderTabBar method of the Tabs component then the above examples are partial solutions in that you would have to apply the desired styles on the nested components of the Tabs and Tab component. So if you are using the ScrollableTab component, I would suggest you apply the styles directly to the ScrollableTab component. Check the example below:

<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: "your colour" }} />}>
 Your Tab Content
</Tabs>

For more reference, see this github issue

score 0 · Answer 5 · answered Sep 06 '19 at 13:48

Try:

<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}} 
/>

or

<TabHeading style={{
                backgroundColor: 'some_color',
                borderBottomWidth: 0,
}}>

or add below prop/attribute to component:

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

score 0 · Answer 6 · answered Nov 26 '19 at 02:18

Thanks for Aswin Ramakrishnan answer just modified a bit more :)

If you want active tab style switching (for looping)

<Tabs
  tabBarUnderlineStyle={{ borderBottomWidth: 2 }}
  initialPage={this.state.currentTab}
  onChangeTab={({ i }) => this.setState({ currentTab: i })}
>
  {dataArray.map((item, key) => {
    return (
      <Tab
        tabStyle={{
          backgroundColor: Colors.defaultColor,
          color: Colors.grayText
        }}
        activeTabStyle={{
          backgroundColor: Colors.defaultColor
        }}
        heading={
          <TabHeading
            textStyle={styles.inactiveTextStyle}
            style={
              this.state.currentTab === key
                ? styles.activeTabStyle
                : styles.inactiveTabStyle
            }
          >
            <Text
              style={
                this.state.currentTab === key
                  ? styles.activeTextStyle
                  : styles.inactiveTextStyle
              }
            >
              {item.title}
            </Text>
          </TabHeading>
        }
      >
        {this._renderContent(item)}
      </Tab>
    );
  })}
</Tabs>;

I tried ☝ solution. It worked for me!

Customise tabs of native base

6 Answers6

This won't work

But this will work

If you want active tab style switching

If you want active tab style switching (for looping)