From a059ed572dce6ffaf9c46d4447aa3f1be699ec28 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Wed, 19 Jun 2024 17:18:11 +0200
Subject: [PATCH 01/11] feat: added repro

---
 apps/test-examples/src/Test2002.tsx | 68 +++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 apps/test-examples/src/Test2002.tsx

diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
new file mode 100644
index 0000000000..dc06968c63
--- /dev/null
+++ b/apps/test-examples/src/Test2002.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { View, Text, Button, useColorScheme } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen({ navigation }) {
+  const scheme = useColorScheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
+      <Button
+        onPress={() => navigation.navigate('MyModal')}
+        title="Open Modal"
+      />
+      <Button
+        onPress={() => navigation.navigate('MyWorkingModal')}
+        title="Open Working Modal"
+      />
+      <Text style={{ marginTop: 10 }}>current scheme is: {scheme}</Text>
+    </View>
+  );
+}
+
+function ModalScreen({ navigation }) {
+  const scheme = useColorScheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
+      <Button onPress={() => navigation.goBack()} title="Dismiss" />
+      <Text style={{ marginTop: 10 }}>current scheme is: {scheme}</Text>
+    </View>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <View>
+      <Text>Details</Text>
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator>
+        <RootStack.Group>
+          <RootStack.Screen name="Home" component={HomeScreen} />
+          <RootStack.Screen name="Details" component={DetailsScreen} />
+          <RootStack.Screen
+            name="MyWorkingModal"
+            component={ModalScreen}
+            options={{ presentation: 'formSheet' }}
+          />
+        </RootStack.Group>
+        <RootStack.Group screenOptions={{ presentation: 'fullScreenModal' }}>
+          <RootStack.Screen name="MyModal" component={ModalScreen} />
+        </RootStack.Group>
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

From 11c54a33ef5c1701af04ba6891b7700852c1ffb0 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Thu, 20 Jun 2024 10:27:13 +0200
Subject: [PATCH 02/11] feat: added real theme to repro

---
 apps/test-examples/src/Test2002.tsx | 48 +++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
index dc06968c63..84c2fe8449 100644
--- a/apps/test-examples/src/Test2002.tsx
+++ b/apps/test-examples/src/Test2002.tsx
@@ -1,14 +1,21 @@
 import * as React from 'react';
-import { View, Text, Button, useColorScheme } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { View, Text, Button, useColorScheme, StyleSheet } from 'react-native';
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+} from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 function HomeScreen({ navigation }) {
   const scheme = useColorScheme();
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
+    <View style={styles.container}>
+      <Text
+        style={[styles.text, { color: scheme === 'dark' ? '#FFF' : '#000' }]}>
+        This is the home screen!
+      </Text>
       <Button
         onPress={() => navigation.navigate('MyModal')}
         title="Open Modal"
@@ -17,7 +24,13 @@ function HomeScreen({ navigation }) {
         onPress={() => navigation.navigate('MyWorkingModal')}
         title="Open Working Modal"
       />
-      <Text style={{ marginTop: 10 }}>current scheme is: {scheme}</Text>
+      <Text
+        style={[
+          styles.schemeText,
+          { color: scheme === 'dark' ? '#FFF' : '#000' },
+        ]}>
+        current scheme is: {scheme}
+      </Text>
     </View>
   );
 }
@@ -26,10 +39,19 @@ function ModalScreen({ navigation }) {
   const scheme = useColorScheme();
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
+    <View style={styles.container}>
+      <Text
+        style={[styles.text, { color: scheme === 'dark' ? '#FFF' : '#000' }]}>
+        This is a modal!
+      </Text>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
-      <Text style={{ marginTop: 10 }}>current scheme is: {scheme}</Text>
+      <Text
+        style={[
+          styles.schemeText,
+          { color: scheme === 'dark' ? '#FFF' : '#000' },
+        ]}>
+        current scheme is: {scheme}
+      </Text>
     </View>
   );
 }
@@ -45,8 +67,10 @@ function DetailsScreen() {
 const RootStack = createNativeStackNavigator();
 
 function App() {
+  const scheme = useColorScheme();
+
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <RootStack.Navigator>
         <RootStack.Group>
           <RootStack.Screen name="Home" component={HomeScreen} />
@@ -66,3 +90,9 @@ function App() {
 }
 
 export default App;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  text: { fontSize: 30, marginBottom: 20 },
+  schemeText: { marginTop: 20 },
+});

From 623c58d0adccb720d35cbfa5be8fb10d60a54b84 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Fri, 21 Jun 2024 08:29:49 +0200
Subject: [PATCH 03/11] added repro import

---
 apps/test-examples/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/test-examples/App.js b/apps/test-examples/App.js
index ebac1c8435..825595aafc 100644
--- a/apps/test-examples/App.js
+++ b/apps/test-examples/App.js
@@ -96,6 +96,7 @@ import Test1844 from './src/Test1844';
 import Test1864 from './src/Test1864';
 import Test1970 from './src/Test1970';
 import Test1981 from './src/Test1981';
+import Test2002 from './src/Test2002';
 import Test2008 from './src/Test2008';
 import Test2028 from './src/Test2028';
 import Test2048 from './src/Test2048';

From cc19a9ca3b2905688e9b89d060fb1ea5386da6c1 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Fri, 21 Jun 2024 08:40:02 +0200
Subject: [PATCH 04/11] simplified repro

---
 apps/test-examples/src/Test2002.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
index 84c2fe8449..7580c5c9c1 100644
--- a/apps/test-examples/src/Test2002.tsx
+++ b/apps/test-examples/src/Test2002.tsx
@@ -24,13 +24,6 @@ function HomeScreen({ navigation }) {
         onPress={() => navigation.navigate('MyWorkingModal')}
         title="Open Working Modal"
       />
-      <Text
-        style={[
-          styles.schemeText,
-          { color: scheme === 'dark' ? '#FFF' : '#000' },
-        ]}>
-        current scheme is: {scheme}
-      </Text>
     </View>
   );
 }
@@ -45,13 +38,6 @@ function ModalScreen({ navigation }) {
         This is a modal!
       </Text>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
-      <Text
-        style={[
-          styles.schemeText,
-          { color: scheme === 'dark' ? '#FFF' : '#000' },
-        ]}>
-        current scheme is: {scheme}
-      </Text>
     </View>
   );
 }
@@ -94,5 +80,4 @@ export default App;
 const styles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
   text: { fontSize: 30, marginBottom: 20 },
-  schemeText: { marginTop: 20 },
 });

From 0e106ad04747dce9be7297043fafa5cdf2971f22 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Fri, 21 Jun 2024 08:42:22 +0200
Subject: [PATCH 05/11] simplified repro

---
 apps/test-examples/src/Test2002.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
index 7580c5c9c1..d35dabc93c 100644
--- a/apps/test-examples/src/Test2002.tsx
+++ b/apps/test-examples/src/Test2002.tsx
@@ -42,14 +42,6 @@ function ModalScreen({ navigation }) {
   );
 }
 
-function DetailsScreen() {
-  return (
-    <View>
-      <Text>Details</Text>
-    </View>
-  );
-}
-
 const RootStack = createNativeStackNavigator();
 
 function App() {
@@ -60,7 +52,6 @@ function App() {
       <RootStack.Navigator>
         <RootStack.Group>
           <RootStack.Screen name="Home" component={HomeScreen} />
-          <RootStack.Screen name="Details" component={DetailsScreen} />
           <RootStack.Screen
             name="MyWorkingModal"
             component={ModalScreen}

From eaae24cd738632c290cf4416e877c9630f4c2b67 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Fri, 21 Jun 2024 08:45:29 +0200
Subject: [PATCH 06/11] simplified repro

---
 apps/test-examples/src/Test2002.tsx | 49 ++++++++++-------------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
index d35dabc93c..55a5a39979 100644
--- a/apps/test-examples/src/Test2002.tsx
+++ b/apps/test-examples/src/Test2002.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text, Button, useColorScheme, StyleSheet } from 'react-native';
+import { View, Button, useColorScheme, StyleSheet } from 'react-native';
 import {
   DarkTheme,
   DefaultTheme,
@@ -8,35 +8,23 @@ import {
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 function HomeScreen({ navigation }) {
-  const scheme = useColorScheme();
-
   return (
     <View style={styles.container}>
-      <Text
-        style={[styles.text, { color: scheme === 'dark' ? '#FFF' : '#000' }]}>
-        This is the home screen!
-      </Text>
       <Button
-        onPress={() => navigation.navigate('MyModal')}
-        title="Open Modal"
+        onPress={() => navigation.navigate('fullScreenModal')}
+        title="Open fullScreenModal"
       />
       <Button
-        onPress={() => navigation.navigate('MyWorkingModal')}
-        title="Open Working Modal"
+        onPress={() => navigation.navigate('formSheet')}
+        title="Open formSheet"
       />
     </View>
   );
 }
 
 function ModalScreen({ navigation }) {
-  const scheme = useColorScheme();
-
   return (
     <View style={styles.container}>
-      <Text
-        style={[styles.text, { color: scheme === 'dark' ? '#FFF' : '#000' }]}>
-        This is a modal!
-      </Text>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
     </View>
   );
@@ -44,31 +32,28 @@ function ModalScreen({ navigation }) {
 
 const RootStack = createNativeStackNavigator();
 
-function App() {
+export default function App() {
   const scheme = useColorScheme();
 
   return (
     <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <RootStack.Navigator>
-        <RootStack.Group>
-          <RootStack.Screen name="Home" component={HomeScreen} />
-          <RootStack.Screen
-            name="MyWorkingModal"
-            component={ModalScreen}
-            options={{ presentation: 'formSheet' }}
-          />
-        </RootStack.Group>
-        <RootStack.Group screenOptions={{ presentation: 'fullScreenModal' }}>
-          <RootStack.Screen name="MyModal" component={ModalScreen} />
-        </RootStack.Group>
+        <RootStack.Screen name="Home" component={HomeScreen} />
+        <RootStack.Screen
+          name="formSheet"
+          component={ModalScreen}
+          options={{ presentation: 'formSheet' }}
+        />
+        <RootStack.Screen
+          name="fullScreenModal"
+          component={ModalScreen}
+          options={{ presentation: 'fullScreenModal' }}
+        />
       </RootStack.Navigator>
     </NavigationContainer>
   );
 }
 
-export default App;
-
 const styles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  text: { fontSize: 30, marginBottom: 20 },
 });

From 17af80e13a09851cdd2b818686af9134eacd0931 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 26 Jun 2024 10:52:24 +0200
Subject: [PATCH 07/11] Add working PoC of the solution

Needs to be cleaned up
---
 ios/RNSModalScreen.mm | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index f88437f8ab..4f9a74014f 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -7,6 +7,28 @@
 
 @implementation RNSModalScreen
 
+- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
+{
+  [super traitCollectionDidChange:previousTraitCollection];
+
+  // Describe following facts:
+  // 1. With full screen modal react root view is mounted in the initial view hierarchy
+  // 2. Thus the trait observation in react root view does not work anymore
+  // 3. we need to send theme-chanages notification our selves
+  // Describe this in-depth in PR and paste link here
+  if (RCTSharedApplication().applicationState == UIApplicationStateBackground ||
+      (self.stackPresentation != RNSScreenStackPresentationFullScreenModal)) {
+    return;
+  }
+
+  [[NSNotificationCenter defaultCenter]
+      postNotificationName:RCTUserInterfaceStyleDidChangeNotification
+                    object:self
+                  userInfo:@{
+                    RCTUserInterfaceStyleDidChangeNotificationTraitCollectionKey : self.traitCollection,
+                  }];
+}
+
 #ifdef RCT_NEW_ARCH_ENABLED
 + (react::ComponentDescriptorProvider)componentDescriptorProvider
 {

From 63af30af1400b9edd76653b5e0f4a4443f42b959 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Wed, 26 Jun 2024 11:41:55 +0200
Subject: [PATCH 08/11] chore: update comment

---
 ios/RNSModalScreen.mm | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index 4f9a74014f..03c72db5d3 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -7,15 +7,13 @@
 
 @implementation RNSModalScreen
 
+// When using UIModalPresentationStyleFullScreen the views belonging to the presenting view controller are removed,
+// Thus there is no RCTRootView mounted and no trait observer working.
+// We have to set up an extra observer and send change notifications accoridngly
+// For more information, see https://github.com/software-mansion/react-native-screens/pull/2211.
 - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
 {
   [super traitCollectionDidChange:previousTraitCollection];
-
-  // Describe following facts:
-  // 1. With full screen modal react root view is mounted in the initial view hierarchy
-  // 2. Thus the trait observation in react root view does not work anymore
-  // 3. we need to send theme-chanages notification our selves
-  // Describe this in-depth in PR and paste link here
   if (RCTSharedApplication().applicationState == UIApplicationStateBackground ||
       (self.stackPresentation != RNSScreenStackPresentationFullScreenModal)) {
     return;

From b9f377da95582516951e3d4154c18cff56a8a29c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Du=C5=BCy?=
 <91994767+alduzy@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:59:46 +0200
Subject: [PATCH 09/11] Update ios/RNSModalScreen.mm

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
---
 ios/RNSModalScreen.mm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index 03c72db5d3..101906f3ee 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -15,7 +15,7 @@ - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
 {
   [super traitCollectionDidChange:previousTraitCollection];
   if (RCTSharedApplication().applicationState == UIApplicationStateBackground ||
-      (self.stackPresentation != RNSScreenStackPresentationFullScreenModal)) {
+      self.stackPresentation != RNSScreenStackPresentationFullScreenModal) {
     return;
   }
 

From 3283fe3aa82504c08449be7abf27df5b0c733512 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Wed, 26 Jun 2024 12:04:00 +0200
Subject: [PATCH 10/11] chore: updated comment

---
 ios/RNSModalScreen.mm | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index 101906f3ee..02a0224b25 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -7,9 +7,11 @@
 
 @implementation RNSModalScreen
 
-// When using UIModalPresentationStyleFullScreen the views belonging to the presenting view controller are removed,
-// Thus there is no RCTRootView mounted and no trait observer working.
-// We have to set up an extra observer and send change notifications accoridngly
+// When using UIModalPresentationStyleFullScreen the whole view hierarchy mounted under primary `UITransitionView` is
+// removed, including React's root view, which observes for trait collection changes & sends it to `Appearance` module
+// via system notification centre. To workaround this detached-root-view-situation we emit the event to React's
+// `Appearance` module ourselves. For the RCTRootView observer, visit:
+// https://github.com/facebook/react-native/blob/d3e0430deac573fd44792e6005d5de20e9ad2797/packages/react-native/React/Base/RCTRootView.m#L362
 // For more information, see https://github.com/software-mansion/react-native-screens/pull/2211.
 - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
 {

From 776bebf8571bf25900debd174c773f77068370a2 Mon Sep 17 00:00:00 2001
From: alduzy <alduzy@gmail.com>
Date: Wed, 26 Jun 2024 12:06:24 +0200
Subject: [PATCH 11/11] chore:update comment

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

diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index 02a0224b25..e4fd0ac39f 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -10,7 +10,7 @@ @implementation RNSModalScreen
 // When using UIModalPresentationStyleFullScreen the whole view hierarchy mounted under primary `UITransitionView` is
 // removed, including React's root view, which observes for trait collection changes & sends it to `Appearance` module
 // via system notification centre. To workaround this detached-root-view-situation we emit the event to React's
-// `Appearance` module ourselves. For the RCTRootView observer, visit:
+// `Appearance` module ourselves. For the RCTRootView observer, visit
 // https://github.com/facebook/react-native/blob/d3e0430deac573fd44792e6005d5de20e9ad2797/packages/react-native/React/Base/RCTRootView.m#L362
 // For more information, see https://github.com/software-mansion/react-native-screens/pull/2211.
 - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection