CODEWITHSUNDEEP
react-native
Ritu Sharma
Ritu Sharma

Reputation: 77

React Native Tab View : How to change text color on change of tab

I am using react-native-community/react-native-tab-view is there any method to change the tab text color on change of tab.Right now its just lighten the text color but wanted to change it to a different color ?

Upvotes: 4

Views: 5810

Answers (2)

Princewill Iroka
Princewill Iroka

Reputation: 546

To change the text color on your TabBar, it should look like this: 
<TabBar
     {...props}
     indicatorStyle={{ backgroundColor: '#eeaf3b' }}
     style={{ backgroundColor: '#282828', height: 55 }}
     indicatorStyle={{ backgroundColor: '#eeaf3b', height: 5 }}
     renderLabel={this.renderLabel} />

Then renderLabel function should look like this:

renderLabel = ({ route, focused, color }) => {
return (
  <View>
    <Text
      style={[focused ? styles.activeTabTextColor : styles.tabTextColor]}
    >
      {route.title}
    </Text>
  </View>
)
}

Then your style should look like this:

const styles = StyleSheet.create({
  activeTabTextColor: {
    color: '#eeaf3b'
  },
  tabTextColor: {
    color: '#ccc'
  }
})

Upvotes: 3

Mμ.
Mμ.

Reputation: 8542

In that case, try passing a callback to the renderLabel property in your TabView like so:

_renderLabel = (scene) => {
  const myStyle = { /* Defined your style here.. */ }
  // grab the label from the scene. I'm not really sure 
  // about the structure of scene, but you can see it using console.log
  const label = scene.label

  return (
    <Text style={myStyle}>{label}</Text>
  );
}

_renderHeader = () => {
  return <TabBar renderLabel={this._renderLabel} />
}

Upvotes: 0

Related Questions