CODEWITHSUNDEEP
androidiosreact-nativetabsnative-base
user3521011
user3521011

Reputation: 1521

Customise tabs of native base

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.

Upvotes: 17

Views: 31030

Answers (6)

Muzammil
Muzammil

Reputation: 1539

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>

Upvotes: 1

Rajat Sajnani
Rajat Sajnani

Reputation: 103

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!

enter image description here

enter image description here

Upvotes: 0

Harshal
Harshal

Reputation: 8310

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'}}

Upvotes: 0

KMD
KMD

Reputation: 131

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

Upvotes: 0

Aswin Ramakrishnan
Aswin Ramakrishnan

Reputation: 3213

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?

enter image description here

Anyways, I just wanted to point this out.

Upvotes: 25

Irfan Ali
Irfan Ali

Reputation: 2258

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>

Upvotes: 67

Related Questions