how to override behaviour of backButton on react native navigation

I am using for navigation for my react native app. I have one issue where let say there are three cmp A,B,C. From comp A there is a history.push() executed which redirect to cmp B and then cmp B is some path matcher where renders particular component based on the path pushed from A, let say cmp B matches the path and than it renders C cmp, where C has smth like this:


              Navigation.push(componentId, {
                component: {
                    id: 'BottomSheetRollupView',
                    name: 'bottomSheet.Rollup',
                    passProps: {
                    options: {
                        statusBar: {
                            style:{android: 'light', ios: 'dark'}),

So the C cmp pushes a new screen to the stack, so at this moment when clicking back from the navigation I would like to instead redirect me to A and not B. How can I change the behaviour of back button or can I disable it somehow? pressing back button redirects me back to cmp B currently and I dont want to!

Thank you.


You can change the behavior when going back by using navigation.addListener(). I found it a little clunky but it works – in our case we warn on going back if data would be lost. We also had to distinguish between Save and Back presses, which we did by setting a state flag when Save button was pressed. Here’s what the hook looks like – I think it should be adaptable to your needs:

// Based on:
function useAlertOnGoBack({
}: {
  hasEdited: boolean;
  didSave: boolean;
}) {
  const navigation = useNavigation();
  useEffect(() => {
    const unsubscribe = navigation.addListener("beforeRemove", e => {
      if (!hasEdited || didSave) {
        // No listener

      // Prevent default behavior of leaving the screen

      showExitWithoutSavingAlert(() => navigation.dispatch(;

    return unsubscribe;
  }, [hasEdited, navigation, didSave]);

export function showExitWithoutSavingAlert(dismissScreen: () => void) {
  // Prompt the user before leaving the screen
  Alert.alert("Discard unsaved changes?", undefined, [
      text: "Discard Changes",
      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: dismissScreen,
    { text: "Cancel", style: "cancel", onPress: () => {} },