[TabBarIOS] Icon doesn't rerender on state change

[jlsandri]

An overview: I'm using a conditional statement on the icon prop and title prop of a TabBarIOS item. When the conditional value changes (through a state update) the title will rerender but not the icon. Is this a known bug?

I've included an example of the code below. I am updating the state of the TabBar in a seperate function.

<TabBarIOS.Item
    title=""
    selected={this.state.selectedTab === 'pomodoro'}
    icon={this.state.timerActive ? require('image!Play') : require('image!Pause') }
    onPress={() => {
        this.setState({
           selectedTab: 'pomodoro',
        });
    }}>
    <Pomodoro timerActive={this.state.timerActive}/>
</TabBarIOS.Item>

[facebook-github-bot]

Hey kilgoremaskreplica, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome well-written issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[skevy]

@kilgoremaskreplica could you throw together a quick example on https://rnplay.org/ for this?

[jlsandri]

Hey Skevy, thanks for the reply.

Rnplay doesn't support requiring assets from within the IOS bundle so unfortunately I can't replicate this issue using that site.

However, after going through the process I have discovered this icon rerendering issue is directly tied to requiring an image from the IOS bundle. For instance this works:

systemIcon={this.state.timerActive ? 'contacts' : 'bookmarks' }

but this does not:

icon={this.state.timerActive ? require('image!Play') : require('image!Pause') }

I am happy to setup a repo for you to have a look at if that helps.

[skuridin]

I think I have a related issue.

export default class TabBarItem extends Component {
  render() {
    let icon = `ios-${this.props.icon}`;

    if (!this.props.selected) icon += '-outline';

    return (
      <Icon.TabBarItem
        iconName={icon}
        title={this.props.title}
        onPress={this.props.select}
        selected={this.props.selected}
      >
        <View></View>
      </Icon.TabBarItem>
    );
  }
}

UPD: Fixed by adding key={icon} to the <Icon.TabBarItem />

[christopherdro]

@kilgoremaskreplica Could you try @skuridin solution and see if that works for you?

[satya164]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @satya164 says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.