React-native-navigation: [v3/v4] Cannot push to any screen after pop

[alipiry]

Issue Description

I have a screen that includes some form stuff, so after form submission I do pop current screen and then push to another screen which causes an error.

Is there any solution for this issue?

Steps to Reproduce / Code Snippets / Screenshots

Error: Failed to execute stack command. Stack Component71 not found.

---

Environment

• React Native Navigation version: 3.2.0
• React Native version: 0.61.2
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): all

[kyle-ssg]

I've found this on Android when using an old API.

[alipiry]

I've found this on Android when using an old API.

Actually my project was using RNN v1, I'm facing this issue after migrating it to v3!

[alipiry]

So to reproduce this issue, I've created a new RN project which uses RNN v4.
You can find out the issue yourself by running project below:

Steps to Reproduce / Code Snippets / Screenshots

> git clone [email protected]:alipiry/react-native-navigation-example.git
> cd react-native-navigation-example/
> yarn
> yarn start
> yarn ios or yarn android 

In this example, we can push to a screen called Other Screen, then in the Other Screen, if you press GO BACK button, first of all the Navigation should pop the current screen then push to Other Screen again but as you see it won't do such thing!

Related Code:

const handlePopScreen = useCallback(() => {
    Navigation.pop(componentId);
    Navigation.push(componentId, {
      component: {
        name: 'Other',
      },
    });
  }, [componentId]);

in iOS platform, it doesn't do anything but in Android it causes an error which is:

Error: Failed to execute stack command. Stack Component3 not found.

---

Environment

• React Native Navigation version: 4.0.4
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): all

[alipiry]

@guyca please check this issue, tnx

[guyca]

Hey @alipiry
You're trying to push a screen by passing the componentId of a component which has already been popped from the stack. This isn't possible as that component is detached and has no parent.

Give you stack an id and push using that id instead of using componentId.

stack: {
  id: 'MyStack`,
  children: [
  ]
}

...

const handlePopScreen = useCallback(() => {
    Navigation.pop(componentId);
    Navigation.push('MyStack', {
      component: {
        name: 'Other',
      },
    });
  }, [componentId]);

[alipiry]

Hey @alipiry
You're trying to push a screen by passing the componentId of a component which has already been popped from the stack. This isn't possible as that component is detached and has no parent.

Give you stack an id and push using that id instead of using componentId.

stack: {
  id: 'MyStack`,
  children: [
  ]
}

...

const handlePopScreen = useCallback(() => {
    Navigation.pop(componentId);
    Navigation.push('MyStack', {
      component: {
        name: 'Other',
      },
    });
  }, [componentId]);

Thanks a lot, but my app has 5 tabs which means it has 5 stacks!
How should I handle multiple stacks with your solution?

[guyca]

@alipiry Assign each stack a unique id; homeStack, 'profileStack,chatStack` etc