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

Question

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 ?

Answer 1

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'
  }
})