Customize your own database tabs

Question

I need to configure tabs (change their background color) from my own database in my responsive native application, as shown in the figure

I already tried this style={{ backgroundColor: '#C0C0C0' }} , but I keep getting the default theme.

Answer 1

You can apply your own style to the tabs of the main base, as shown 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> 

Answer 2

If you use a component with TabHeading instead of the string header, using tabStyle , textStyle on Tab or TabHeading will not work (at least for now). You will need to style your TabHeading , Icon and Text manually.

Here is an example -

This will not 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> 

This will not work even if you move tabStyle and other items to the TabHeading component.

But it 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 an active tab style change

 <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 ☝ a solution. This sucks! (in my opinion).

So I went with the initial answer and decided not to have an icon in the tab title (which would be a better deal than delaying a state change)

I also noticed that they have tabStyle and other props for TabHeading , so maybe they are working on this, and is this just a bug at the moment?

In any case, I just wanted to point it out.

Answer 3

Just note that if you use a ScrollableTab in the renderTabBar method of the Tabs component, the above examples are partial solutions in the sense that you will have to apply the desired styles to the nested components of the Tabs and Tab component. Therefore, if you use the ScrollableTab component, I would advise you to apply styles directly to the ScrollableTab component. Check out the example below:

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

See this issue with github for more information .

Answer 4

Try:

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

or

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

or add the attribute / attribute below to the component:

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