React Native: Force Reload TabBarIOS.item

I have a TabBar based application in React Native. Multiple tabs use the same data source (AsyncStorage). If I update the data in one tab and open another, the old data is displayed. I cannot figure out how to force a reboot every time an item becomes active.

  • FavoritesView: display saved data
  • ExploreView: Manipulating Stored Data
  • FavoritesView: expired data is displayed (-> force reboot)

    <TabBarIOS.Item
    title="Explore"
    icon={{uri:'ic_explore'}}
      selected={this.state.selectedTab === 'exploreTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'exploreTab'
        });
      }}>
      <ExploreView/>
    </TabBarIOS.Item>
    
    <TabBarIOS.Item
      title="Favorites"
      icon={{uri:'ic_favorite_border'}}
      selected={this.state.selectedTab === 'favoriteTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'favoriteTab'
        });
      }}>
       // Reload this
      <FavoritesView/>
    </TabBarIOS.Item>
    
    <TabBarIOS.Item
      systemIcon="more"
      selected={this.state.selectedTab === 'moreTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'moreTab'
        });
      }}>
      <MoreView/>
    </TabBarIOS.Item>
    

I already tried to set a new state to start the update, but it does not change anything.

<TabBarIOS.Item
      title="Favorites"
      icon={{uri:'ic_favorite_border'}}
      selected={this.state.selectedTab === 'favoriteTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'favoriteTab',
          forceUpdate: Math.random()
        });
      }}>
      <FavoritesView forceUpdate={this.state.forceUpdate}/>
</TabBarIOS.Item>
+4
source share
2 answers
+1

All Articles