2

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.

NoLoHo
  • 76
  • 8

0 Answers0