I have an App where the user submits some data on Screen B, when the request is successfull the App navigates to a Screen C, which shows a summary of the submitted data. This Screen C is also available from other Screens X and Y.
The behaviour I want to introduce is as follows:
- When a User submitted data through Screen B and than goes back, either by using the back gesture, pressing the back hardware button (softkey) or pressing the button in the Navigationbar, the App should navigate to a Screen A, instead of Screen B
- If the user access Screen C from Screen X, the back functionality should execute the default behaviour and take the User back to Screen X or Y respectively.
How do I achieve this behaviour? It should work in both Android and iOS.
This is my current code in Screen C:
useEffect(() => {
navigation.addListener('beforeRemove', e => {
if(cameFrom == 'ScreenB' ){
e.preventDefault()
navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [{name: 'ScreenA'}],
}),
})
}
}
)
}, [])
This causes a Maximum call stack size exceeded.
error.
I have also tried this approach:
useEffect(() => {
if(cameFrom == 'ScreenB' ){
const { routes } = navigation.getState();
const filteredRoutes = routes.filter(
route => route.name == 'ScreenA',
);
navigation.reset({
index: filteredRoutes.length - 1,
routes: filteredRoutes,
});
}
}, [])
Taken from Link, but this executes the navigation to Screen A immediately when Screen C is opened.