How To Dismiss Parent Navigator In React Native?

Question

I have a layout as per the below;

const CheckoutStack = createNativeStackNavigator();
export default function CheckoutLayout() {
  return (
    <CheckoutStack.Navigator
      initialRouteName="Checkout"
      screenOptions={{ headerShown: true }}>
      <CheckoutStack.Screen
        name="Checkout"
        component={CheckoutScreen}
        options={{
          headerShadowVisible: false,
          headerTitle: "",
          headerRight: () => <CloseButton />,
        }}
      />
      <CheckoutStack.Screen
        name="PaymentSuccess"
        component={PaymentSuccessScreen}
        options={{
          headerShown: false,
          presentation: "fullScreenModal",
        }}
      />
    </CheckoutStack.Navigator>
  );
}

I am currently in the PaymentSuccessScreen and I want to dismiss both the current screen AND the CheckoutScreen. Essentially dismiss the CheckoutLayout. How do I do this?

I have tried;

navigation.dispatch(StackActions.pop(2));
navigation.dispatch(StackActions.popToTop());

Here is how I present the CheckoutLayout;

  <AuthorizedStack.Screen
    name="CheckoutLayout"
    component={CheckoutLayout}
    options={{
      presentation: "fullScreenModal",
      headerShown: false,
    }}
  />

Answer 1

Use getParent to get a parent navigation prop from a nested navigator.

This method returns the navigation prop from the parent navigator that the current navigator is nested in.

navigation.getParent().goBack()