how to refresh component wrpped in tab on selection of tab ?

[chetankotkar]

export const Tabs = TabNavigator({
 store: {
   screen: MainScreen,
   navigationOptions: {
       tabBarLabel: 'store',
       tabBarIcon: ({ tintColor }) => (<Icon name="store" size={24} color={tintColor} />)
    },
 },
 categories: {
   screen: Categories,
   navigationOptions: {
       tabBarLabel: 'categories',
       tabBarIcon: ({ tintColor }) => (<Icon name="categories" size={24} color={tintColor} />)
     },
 },
 cart: {
   screen: Cartitems,
   navigationOptions: {
       tabBarLabel: 'cart',
       tabBarIcon: ({ tintColor }) => (<Icon name="cart" size={24} color={tintColor} />)
    },
 },
 wishlist : {
   screen : WishlistItems,
   navigationOptions:{
       tabBarLabel : "wishlist",
       tabBarIcon :({tintColor}) => (<Icon name= 'wishlist' size={24} color = {tintColor}/>)
    },
 },
 account : {
   screen :Account,
   navigationOptions:{
       tabBarLabel : "account",
       tabBarIcon :({tintColor}) => (<Icon name= 'account' size={24} color = {tintColor}/>)
    },
 },
},
{
  tabBarOptions: {
    activeTintColor: '#000000',
    inactiveTintColor:'#ffffff',
    showLabel: true,
    showIcon: true,
    style: {
      backgroundColor: '#57C0B8',
      height:60,
      padding:0,
      margin:0,
      flexDirection:Platform.os=="ios"?'row':'column',
    },
    labelStyle:{fontSize:10,padding:0,width:width/5},
    indicatorStyle:{backgroundColor:'transparent',height:0}
    },
  swipeEnabled:false,
  animationEnabled:true,
  tabBarPosition: 'bottom',
  lazyLoad:false,
  // initialRouteName:'store',
   backBehavior:'initialRoute',
  });

Expected behaviour

Now when I press the Cartitem tab I want to refresh the component Cartitem.

Actual behaviour

Currently all tabs are loaded at the initial stage. when I use lazy load the tab loaded once I go to that tab. but when I visit that tab second time it does not reaload.

Environment

• react-navigation ^1.0.0-beta.7:

• react-native ^0.44.0:

• Android 6.0:

  react-navigation-is-focused-hoc

  ^1.0.0:

[Gardezi1]

any update on this ?? I have a similar issue to this one so if you guys can tell how can we achieve it, that would help greatly

[aranda-adapptor]

Did you implement the component functions in the example?

  componentWillReceiveProps(nextProps) {
    if (!this.props.isFocused && nextProps.isFocused) {
      // screen enter (refresh data, update ui ...)
    }
    if (this.props.isFocused && !nextProps.isFocused) {
      // screen exit
    }
  }

  shouldComponentUpdate(nextProps) {
    // Update only once after the screen disappears
    if (this.props.isFocused && !nextProps.isFocused) {
      return true
    }

    // Don't update if the screen is not focused
    if (!this.props.isFocused && !nextProps.isFocused) {
      return false
    }

    // Update the screen if its re-enter
    return !this.props.isFocused && nextProps.isFocused
  }