React native props management

Question

Iam using react-native-router-flux for navigation in react-native.

My tabs use same component with different props. Everything is fine when first tab change but prop not changed when return same tab.

What method should I use when return to the same tab?

App.js

<Scene key="root" hideNavBar={true}>
  <Scene key="rootTabBar" tabs={true} hideNavBar={true}>
    <Scene
      key="firstCaregory"
      title="First Category"
      id={1}
      component={Category}
    />
    <Scene
      key="secondCategory"
      title="Second Category"
      id={2}
      component={Category}
    />
  </Scene>
</Scene>

Categry.js

componentDidMount() {
  this.props.fetchNews(this.props.id);
}

Eric Eric · Accepted Answer · 2019-10-29T17:48:23

Try checking if your Category component is getting unmounted when you navigate to / from a screen. Since you are loading data in componentDidMount, the only time you will load data is when the component is built for the first time for each scene. In my RNRF setup with Tabs using nested scenes, I can confirm that navigation does not trigger components to unmount, but it is worth checking on your end by putting a console log inside of componentWillUnmount within the Category component.

Choosing a method for when you return to the same tab depends on if the above theory is correct.

React native props management

1 Answers