how to re-render screens/components in tab navigator ?

[kaiyes]

Since we are using redux to control the navigation, is that making the screens inside tab navigator not re- mounting on tab change ? For example, if I go to tab x, and then go to some other tab, then return to tab x again, tab x doesn't remount/reload. if I console log inside componentDidMount, nothing comes out. So the component is being mounted once only. How can we make the component remount everytime the tab change ? thanks in advance

[kaiyes]

in my search, these threads has come up. https://github.com/react-community/react-navigation/issues/962#issuecomment-323873066 https://github.com/react-community/react-navigation/pull/1335#issuecomment-329518635 https://github.com/react-community/react-navigation/issues/2618 https://github.com/react-community/react-navigation/issues/51

[kaiyes]

So apparently in React-navigation, it is not possible now to re-render a screen on tab change. There is a work around that was merged via react-community/react-navigation#1335 which onTabbarPress. Using that, one can plugin a modal into any tab navigator. The modal renders every time it is called. Plugging the subscription into that modal page also makes the badge reactive. This is quite an ugly hack to make this work. Makes me want to leave react navigation for something else. May be react-native-router-flux which seems to be the flavour of react router of this month

[EQuimper]

With the help of a hoc I did that on one of my app

componentDidUpdate(prevProps) {
    if (prevProps.isFocused !== this.props.isFocused) {
      this._getInfo();
    }
  }

https://github.com/pmachowski/react-navigation-is-focused-hoc

[kaiyes]

Yeah came across that. There is another one as well. https://github.com/satya164/react-navigation-addons After doing this:

import { enhance } from 'react-navigation-addons';

export default Stacks = enhance(StackNavigator)({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

Then gotta do this:

    this.props.navigation.addListener('change', this._handleStateChange);
  }

[EQuimper]

O wow thank for this one, :)