From 0ed53844b560292a836fcc92e11e3fec19448e26 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 13 May 2024 17:14:44 +0200
Subject: [PATCH 1/6] Fix rtl issue & add reproductions

---
 FabricTestExample/App.js           |  1 +
 FabricTestExample/src/Test2118.tsx | 73 ++++++++++++++++++++++++++++++
 FabricTestExample/src/Test654.js   |  2 -
 FabricTestExample/src/Test831.tsx  |  2 -
 TestsExample/App.js                |  1 +
 TestsExample/src/Test2118.tsx      | 73 ++++++++++++++++++++++++++++++
 6 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 FabricTestExample/src/Test2118.tsx
 create mode 100644 TestsExample/src/Test2118.tsx

diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
index 5cbb5f7fb1..a5f66cbc2b 100644
--- a/FabricTestExample/App.js
+++ b/FabricTestExample/App.js
@@ -97,6 +97,7 @@ import Test2008 from './src/Test2008';
 import Test2028 from './src/Test2028';
 import Test2048 from './src/Test2048';
 import Test2069 from './src/Test2069';
+import Test2118 from './src/Test2118';
 
 enableFreeze(true);
 
diff --git a/FabricTestExample/src/Test2118.tsx b/FabricTestExample/src/Test2118.tsx
new file mode 100644
index 0000000000..4e5aa325ab
--- /dev/null
+++ b/FabricTestExample/src/Test2118.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const fill = { flex: 1 };
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('DetailsStack')}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapperCustom: {
+    width: '100%',
+    height: 100,
+    marginHorizontal: 30,
+    borderRadius: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 20,
+    color: 'black',
+  },
+});
+
+function DetailsScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      {new Array(10).fill(0).map((_, i) => (
+        <Pressable
+          onPress={() => {
+            Alert.alert('Pressed!');
+          }}
+          style={({ pressed }) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({ pressed }) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
+
+function App() {
+  return (
+      <NavigationContainer>
+        <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="DetailsStack" component={DetailsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+  );
+}
+
+export default App;
diff --git a/FabricTestExample/src/Test654.js b/FabricTestExample/src/Test654.js
index dd83d66259..864ff8be0d 100644
--- a/FabricTestExample/src/Test654.js
+++ b/FabricTestExample/src/Test654.js
@@ -5,8 +5,6 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App() {
   return (
     <NavigationContainer>
diff --git a/FabricTestExample/src/Test831.tsx b/FabricTestExample/src/Test831.tsx
index 2e3cb4ef95..17b171b843 100644
--- a/FabricTestExample/src/Test831.tsx
+++ b/FabricTestExample/src/Test831.tsx
@@ -12,8 +12,6 @@ type Props = {
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App(): JSX.Element {
   return (
     <NavigationContainer>
diff --git a/TestsExample/App.js b/TestsExample/App.js
index 3a993780cb..7137c79a65 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -98,6 +98,7 @@ import Test1981 from './src/Test1981';
 import Test2008 from './src/Test2008';
 import Test2048 from './src/Test2048';
 import Test2069 from './src/Test2069';
+import Test2118 from './src/Test2118';
 
 enableFreeze(true);
 
diff --git a/TestsExample/src/Test2118.tsx b/TestsExample/src/Test2118.tsx
new file mode 100644
index 0000000000..4e5aa325ab
--- /dev/null
+++ b/TestsExample/src/Test2118.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const fill = { flex: 1 };
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('DetailsStack')}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapperCustom: {
+    width: '100%',
+    height: 100,
+    marginHorizontal: 30,
+    borderRadius: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 20,
+    color: 'black',
+  },
+});
+
+function DetailsScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      {new Array(10).fill(0).map((_, i) => (
+        <Pressable
+          onPress={() => {
+            Alert.alert('Pressed!');
+          }}
+          style={({ pressed }) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({ pressed }) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
+
+function App() {
+  return (
+      <NavigationContainer>
+        <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="DetailsStack" component={DetailsScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+  );
+}
+
+export default App;

From f944d2008d5b2ea306b9d9ee28bdfff8dea48e81 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 13 May 2024 17:15:44 +0200
Subject: [PATCH 2/6] ios fix

---
 ios/RNSScreenStack.mm | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 88e0e5a805..1fa3396419 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -1,7 +1,9 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTFabricSurface.h>
 #import <React/RCTMountingTransactionObserving.h>
 #import <React/RCTSurfaceTouchHandler.h>
+#import <React/RCTSurfaceView.h>
 #import <React/UIView+React.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
@@ -744,6 +746,26 @@ - (void)cancelTouchesInParent
     [touchHandler setEnabled:YES];
     [touchHandler reset];
   }
+
+  parent = _controller.view;
+  while (parent != nil && ![parent isKindOfClass:RCTSurfaceView.class]) {
+    parent = parent.superview;
+  }
+
+  RCTSurfaceTouchHandler *touchHandler = nil;
+  for (UIGestureRecognizer *recognizer in parent.gestureRecognizers) {
+    if ([recognizer isKindOfClass:RCTSurfaceTouchHandler.class]) {
+      touchHandler = recognizer;
+    }
+  }
+
+  if (touchHandler != nil) {
+    [touchHandler setEnabled:NO];
+    [touchHandler setEnabled:YES];
+    [touchHandler reset];
+  }
+
+  NSLog(@"Found %p, %p", parent, touchHandler);
 }
 
 - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

From ab8e234dbc4d76f4337601a43cb29e3e7dac614c Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 14 May 2024 06:32:25 +0200
Subject: [PATCH 3/6] Cleanup iOS implementation

---
 ios/RNSScreenStack.mm                         | 46 +++++++++++--------
 ios/utils/RCTSurfaceTouchHandler+RNSUtility.h | 15 ++++++
 .../RCTSurfaceTouchHandler+RNSUtility.mm      | 14 ++++++
 ios/utils/RCTTouchHandler+RNSUtility.h        | 15 ++++++
 ios/utils/RCTTouchHandler+RNSUtility.mm       | 15 ++++++
 5 files changed, 85 insertions(+), 20 deletions(-)
 create mode 100644 ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
 create mode 100644 ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
 create mode 100644 ios/utils/RCTTouchHandler+RNSUtility.h
 create mode 100644 ios/utils/RCTTouchHandler+RNSUtility.mm

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 1fa3396419..e729f4c0ae 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -9,6 +9,7 @@
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
+#import "RCTSurfaceTouchHandler+RNSUtility.h"
 #else
 #import <React/RCTBridge.h>
 #import <React/RCTRootContentView.h>
@@ -16,6 +17,7 @@
 #import <React/RCTTouchHandler.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTUIManagerUtils.h>
+#import "RCTTouchHandler+RNSUtility.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
 #import "RNSScreen.h"
@@ -733,39 +735,43 @@ - (void)cancelTouchesInParent
   // item is close to an edge and we start pulling from edge we want the Touchable to be cancelled.
   // Without the below code the Touchable will remain active (highlighted) for the duration of back
   // gesture and onPress may fire when we release the finger.
+#ifdef RCT_NEW_ARCH_ENABLED
+  // On Fabric there is no view that exposes touchHandler above us in the view hierarchy, however it is still
+  // utilised. `RCTSurfaceView` should be present above us, which hosts `RCTFabricSurface` instance, which in turn
+  // hosts `RCTSurfaceTouchHandler` as a private field. When initialised, `RCTSurfaceTouchHandler` is attached to the
+  // surface view as a gestureRecognizer <- and this is where we can lay our hands on it.
   UIView *parent = _controller.view;
-  while (parent != nil && ![parent respondsToSelector:@selector(touchHandler)])
+  while (parent != nil && ![parent isKindOfClass:RCTSurfaceView.class]) {
     parent = parent.superview;
-  if (parent != nil) {
-#ifdef RCT_NEW_ARCH_ENABLED
-    RCTSurfaceTouchHandler *touchHandler = [parent performSelector:@selector(touchHandler)];
-#else
-    RCTTouchHandler *touchHandler = [parent performSelector:@selector(touchHandler)];
-#endif
-    [touchHandler setEnabled:NO];
-    [touchHandler setEnabled:YES];
-    [touchHandler reset];
   }
 
-  parent = _controller.view;
-  while (parent != nil && ![parent isKindOfClass:RCTSurfaceView.class]) {
-    parent = parent.superview;
+  // This could be possible in modal context
+  if (parent == nil) {
+    return;
   }
 
   RCTSurfaceTouchHandler *touchHandler = nil;
+  // Experimentation shows that RCTSurfaceTouchHandler is the only gestureRecogniser registered here,
+  // so we should not be afraid of any performance hit here.
   for (UIGestureRecognizer *recognizer in parent.gestureRecognizers) {
     if ([recognizer isKindOfClass:RCTSurfaceTouchHandler.class]) {
-      touchHandler = recognizer;
+      touchHandler = static_cast<RCTSurfaceTouchHandler *>(recognizer);
     }
   }
 
-  if (touchHandler != nil) {
-    [touchHandler setEnabled:NO];
-    [touchHandler setEnabled:YES];
-    [touchHandler reset];
+  [touchHandler rns_cancelTouches];
+#else
+  // On Paper we can access touchHandler hosted by `RCTRootContentView` which should be above ScreenStack
+  // in view hierarchy.
+  UIView *parent = _controller.view;
+  while (parent != nil && ![parent respondsToSelector:@selector(touchHandler)]) {
+    parent = parent.superview;
   }
-
-  NSLog(@"Found %p, %p", parent, touchHandler);
+  if (parent != nil) {
+    RCTTouchHandler *touchHandler = [parent performSelector:@selector(touchHandler)];
+    [touchHandler rns_cancelTouches];
+  }
+#endif // RCT_NEW_ARCH_ENABLED
 }
 
 - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
diff --git a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
new file mode 100644
index 0000000000..c6fe33414d
--- /dev/null
+++ b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
@@ -0,0 +1,15 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTSurfaceTouchHandler.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTSurfaceTouchHandler (RNSUtility)
+
+- (void)rns_cancelTouches;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // RCT_NEW_ARCH_ENABLED
diff --git a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
new file mode 100644
index 0000000000..b2381a0762
--- /dev/null
+++ b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
@@ -0,0 +1,14 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "RCTSurfaceTouchHandler+RNSUtility.h"
+
+@implementation RCTSurfaceTouchHandler (RNSUtility)
+
+- (void)rns_cancelTouches
+{
+  [self setEnabled:NO];
+  [self setEnabled:YES];
+  [self reset];
+}
+
+@end
+#endif // RCT_NEW_ARCH_ENABLED
diff --git a/ios/utils/RCTTouchHandler+RNSUtility.h b/ios/utils/RCTTouchHandler+RNSUtility.h
new file mode 100644
index 0000000000..a8ddb73eec
--- /dev/null
+++ b/ios/utils/RCTTouchHandler+RNSUtility.h
@@ -0,0 +1,15 @@
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTTouchHandler.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTouchHandler (RNSUtility)
+
+- (void)rns_cancelTouches;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // !RCT_NEW_ARCH_ENABLED
diff --git a/ios/utils/RCTTouchHandler+RNSUtility.mm b/ios/utils/RCTTouchHandler+RNSUtility.mm
new file mode 100644
index 0000000000..2f0e68ec59
--- /dev/null
+++ b/ios/utils/RCTTouchHandler+RNSUtility.mm
@@ -0,0 +1,15 @@
+#ifndef RCT_NEW_ARCH_ENABLED
+#import "RCTTouchHandler+RNSUtility.h"
+
+@implementation RCTTouchHandler (RNSUtility)
+
+- (void)rns_cancelTouches
+{
+  [self setEnabled:NO];
+  [self setEnabled:YES];
+  [self reset];
+}
+
+@end
+
+#endif // !RCT_NEW_ARCH_ENABLED

From add5b73234ef170af4c5645ad67c831106c6ee63 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 14 May 2024 06:48:18 +0200
Subject: [PATCH 4/6] Add modal screen to example

---
 FabricTestExample/src/Test2118.tsx | 79 ++++++++++++++++++------------
 TestsExample/src/Test2118.tsx      | 79 ++++++++++++++++++------------
 2 files changed, 94 insertions(+), 64 deletions(-)

diff --git a/FabricTestExample/src/Test2118.tsx b/FabricTestExample/src/Test2118.tsx
index 4e5aa325ab..0e1c90cf2d 100644
--- a/FabricTestExample/src/Test2118.tsx
+++ b/FabricTestExample/src/Test2118.tsx
@@ -1,14 +1,30 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-const fill = { flex: 1 };
+const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
 
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createStackNavigator } from '@react-navigation/stack';
+const ModalStack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="DetailsStack" component={DetailsScreen} />
+        <Stack.Screen
+          name="StackInModal"
+          component={StackInModal}
+          options={{ presentation: 'modal' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -16,29 +32,20 @@ function HomeScreen({ navigation }) {
         title="Go to Details"
         onPress={() => navigation.navigate('DetailsStack')}
       />
+      <Button
+        title="Go to StackInModal"
+        onPress={() => navigation.navigate('StackInModal')}
+      />
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  wrapperCustom: {
-    width: '100%',
-    height: 100,
-    marginHorizontal: 30,
-    borderRadius: 10,
-    margin: 10,
-  },
-  text: {
-    fontSize: 20,
-    color: 'black',
-  },
-});
-
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       {new Array(10).fill(0).map((_, i) => (
         <Pressable
+          key={i.toString()}
           onPress={() => {
             Alert.alert('Pressed!');
           }}
@@ -57,17 +64,25 @@ function DetailsScreen({ navigation }) {
   );
 }
 
-const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
-
-function App() {
+function StackInModal() {
   return (
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
-          <Stack.Screen name="Home" component={HomeScreen} />
-          <Stack.Screen name="DetailsStack" component={DetailsScreen} />
-        </Stack.Navigator>
-      </NavigationContainer>
+    <ModalStack.Navigator>
+      <ModalStack.Screen name="ModalHome" component={HomeScreen} />
+      <ModalStack.Screen name="ModalDetails" component={DetailsScreen} />
+    </ModalStack.Navigator>
   );
 }
 
-export default App;
+const styles = StyleSheet.create({
+  wrapperCustom: {
+    width: '100%',
+    height: 100,
+    marginHorizontal: 30,
+    borderRadius: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 20,
+    color: 'black',
+  },
+});
diff --git a/TestsExample/src/Test2118.tsx b/TestsExample/src/Test2118.tsx
index 4e5aa325ab..0e1c90cf2d 100644
--- a/TestsExample/src/Test2118.tsx
+++ b/TestsExample/src/Test2118.tsx
@@ -1,14 +1,30 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-const fill = { flex: 1 };
+const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
 
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createStackNavigator } from '@react-navigation/stack';
+const ModalStack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="DetailsStack" component={DetailsScreen} />
+        <Stack.Screen
+          name="StackInModal"
+          component={StackInModal}
+          options={{ presentation: 'modal' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -16,29 +32,20 @@ function HomeScreen({ navigation }) {
         title="Go to Details"
         onPress={() => navigation.navigate('DetailsStack')}
       />
+      <Button
+        title="Go to StackInModal"
+        onPress={() => navigation.navigate('StackInModal')}
+      />
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  wrapperCustom: {
-    width: '100%',
-    height: 100,
-    marginHorizontal: 30,
-    borderRadius: 10,
-    margin: 10,
-  },
-  text: {
-    fontSize: 20,
-    color: 'black',
-  },
-});
-
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       {new Array(10).fill(0).map((_, i) => (
         <Pressable
+          key={i.toString()}
           onPress={() => {
             Alert.alert('Pressed!');
           }}
@@ -57,17 +64,25 @@ function DetailsScreen({ navigation }) {
   );
 }
 
-const Stack = createNativeStackNavigator(); // <-- change to createStackNavigator to see a difference
-
-function App() {
+function StackInModal() {
   return (
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}>
-          <Stack.Screen name="Home" component={HomeScreen} />
-          <Stack.Screen name="DetailsStack" component={DetailsScreen} />
-        </Stack.Navigator>
-      </NavigationContainer>
+    <ModalStack.Navigator>
+      <ModalStack.Screen name="ModalHome" component={HomeScreen} />
+      <ModalStack.Screen name="ModalDetails" component={DetailsScreen} />
+    </ModalStack.Navigator>
   );
 }
 
-export default App;
+const styles = StyleSheet.create({
+  wrapperCustom: {
+    width: '100%',
+    height: 100,
+    marginHorizontal: 30,
+    borderRadius: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 20,
+    color: 'black',
+  },
+});

From 8da1a1bff3b337a0ee9f6bee41432ee977558a60 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 15 May 2024 12:20:39 +0200
Subject: [PATCH 5/6] Fix typo

---
 ios/RNSScreenStack.mm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 308f7e24d7..a244a0e74a 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -751,7 +751,7 @@ - (void)cancelTouchesInParent
   }
 
   RCTSurfaceTouchHandler *touchHandler = nil;
-  // Experimentation shows that RCTSurfaceTouchHandler is the only gestureRecogniser registered here,
+  // Experimentation shows that RCTSurfaceTouchHandler is the only gestureRecognizer registered here,
   // so we should not be afraid of any performance hit here.
   for (UIGestureRecognizer *recognizer in parent.gestureRecognizers) {
     if ([recognizer isKindOfClass:RCTSurfaceTouchHandler.class]) {

From 30cfc12bdb45107a140453dc33b27ab848a8fa9f Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 15 May 2024 14:29:39 +0200
Subject: [PATCH 6/6] Change extension method prefix from `rns` to `rnscreens`

---
 ios/RNSScreenStack.mm                          | 4 ++--
 ios/utils/RCTSurfaceTouchHandler+RNSUtility.h  | 2 +-
 ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm | 2 +-
 ios/utils/RCTTouchHandler+RNSUtility.h         | 2 +-
 ios/utils/RCTTouchHandler+RNSUtility.mm        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index a244a0e74a..5952d91086 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -759,7 +759,7 @@ - (void)cancelTouchesInParent
     }
   }
 
-  [touchHandler rns_cancelTouches];
+  [touchHandler rnscreens_cancelTouches];
 #else
   // On Paper we can access touchHandler hosted by `RCTRootContentView` which should be above ScreenStack
   // in view hierarchy.
@@ -769,7 +769,7 @@ - (void)cancelTouchesInParent
   }
   if (parent != nil) {
     RCTTouchHandler *touchHandler = [parent performSelector:@selector(touchHandler)];
-    [touchHandler rns_cancelTouches];
+    [touchHandler rnscreens_cancelTouches];
   }
 #endif // RCT_NEW_ARCH_ENABLED
 }
diff --git a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
index c6fe33414d..2f257507be 100644
--- a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
+++ b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h
@@ -6,7 +6,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface RCTSurfaceTouchHandler (RNSUtility)
 
-- (void)rns_cancelTouches;
+- (void)rnscreens_cancelTouches;
 
 @end
 
diff --git a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
index b2381a0762..ca3a86f7ae 100644
--- a/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
+++ b/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm
@@ -3,7 +3,7 @@
 
 @implementation RCTSurfaceTouchHandler (RNSUtility)
 
-- (void)rns_cancelTouches
+- (void)rnscreens_cancelTouches
 {
   [self setEnabled:NO];
   [self setEnabled:YES];
diff --git a/ios/utils/RCTTouchHandler+RNSUtility.h b/ios/utils/RCTTouchHandler+RNSUtility.h
index a8ddb73eec..5482488e18 100644
--- a/ios/utils/RCTTouchHandler+RNSUtility.h
+++ b/ios/utils/RCTTouchHandler+RNSUtility.h
@@ -6,7 +6,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface RCTTouchHandler (RNSUtility)
 
-- (void)rns_cancelTouches;
+- (void)rnscreens_cancelTouches;
 
 @end
 
diff --git a/ios/utils/RCTTouchHandler+RNSUtility.mm b/ios/utils/RCTTouchHandler+RNSUtility.mm
index 2f0e68ec59..ab27f56ca3 100644
--- a/ios/utils/RCTTouchHandler+RNSUtility.mm
+++ b/ios/utils/RCTTouchHandler+RNSUtility.mm
@@ -3,7 +3,7 @@
 
 @implementation RCTTouchHandler (RNSUtility)
 
-- (void)rns_cancelTouches
+- (void)rnscreens_cancelTouches
 {
   [self setEnabled:NO];
   [self setEnabled:YES];