From dc5e68526d6546192d47a7b58a2db3b30c0f1aa0 Mon Sep 17 00:00:00 2001
From: adrianryt <adrianryt3@gmail.com>
Date: Fri, 27 Sep 2024 13:29:54 +0200
Subject: [PATCH] Add ForeignModal reproduction to Test2175

---
 apps/src/tests/Test2175.tsx | 44 +++++++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/apps/src/tests/Test2175.tsx b/apps/src/tests/Test2175.tsx
index a85ad6a572..7f30562f5f 100644
--- a/apps/src/tests/Test2175.tsx
+++ b/apps/src/tests/Test2175.tsx
@@ -54,7 +54,7 @@ function HomeScreen({ navigation }): React.JSX.Element {
 }
 
 function ModalScreen({ navigation }): React.JSX.Element {
-  const [toggle, setToggle] = React.useState(false);
+  const [toggle2, setToggle2] = React.useState(false);
 
   return (
     <View style={{ flex: 1, backgroundColor: 'lightcoral', opacity: 0.4 }}>
@@ -62,21 +62,40 @@ function ModalScreen({ navigation }): React.JSX.Element {
       <Button title='Go back' onPress={() => { navigation.goBack() }} />
       <View style={{ width: '100%', height: 50, backgroundColor: 'red' }} />
       <Button title='Push another Modal' onPress={() => { navigation.push('Modal') }} />
-      <Modal
-        visible={toggle}
-        onRequestClose={() => setToggle(false)}
-        presentationStyle='formSheet'
-        animationType='slide'
-      >
-        <View style={{ flex: 1, backgroundColor: 'lightblue' }}>
-          <Text>Hello I'm a foreign modal</Text>
-          <Button title='Close foreign modal' onPress={() => { setToggle(false) }} />
-        </View>
-      </Modal>
+      <Button title='Push forein modal(inside Screen Component)' onPress={() => { navigation.push('ForeignModal')}} />
+      <Button title='Push forein modal' onPress={() => { setToggle2(old => !old )}} />
+        <Modal
+            visible={toggle2}
+            onRequestClose={() => setToggle2(false)}
+            presentationStyle='formSheet'
+            animationType='slide'
+        >
+            <View style={{ flex: 1, backgroundColor: 'lightblue' }}>
+                <Text>Hello I'm a foreign modal</Text>
+                <Button title='Close foreign modal' onPress={() => { setToggle2(false) }} />
+            </View>
+        </Modal>
     </View>
   )
 }
 
+function ForeignModal({ navigation }): React.JSX.Element | null {
+    const [toggle, setToggle] = React.useState(false);
+    return (
+        <Modal
+            visible={toggle}
+            onRequestClose={() => setToggle(false)}
+            presentationStyle='formSheet'
+            animationType='slide'
+        >
+            <View style={{ flex: 1, backgroundColor: 'lightblue' }}>
+                <Text>Hello I'm a foreign modal</Text>
+                <Button title='Close foreign modal' onPress={() => { setToggle(false) }} />
+            </View>
+        </Modal>
+    )
+}
+
 
 const TestScreen = ({ navigation }): React.JSX.Element => {
   return (
@@ -122,6 +141,7 @@ function App(): React.JSX.Element {
             presentation: 'modal',
           }}
         />
+        <Stack.Screen name={"ForeignModal"} component={ForeignModal} />
       </Stack.Navigator>
     </NavigationContainer>
   );