react-native-router-flux tabs how to change icon of the selected tab?

Question

I'm using the navigation tabs from react-native-router-flux ^4.0.0-beta.21 and react-native-vector-icons. How do I change the icon or change the color of the icon of the selected scene when the scene is selected?

<Scene
        key='navigationTab'
        tabs
        tabBarStyle={styles.tabBarStyle}
        showLabel={false}
>
        <Scene
                key='home'
                hideNavBar
                icon={SimpleLineIcon}
                name='home'
                size={25}
                component={PostList}
                initial
        />
        <Scene
                key='profile'
                hideNavBar
                icon={FontAwesomeIcon}
                name='user-o'
                size={25}
                component={Register}
        />
</Scene>

Now Ive defined an icon like below, but how do I pass in something like a focus prop?

const iconBack = () => (
        <TouchableHightLight onPress={console.log('home')} >
                <MaterialIcon
                        name='keyboard-arrow-left'
                        size={28}
                />
        </TouchableHightLight>
);

Ephraim

thanks for all of the help from you guys! I didn't get this correctly because I passed selected into my icon choosing function. however, it should be focused. – Ephraim

Answer 1

You can receive focused as a parameter for the icon render function, then check if current icon is focused.

For example:

const SimpleLineIcon= ({ title, focused }) => {
    let image;

    switch (title) {
        case 'firstTab':
            image = focused ? require('firstTabSelected.gif') : require('firstTab.gif');
            break;

        case 'secondTab':
            image = focused ? require('secondTabSelected.gif') : require('secondTab.gif');
            break;
    }

    return ( <Image source={image} /> );
}

Cochard

Answer 2

I'm using constant to call my tabIcons

import Icon from 'react-native-vector-icons/FontAwesome'

const iconProfile = () => (
    <Icon color='#f53d3d' name='user-o' size={25} />
)

...

<Scene
   key='profile'
   hideNavBar
   icon={iconProfile}
   name='profile'
   component={Register}
/>

Stubbs

sorry. I mean "How to change the icon's style when the scene is selected?" – Ephraim

Answer 3

you can define state and then change the state accordingly: below code will help you to explain the scenario.

import Icon from 'react-native-vector-icons/FontAwesome' (you can replace this with your own icon)

note: add the code in your class it is a member function.

constructor(){
  super()
  this.state={
focused:false,
  }
}

   iconProfile = () => {
   if(this.state.focused==false)

return(
<TouchableOpacity onPress={()=>{
  this.setState({focused:true})

}}>
    <Icon color='#f53d3d' name='user-o' size={25} />
    </TouchableOpacity>
)
    else{

      
return(


  <TouchableOpacity>

  <Icon color='green' name='user-o' size={25} />
  </TouchableOpacity>
  
)


   }
}

AND FOR SCENES:

<Scene key='tabbar' tabs={true} initial showLabel={false} hideNavBar tabBarStyle={{paddingTop:15}}>
<Scene
              key="practice"
              component={practice}
              title="practice"
              hideNavBar
              icon={this.iconProfile}



   />

hint: you can also use touchableWithoutFeedback form react native (for the purpose to display no feed-back from the button)

Vergne

Answer 4

const SimpleLineIcon= ({ focused, title }) => {
    let image;

    switch (title) {
        case 'firstTab':
            image = require('firstTabSelected.gif') : require('firstTab.gif');
            break;

        case 'secondTab':
            image = require('secondTabSelected.gif') : require('secondTab.gif');
            break;
    }

    return ( <Image source={image} /> );
}

Opinion

Good answer. It could be improved by explaining how this code sample solves the problem. – Sherrer