Can't custom Tab bar native-base

Question

I'm trying to custom the colors of my tab bar, but the colors aren't changing, I still have the default blue on my tab bar. I'm using the 2.1.5 version of native-base.

I followed the examples on the V.2.0 documentation of native-base, used properties like tabBarBackgroundColor either on <Tabs> or <Tab> but got no results.

I have this code :

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs, Header, TabHeading, Icon, Text } from 'native-base';
import PageTwo from '../pages/PageTwo';

export default class PageThree extends Component {
    render() {
        return (
            <Container>
              <Header hasTabs/>
              <Tabs
               textStyle='#ED9D19'
               tabBarUnderlineStyle='#ED9D19'
               tabBarIconContainerStyle='#ED9D19'
               tabBarBackgroundColor='white'>
                  <Tab
                  tabBarBackgroundColor={{backgroundColor : '#ED9D19'}}
                   heading={ <TabHeading><Icon name="camera" /><Text>Camera</Text></TabHeading>}>
                    <PageTwo/>
                  </Tab>
                  <Tab heading={ <TabHeading><Text>No Icon</Text></TabHeading>}>

                  </Tab>
                  <Tab heading={ <TabHeading><Icon name="apps" /></TabHeading>}>

                  </Tab>
              </Tabs>
            </Container>
        );
    }
}

As you can see, I tried to use different properties but no one seems to work, except for tabBarPosition which does.

score 1 · Answer 1 · answered Jul 10 '19 at 07:18

I have tried this and it worked for me , i have added backgroundColor to TabHeading style={{backgroundColor : '#1B2443'}}

<Tab heading={<TabHeading style={{backgroundColor : '#1B2443'}}>
    <Text style={styles.textColor}>PRIVATE KEY</Text></TabHeading>}>
    <Text>Change tab color</Text>
</Tab>

score 0 · Accepted Answer · answered Jun 14 '17 at 13:49

I managed to resolve my problem by bringing a theming file, as suggested in the documentation, here is my code :

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs, Header, TabHeading, Icon, Text, StyleProvider } from 'native-base';
import PageTwo from '../pages/PageTwo';
import getTheme from '../native-base-theme/components';
import commonColor from '../native-base-theme/variables/commonColor';

export default class PageThree extends Component {
    render() {
        return (
          <StyleProvider style={getTheme(commonColor)}>
            <Container>
              <Header hasTabs/>
              <Tabs>
                  <Tab heading={ <TabHeading><Icon name="camera" /><Text>Camera</Text></TabHeading>}>
                    <PageTwo/>
                  </Tab>
                  <Tab heading={ <TabHeading><Text>No Icon</Text></TabHeading>}>

                  </Tab>
                  <Tab heading={ <TabHeading><Icon name="apps" /></TabHeading>}>

                  </Tab>
              </Tabs>
            </Container>
          </StyleProvider>
        );
    }
}

Right now, I just have to change the values in the commonColor.js file that I need.

However, I still don't understand why I can't change the properties directly in my code...

Which variables did u change for tab color? – Devansh sadhotra Jul 20 '17 at 09:28 — Devansh sadhotra, Jul 20 '17 at 09:28

Can't custom Tab bar native-base

2 Answers2