Update rendered TabBarItem iconName

I have a scenario where I need to update the iconName of a TabBarItem dynamically triggered during a user's interaction. I'm binding the name to a state based value to handle the update, however, the icon never changes. Here's my TabBarItem...

<TabBarItem
   iconName={this.state.feedReturn ? 'align-bottom' : 'home'}
   selectedIconName={this.state.feedReturn ? 'align-bottom' : 'home'}
   selected={this.state.selected === 'feed'}
   badge={AlertStore.feed === 0 ? undefined : AlertStore.feed}
   ...
/>

I dug into the node modules a little and found where the package is generating the icons based on props.

./lib/create-icon-set.js

updateIconSources: function(props) {
  var size = this.props.iconSize || TAB_BAR_ICON_SIZE;
  if(props.iconName) {
    getImageSource(props.iconName, size).then(icon => this.setState({ icon }));
  }
  if(this.props.selectedIconName) {
    getImageSource(props.selectedIconName, size).then(selectedIcon => this.setState({ selectedIcon }));
  }
}

This function gets called inside componentWillReceiveProps(), however, as you can see it's basing its icon decision on this.props rather than a parameter or state.

I modified this by making updateIconSources take a props param. This is set to this.props in componentDidMount(), and nextProps in componetWillReceiveProps().

I tested the code and I'm now getting my desired result. Do you see any issues with this approach, and if not, would you accept a PR to incorporate this fix in the master code?

Thanks!

oblador / react-native-vector-icons

Update rendered TabBarItem iconName #94