when using Actions.reset("key") in react-native-router-flux, what will affect the component

Question

I use react-native-router-flux as the react-native router, In my situation, when the user login out, I use Action.reset("key"), but the getDerivedStateFromProps next props still have pre-data, can anyone tell me the reason, or how to solve the problem using the other way.

Answer 1

the react-native-router-flux is based on react-navigaion. so we can find the concepte and explanation.

firstly we see the source js code,it is located in navigationStore

reset = (routeName, data) => {
    const params = filterParam(data);
    const parent = getParent(this.state, routeName);
    this.dispatch(
      StackActions.reset({
        index: 0,
        key: parent ? parent.key : null,
        actions: [
          NavigationActions.navigate({
            routeName,
            params,
          }),
        ],
      }),
    );
  };
}

The StackActions.reset only reset action wipes the whole navigation state and replaces it with the result of several actions. so it only change the navigation state. we can see this in react-navigation api.

and for the navigation lifecyle, unlike the web, the navigation is not remount the compoent. it manager the router use stack. the following is the offical says:

Consider a stack navigator with screens A and B. After navigating to A, its componentDidMount is called. When pushing B, its componentDidMount is also called, but A remains mounted on the stack and its componentWillUnmount is therefore not called.

When going back from B to A, componentWillUnmount of B is called, but componentDidMount of A is not because A remained mounted the whole time.

so the navigation will unmount the component when the component is removed from the router stack, like back, reset