Nativebase: [Question] How to change Tabs background color?

[pedrogarciyalopez]

Hi!

In some specific cases i want to use another background color for TabHeading (not theme color).
How can i do this?! Can someone provide a short example?

Thanks.

[shivrajkumar]

@pedrogarciyalopez If you want to change background color of TabHeading for both active and inactive state, you can just do <TabHeading style={{ backgroundColor: 'blue' }}>
Or to customize it completely, you can eject native-base theme and modify as per your requirements.
https://docs.nativebase.io/Customize.html#Customize

[pedrogarciyalopez]

@shivrajkumar

lets look at this code (from docs):

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
​export default class TabsExample extends Component {
    render() {
        return (
            <Container>
            <Header hasTabs />
            <Tabs>
                <Tab heading="Tab1">
                    <Tab1 />
                </Tab>
                <Tab heading="Tab2">
                    <Tab2 />
                </Tab>
                <Tab heading="Tab3">
                    <Tab3 />
                </Tab>
            </Tabs>
            </Container>
        );
    }
}

Let's say I want to change the backgroundColor of tab headings, just for this case, not for whole app. Can you explain on this example?

[shivrajkumar]

@pedrogarciyalopez For this case you can use tabStyle and activeTabStyle.

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
​export default class TabsExample extends Component {
    render() {
        return (
            <Container>
            <Header hasTabs />
            <Tabs>
                <Tab tabStyle={{...}} activeTabStyle={{...}} heading="Tab1">
                    <Tab1 />
                </Tab>
                <Tab  tabStyle={{...}} activeTabStyle={{...}} heading="Tab2">
                    <Tab2 />
                </Tab>
                <Tab  tabStyle={{...}} activeTabStyle={{...}} heading="Tab3">
                    <Tab3 />
                </Tab>
            </Tabs>
            </Container>
        );
    }
}

Let me know if this does the trick for you

[pedrogarciyalopez]

@shivrajkumar Yes, this is exactly what i'm looking for! Thank you so much!