componentDidMount not trigger on Actions.pop

[jeremybarbet]

Hi !

I would like to understand how works the Actions.pop function a little.

I have a simple app with two views. On the first one, I just display data than user have to edit by himself. And on the second screen, the edit view to add data.

By default user didn't have data display and is invited to edit data. I use a onPress={ Actions.add } to redirect him to the edit screen. After user save is data, there is a back button to call the onPress={ Actions.pop } to the list view.

This is where I struggled a little bit.

• When I press the back button, and go back to the list view, the componentDidMount is not called again.
• However, I have a lifecycle with componentWillReceiveProps, but the function render two times my list view. When I press the back button, componentWillReceiveProps is triggered with the old list view, and 300ms after a new componentWillReceiveProps is triggered with the new data. It seems buggy to the user to saw the last data during a second before seeing his new edited data.
• If I replaced the onPress function with a onPress={ Actions.list } instead of Actions.pop, the componentDidMount event is mounted, but I loose my nav stacks, and the gestures are broken.

How can I fix this issue and what's the best way to do it ?

Thanks in advance.

[oureta]

Actions.pop should be the way to go. The List View is not being unmounted when you go to Edit Screen that's why componentDidMount is not being called. When you call Actions.list, a new List Screen is being created, mounted and pushed to the stacks.

[jeremybarbet]

How can I unmounted this view ? What kind of action should I do, to make it works ?

[oureta]

It needs to be on a separate Router. Or you can call Actions.pop to unmount the List Screen before Actions.add. Basically, the List Screen needs to be removed from the stacks for it to unmount

[jeremybarbet]

My router look like this :

<Router hideNavBar={ true }>
  <Route name="list" component={ List } title="Statiks" schema="default" />
  <Route name="add" component={ Add } title="Options" schema="default" />
</Router>

There is separated route for each view.

[oureta]

You could try something like this.

<Router hideNavBar={ true }>
  <Route name="list">
    <Router>
      <Route component={ List } title="Statiks" schema="default" />
    </Router>
  </Route>
  <Route name="add" component={ Add } title="Options" schema="default" />
</Router>

I'm not sure though why you want it to be unmounted.

[jeremybarbet]

On the Add view, I edited field that I push on AsyncStorage. After getting back to List View, I would like to update my view with the new data retrieve with a await AsyncStorage.getItem. I use at the moment componentWillReceiveProps to render the view. But it rendre twice my view and create a glitch during 1sec with the old data before updating with new data.

[jeremybarbet]

Even with a new route level, the componentDidMount is not fired after clicking on the back button = Actions.pop

[aksonov]

componentDidMount should not be fired for pop. You need to check onFocus handler for this.

[jeremybarbet]

4. Update your component on focus of this section : https://github.com/aksonov/react-native-router-flux#reduxflux-support ?

[jeremybarbet]

@aksonov How the onFocus handler works ? Can you provide a link with the documentation about it ?

[aksonov]

Check 3.0 release, now the component uses new React Native Navigation API. However it has a little bit different API comparing with 2.x release. Anyway I'm closing this ticket because 2.x release will not be supported except critical bugs.

[alfian0]

Hi, @aksonov I got same problem with @JeremDsgn,
scene A to scene B, from scene B back to scene A again and Back to scene B again not triggered componentWillUnmount