fix(iOS): onNativeDismissCancelled called too early during modal dismissal

apps/Example.tsx

@@ -22,6 +22,7 @@ import { ListItem, SettingsSwitch, ThemedText } from './src/shared';
 import SimpleNativeStack from './src/screens/SimpleNativeStack';
 import SwipeBackAnimation from './src/screens/SwipeBackAnimation';
 import StackPresentation from './src/screens/StackPresentation';
+import PreventRemove from './src/screens/PreventRemove';
 import HeaderOptions from './src/screens/HeaderOptions';
 import StatusBarExample from './src/screens/StatusBar';
 import Animations from './src/screens/Animations';
@@ -80,6 +81,11 @@ const SCREENS: Record<
     type: 'example',
     isTVOSReady: true,
   },
+  PreventRemove: {
+    title: 'Prevent Remove',
+    component: PreventRemove,
+    type: 'example',
+  },
   HeaderOptions: {
     title: 'Header Options',
     component: HeaderOptions,
@@ -132,8 +138,8 @@ const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
 type RootStackParamList = {
   Main: undefined;
 } & {
-  [P in keyof typeof SCREENS]: undefined;
-};
+    [P in keyof typeof SCREENS]: undefined;
+  };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -208,9 +214,8 @@ const ExampleApp = (): React.JSX.Element => {
               <Stack.Screen
                 name="Main"
                 options={{
-                  title: `${
-                    Platform.isTV ? '📺' : '📱'
-                  } React Native Screens Examples`,
+                  title: `${Platform.isTV ? '📺' : '📱'
+                    } React Native Screens Examples`,
                 }}
                 component={MainScreen}
               />

apps/src/screens/PreventRemove.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { View, StyleSheet, TextInput, Platform, Alert, ScrollView, Text } from 'react-native';
+import { usePreventRemove } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import { Button } from '../shared';
+
+type StackParamList = {
+  Main: undefined;
+  PreventRemoveScreen: undefined;
+  PreventRemoveModal: undefined;
+};
+
+interface MainScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'bisque' }}>
+    <Button
+      title="Go to screen"
+      onPress={() => navigation.navigate('PreventRemoveScreen')}
+    />
+    <Button
+      title="Open modal"
+      onPress={() => navigation.navigate('PreventRemoveModal')}
+    />
+    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+  </View>
+);
+
+const PreventRemoveScreen = ({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}): JSX.Element => {
+  const [text, setText] = React.useState('');
+
+  const hasUnsavedChanges = Boolean(text);
+
+  usePreventRemove(hasUnsavedChanges, ({ data }) => {
+    Alert.alert(
+      'Discard changes?',
+      'You have unsaved changes. Discard them and leave the screen?',
+      [
+        { text: "Don't leave", style: 'cancel', onPress: () => { } },
+        {
+          text: 'Discard',
+          style: 'destructive',
+          onPress: () => navigation.dispatch(data.action),
+        },
+      ],
+    );
+  });
+
+  return (
+    <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+      <ScrollView
+        contentContainerStyle={styles.contentContainer}
+        keyboardDismissMode="interactive"
+      >
+        <TextInput
+          autoFocus
+          value={text}
+          placeholder="Type something to prevent remove…"
+          placeholderTextColor="#999"
+          onChangeText={setText}
+        />
+        <Button
+          title="Discard and go back"
+          onPress={() => navigation.goBack()}
+        />
+        {Array.from({ length: 10 }).map((_, i) => (
+          <Text key={`lorem-ipsum-${i}`} style={styles.loremIpsum}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const App = (): JSX.Element => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="Main"
+      component={MainScreen}
+      options={{ title: 'Prevent Remove' }}
+    />
+    <Stack.Screen name="PreventRemoveScreen" component={PreventRemoveScreen} />
+    <Stack.Screen
+      name="PreventRemoveModal"
+      component={PreventRemoveScreen}
+      options={{ presentation: 'modal' }}
+    />
+  </Stack.Navigator>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingTop: 10,
+    paddingHorizontal: 10,
+  },
+  loremIpsum: {
+    marginVertical: 8,
+    fontSize: 16,
+    color: 'gray',
+  },
+});
+
+export default App;

ios/RNSScreen.mm

@@ -514,14 +514,6 @@ - (void)notifyTransitionProgress:(double)progress closing:(BOOL)closing goingFor
 #endif
 }
 
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
-    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
-- (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)presentationController
-{
-  [self notifyGestureCancel];
-}
-#endif
-
 - (void)presentationControllerWillDismiss:(UIPresentationController *)presentationController
 {
   // We need to call both "cancel" and "reset" here because RN's gesture recognizer
@@ -546,12 +538,24 @@ - (void)presentationControllerWillDismiss:(UIPresentationController *)presentati
 - (BOOL)presentationControllerShouldDismiss:(UIPresentationController *)presentationController
 {
   if (_preventNativeDismiss) {
-    [self notifyDismissCancelledWithDismissCount:1];
     return NO;
   }
   return _gestureEnabled;
 }
 
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+- (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)presentationController
+{
+  // NOTE(kkafar): We should consider depracating the use of gesture cancel here & align
+  // with usePreventRemove API of react-navigation v7.
+  [self notifyGestureCancel];
+  if (_preventNativeDismiss) {
+    [self notifyDismissCancelledWithDismissCount:1];
+  }
+}
+#endif
+
 - (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
 {
   if ([_reactSuperview respondsToSelector:@selector(presentationControllerDidDismiss:)]) {