How to change color of selected icon and label

[ZeroCool00]

is it possible to change only icon and text color when its selected? i cant find any props regarding selected tab.

[timomeh]

The render prop for renderTab and renderIcon receive the key isActive as argument, which is true when the Tab is selected.

See Usage here: https://timomeh.gitbook.io/material-bottom-navigation/usage#rendering-a-tab, especially the renderTab method in the code example of the Section "Rendering a Tab".

export default class App extends React.Component {
  render() {
    return (
      <View>
        <BottomNavigation
          renderTab={this.renderTab}
          tabs={/* ... */}
        />
      </View>
    )
  }
  ​
  renderTab = ({ tab, isActive }) => { // <- `isActive` here
    return (
      <FullTab
        key={tab.key}
        isActive={isActive} // <- `isActive` here
        label={tab.label}
        renderIcon={this.renderIcon}
      />
    )
  }
​
  renderIcon = ({ isActive }) => {  // <- `isActive` here
    return /* ... */
  }
}

Does that solve your problem?

[ZeroCool00]

i am able to change icon color when its selected:

renderIcon = (icon, isActive) => () => (
    isActive ? <Icon size={24} type='MaterialCommunityIcons' style={styles.ic} name={icon} /> :
    <Icon size={24} type='MaterialCommunityIcons' name={icon} />
  )

but no luck in label.

[timomeh]

The Tab has a prop called labelStyle, which you can use to customize the label. See the Component Specs here: https://timomeh.gitbook.io/material-bottom-navigation/api-reference/fulltab#labelstyle

renderTab = ({ tab, isActive }) => {
  return <FullTab
    labelStyle={{
      color: isActive ? 'green' : 'white'
    }}
  />
}

[ZeroCool00]

Thank you so much.. its solve now..

now its look like this.

[timomeh]

No problem. 🙂