React Native Navigation - Component will not unmount even after using stackactions.reset

Question

I am using react native with react-navigation v4

I have a home screen and a welcome screen. I am using redux to store the user that is logged in. In the welcome screen (before the user logs in), I reset the user to null like this:

useEffect(() => {
    dispatch(updateCurrentUser(null));
  });

On my home screen (after the user logs in), I navigate to the welcome screen with a logout button the following way:

      <Button
          title="Logout"
          onPress={() => {
            const resetAction = StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({routeName: "Welcome"}),
              ]
            });
            props.navigation.dispatch(resetAction);
            // navigationData.navigation.pop();
            // navigationData.navigation.navigate({routeName: "Welcome"});
          }}
        />

After I run this, I get an error whenever i press the logout button

Since the user is now null and on the home screen I have the following code <Text style={styles.text}>Welcome, {currentUser.username}!</Text>, I am getting an error that null does not have the attribute username since currentUser is now null.

I do not understand why the home screen will not unmount and is being rendered when i reset the stack and navigated to the welcome screen. What could be the issue here?

ramashish tomar ramashish tomar · Accepted Answer · 2020-04-02T18:38:08

You can just leave the stackaction and use switchnavigator and put these two screens in separate stacks. like

export default createAppContainer(createSwitchNavigator(
{
    stack1:ScreenStack1,
    App: AppTabs,
},
{
    initialRouteName: 'AuthLoading',
}

));

so if I will navigation.navigate("App") from stack1 and at some point of time if I go back to stack1 from App navigation.navigate("stack1") here now all the screens of stack1 will behave like rendering fresh.

React Native Navigation - Component will not unmount even after using stackactions.reset

1 Answers