react-native-router-flux: [Bug] ComponentWillMount/DidMount/WillUnmount fires after Actions.pop()

Hello!

After migrating from v3 to v4 I see this problem:

When push 3 scenes to stack and then go back with Actions.pop() 3 times lifecycle methods will be called on same components again after unmount.

My guess that is component will get remounted and then immedeately unmounted.

componentWillMount
index.ios.bundle?platform=ios&dev=true&minify=false:164287 componentDidMount
index.ios.bundle?platform=ios&dev=true&minify=false:164298 componentDidUpdate
index.ios.bundle?platform=ios&dev=true&minify=false:164298 componentDidUpdate
index.ios.bundle?platform=ios&dev=true&minify=false:164298 componentDidUpdate
index.ios.bundle?platform=ios&dev=true&minify=false:164308 componentWillUnmount
index.ios.bundle?platform=ios&dev=true&minify=false:164279 componentWillMount
index.ios.bundle?platform=ios&dev=true&minify=false:164287 componentDidMount
index.ios.bundle?platform=ios&dev=true&minify=false:164308 componentWillUnmount

Version

Tell us which versions you are using:

react-native-router-flux v4.0.0-beta22
react-native v0.50-rc

Expected behaviour

Components lifecycle methods called again ComponentWillMount/DidMount/WillUnmount

Actual behaviour

Should not call lifecycle methods after unmount.

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

Go to 3 scenes deep
Call programmatically

for ( let x in new Array(3).fill() ) {
  await Actions.pop();
}

See problem in console

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 29 (25 by maintainers)

Most upvoted comments

Hello @fadlykayo ! I’ve migrated to react-navigation today

kesha-antonov on Jul 16, 2018

@kesha-antonov hi, do you found any solution for this? my current workaround is by adding setTimeout(() => { Actions.productListing({type: 'replace'}), 0);. But it still give me flicker effect. Another workaround is by adding a custom loader before the next scene mounted. But the loader will always be rendered everytime the next scene is called.

UPDATE: Found the best solution so far by rendering an empty View, before navigating to the next scene.

shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.status === 'ACTIVE') {
      Actions.productListing({ type: 'replace' });
    };

    return true;
  };

render() {
    if (this.props.status === 'ACTIVE') {
      return <View></View>;
    } else {
      return this.renderSubmitRegistration();
    }
  };

fadlykayo on Jul 16, 2018