Images in tabbar navigator

user_10836604 0
Viewed 3893

I have a tabBar navigator and i want to replace the icons with images, it's working but the activeTintColor won't change when focused although it's set in the navigationOptions, here is the code:

TabBarIcon component 

export default class TabBarIcon extends React.Component {
  render() {
    return (
      <Image
       source={this.props.source}
       tintColor={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
      />
    );
  }
}

Icon in tabBarNavigator

  tabBarIcon: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      tintColor={tintColor}
    />
  ),
react-navigation expo react-native tabbar javascript
3 Answers

For the image, try setting it up this way

Icon in tabBarNavigator

tabBarIcon: ({ focused }) => {
        const image = focused
        ? require('./image/HomeActive.png')
        : require('./image/HomeInactive.png')
        return (
            <Image
                source={image}
                style={{height:36, width:24}}
            />
        )
    }

and set activeTintColor and inactiveTintColor under tabBarOptions

user_108286010

I'm not sure what Colors is or where it is passed, is it a global variable? try this:

export default class TabBarIcon extends React.Component {
  onTintColor = (focused) => {
   if (focused) {
     return Colors.tabIconSelected  
   } 
   return Colors.tabIconDefault
  }
  render() {
    return (
      <Image
       source={this.props.source}
       tintColor={this.props.focused && 
         this.onTintColor(this.props.focused)
       }/>
    );
  }
}
user_90637720

What are you trying to do? If you want to use the TintColor ptoperty described here https://reactnavigation.org/docs/en/bottom-tab-navigator.html , you also need to use activeTintColor and inactiveTintColor . That works for labels, if you want to use Images, then there is no need to pass the tintcolor since you are overriding it in your component

TabBarIcon component

    export default class TabBarIcon extends React.Component {
  render() {
    return (
      <Image
       source={this.props.source}
       tintColor={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault} //you are setting tintcolor based on this.props.focused
      />
    );
  }
}

Thats good 

tabBarIcon: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      //tintColor={tintColor} //there is no need for this
    />
  ),
user_102056290
Related