React-native-tab-view: TabView Font color changing issue

Created on 19 Jan 2017 · 6Comments · Source: satya164/react-native-tab-view

we tried using labelStyle for changing font color, background color and font type but we couldn't
can you help us with the same?
Thanks

Source

keerthanarbt

Most helpful comment

@keerthanarbt If you need more control over labels in the <TabBarTop> element, simply construct a component template and pass it into the inherited prop renderlabel:

class SomeClass extends Component {
  ...
  renderLabel = ({route, index}) => (
   <View style={{ backgroundColor: 'rgb(0,0,0)'}}>
       <Text style={{fontFamily: 'Arial', color}}>{route.title}</Text>
   </View>
  )
  renderHeader = (props) => <TabBarTop {...props} renderLabel={this.renderLabel} />
  render() {
    return(
      <TabViewAnimated renderHeader={this.renderHeader} />
    )
  }
}

Hope this helps!

jkhedani on 19 Jan 2017

👍3 ❤1 🎉1

All 6 comments

@keerthanarbt If you need more control over labels in the <TabBarTop> element, simply construct a component template and pass it into the inherited prop renderlabel:

class SomeClass extends Component {
  ...
  renderLabel = ({route, index}) => (
   <View style={{ backgroundColor: 'rgb(0,0,0)'}}>
       <Text style={{fontFamily: 'Arial', color}}>{route.title}</Text>
   </View>
  )
  renderHeader = (props) => <TabBarTop {...props} renderLabel={this.renderLabel} />
  render() {
    return(
      <TabViewAnimated renderHeader={this.renderHeader} />
    )
  }
}

Hope this helps!

jkhedani on 19 Jan 2017

👍3 ❤1 🎉1

Nope! the text is getting hidden and cannot able to see the label..

keerthanarbt on 19 Jan 2017

@keerthanarbt Do you mind sharing some of your code base so I can help you troubleshoot what's going on? I was able to completely revamp the styles of the tab to fit the needs of my project no problem.
screen shot 2017-01-19 at 11 14 33 am

jkhedani on 19 Jan 2017

Does anyone have idea that how to change the current tab color.
<TabBarTop {...props} style={styles.tabViewTop} renderLabel={this._renderLabel(props)} indicatorStyle={styles.indicator} scrollEnabled={false} renderIcon={this._renderIcon} renderIndicator={this._renderIndicator} tabStyle={styles.tab} />;

I want to change the current tab color.

Msspl-PrashenjeetRoy on 25 Jan 2017

We have problem with current tab color too, We want the background color tab is white. Is there a way to achieve this without changing the backgroundColor style of TabBar.js in the node_modules?

tabBar: { backgroundColor: '#2196f3', elevation: 4, shadowColor: 'black', shadowOpacity: 0.1, shadowRadius: StyleSheet.hairlineWidth, shadowOffset: { height: StyleSheet.hairlineWidth, }, zIndex: 1, },