React-native-tab-view: Solution to change icon color of the selected tab

Created on 31 Aug 2018 · 4Comments · Source: satya164/react-native-tab-view

Is the any working solution to change icon (i use only icon in a tab withoun label) color of the active tab?

I tried following to implement needed behaviour, but it doesn't work for me. All icons still in one color and not changed when tab activated.

_renderIcon = ({ route,index }) => ( <Icon name={route.icon} size={24} color={this.state.index == index ? "#1308FE" : "#8A8A8F"} /> );

My complete task is:
-always white tabbar background,
-grey inactive icons,
-blue active one.

Need help to realize this if it possible with this tabview component.

Source

flashkiller58rus

👍1

Most helpful comment

You can do something like this.

  state = {
    index: 0,
    currentRoute: 'first',
    routes: [
      { key: 'first', icon: 'ios-cart' },
      { key: 'second', icon: 'ios-filing' },
    ],
  };

  _renderIcon = ({ route }) => {
    const color = (this.state.currentRoute === route.key) ? '#15959F' : '#354751';
    return <Ionicons name={route.icon} size={24} color={color}/>
  }

  _handleIndexChange = index => {
    const currentRoute = this.state.routes[index].key;
    this.setState({
      index, currentRoute
    });
  }

andreiguzga on 10 Sep 2018

🎉2 👍2 ❤1

All 4 comments

You can do something like this.

  state = {
    index: 0,
    currentRoute: 'first',
    routes: [
      { key: 'first', icon: 'ios-cart' },
      { key: 'second', icon: 'ios-filing' },
    ],
  };

  _renderIcon = ({ route }) => {
    const color = (this.state.currentRoute === route.key) ? '#15959F' : '#354751';
    return <Ionicons name={route.icon} size={24} color={color}/>
  }

  _handleIndexChange = index => {
    const currentRoute = this.state.routes[index].key;
    this.setState({
      index, currentRoute
    });
  }

andreiguzga on 10 Sep 2018

🎉2 👍2 ❤1

@andreiguzga Thanks a lot! It works great!
Can u clarify why my code do nothing for my understanding?

flashkiller58rus on 13 Sep 2018

@andreiguzga Love you man! Thank you

WrathChaos on 20 Nov 2018

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.