What is the difference between navigation.goBack and navigation.dispatch(e.data.action) in react native android

user_5744975 0
Viewed 638

I am new to react native and I have react native app for android and I am using Navigation 5 for navigating to the next page. The application workflow is loginScreen -> HomeScreen -> ExistingStockScreen -> ScanSkidBarcodeScreen -> ScanItemsScreen. I am handling backbutton press with this code on ScanItemScreen.

 navigation.addListener('beforeRemove', (e) => {
 // Prevent default behavior of leaving the screen
            e.preventDefault();
            if (this.state.items[0].barCode !== "" && this.state.items[5].barCode !== "") {
             
                Alert.alert(
                    'Error!',
                    'You can only scan six items at a time.',
                    [
                    { text: "OK", style: 'cancel', onPress: () => { } },
                    ]
                );
            }
            else if (this.state.items[0].barCode !== "") {
              
                Alert.alert(
                    'Attention!',
                    'You have unsaved items. Please click on UPDATE STATUS first and go back.',

                    [{ text: "OK", style: 'cancel', onPress: () => { } },
                    {
                       text: 'Go Back',
                        style: 'destructive',
                        // If the user confirmed, then we dispatch the action we blocked earlier
                        // This will continue the action that had triggered the removal of the screen
                        onPress: () => navigation.dispatch(e.data.action),
                    },]

                );
            } else {
                navigation.dispatch(e.data.action)
            }
        })
    }

However navigation.dispatch(e.data.action) code is going to back screen but it logs out the user for some reason. So I am thinking to use navigation.goBack() instead. What's the difference between navigation.goBack() and navigation.dispatch(e.data.action) ?

react-navigation react-native
1 Answers

The beforeRemove event is triggerred when the screen is being removed, which can happen because of various reasons (such as a reset or another action). While going back is one of the ways to trigger it, it's not the only way.

From the docs:

  • The user pressed back button on a screen in a stack
  • The user performed a swipe back gesture
  • Some action such as pop or reset was dispatched which removes the screen from the state

The object in e.data.action refers to the action which triggered that event. By dispatching that action again with navigation.dispatch(e.data.action), you continue the action after performing whatever check you needed e.g. prompting the user.

If you don't dispatch the event again and instead try to goBack():

  • It'll be incorrect behaviour - if a reset triggered the event, you should continue the reset (or whaetver triggered the event), not perform a different action entirely
  • It won't work anyway, because goBack will just trigger the event, so you'll be stuck in a loop of prompts

However navigation.dispatch(e.data.action) code is going to back screen but it logs out the user for some reason

React Navigation doesn't interact with your app state. If your user is being logged out on navigation, that's a bug in your code that you need to debug and fix.

user_16650260
Related