Issue: When opening a screen from a notification or deep link, the back button does not return to the expected parent screen in react navigation, infact it gets stuck at the child screen even if you click again on the tab navigator or sometimes does nothing/exits the app.
(e.g., Forms → FormEntry):
Cause:
Navigating directly to a child screen (via navigate
) creates a shallow stack with no parent screen to go back to.
Solution:
Use CommonActions.reset
to build the stack so both the parent and child are present, make sure also you build all navigation with the same index otherwise you will be able to navigate to 2 screens only:
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Main',
state: {
index: 1,
routes: [
{name: 'Screen1'}, // 0
{
name: 'Forms', // 1
state: {
index: 1, // FormEntry is the second screen in FormsStack
routes: [
{name: 'Forms'}, // Forms list
{
name: 'FormEntry',
params: {entry_id, form_id},
},
],
},
},
{name: 'Screen2'}, // 2
{name: 'Screen3'}, // 3
{name: 'Screen4'}, // 4
],
},
},
],
}),
);