NativeBase: tab style not working

I have gone through these following points

[done] Check latest documentation: https://docs.nativebase.io/
[done] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
[done] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
[not related] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
[no] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
[no] For queries related to theme, check [Theme Variables]

version

node: 10.9.0
npm: 6.2.0
"react": "16.4.1",
"react-native": "0.56.0",
"native-base": "^2.8.0"

Expected behaviour:

style should be apply to TabHeading

Actual behaviour

style not working for TabHeading

Steps to reproduce

i am applying background color but its not working

screen shot 2018-09-19 at 6 01 14 pm

you can see in image there is not red or green color as i expect.

<Tabs>
     <Tab
          heading={
               <TabHeading
                        activeTabStyle={{ backgroundColor: 'green' }}
                        tabStyle={{ backgroundColor: "red" }}
               >
                     <Text>Comment</Text>
               </TabHeading>}>
           <Comment comment={comments}/>
     </Tab>
      <Tab 
             heading={
                     <TabHeading 
                            activeTabStyle={{ backgroundColor: 'green' }} 
                            tabStyle={{ backgroundColor: "red" }}
                     >
                          <Text>History</Text>
                      </TabHeading>}>
                 <History comment={comments} stackUsers={this.props.stackUsers} />
       </Tab>
</Tabs>

Is the bug present in both iOS and Android or in any one of them?

this issue is in IOS, not sure about android

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 26 (10 by maintainers)

Most upvoted comments

@ZeroCool00 I found a solution to my problem, gonna post here case anyone else needs, check if it solves yours.

     <Tabs tabBarUnderlineStyle={{ backgroundColor: "yellow" }}>
          <Tab
            heading={
              <TabHeading style={{ backgroundColor: "green" }}>
                <Text>Camera</Text>
              </TabHeading>
            }
          >
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
          <Tab heading="Tab3">
            <Tab3 />
          </Tab>
        </Tabs>

+13

adrianolsk on Oct 3, 2018

This worked for me


<Tabs>
  <Tab
    heading="Your Projects"
    activeTabStyle={{ backgroundColor: '#201D41' }}
    tabStyle={{ backgroundColor: '#FFFFFF' }}
  >
    <Tab1 />
  </Tab>
  <Tab
    heading="Your Proposals"
    activeTabStyle={{ backgroundColor: '#201D41' }}
    tabStyle={{ backgroundColor: '#FFFFFF' }}
  >
    <Tab2 />
  </Tab>
</Tabs>

linux08 on Mar 5, 2019

now your comment looks messy too… well thank you for your time.

ZeroCool00 on Sep 20, 2018

i still cannot add styling to the activeTab most of the props listed in the documentation does not work at all.

habeebtheprogrammer on Jan 26, 2020

My solution

      <Tabs tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}>
        <Tab
          heading="User"
          activeTextStyle={{ color: '#FFF', fontWeight: 'bold' }}
          textStyle={{ color: '#707070', fontSize: 12 }}
          tabStyle={{ backgroundColor: '#FAFAFA' }}
          activeTabStyle={{ backgroundColor: '#129378' }}
        >
          <ProfileTab />
        </Tab>
        <Tab
          heading="Payment"
          activeTextStyle={{ color: '#FFF', fontWeight: 'bold' }}
          textStyle={{ color: '#707070', fontSize: 12 }}
          tabStyle={{ backgroundColor: '#FAFAFA' }}
          activeTabStyle={{ backgroundColor: '#129378' }}
        >
          <PaymentTab />
        </Tab>
      </Tabs>

siliconavengers on Sep 10, 2019

I understand I can use the customiser to set the default active tab heading background. But there is no property to set the background of the active heading tab per screen / component, without using a custom component for the heading entirely.

Tabs contain props for almost everything style wise - except the active heading background…

It would be great to be flexible on this

Cookizza on Sep 11, 2019

My last comment has already answered this before you ask

SupriyaKalghatgi on Sep 20, 2018

Its not mandatory to use NativeBase Customizer before you customize NativeBase components It will help you know if its possible or not, also gives you preview of how our customization would look into your app

SupriyaKalghatgi on Sep 20, 2018

I have done my best to explain you. Well you can wait over this week, we are coming up with some tutorials about theme. To help solve issue like yours

SupriyaKalghatgi on Sep 20, 2018