diff --git a/apps/test-examples/App.js b/apps/test-examples/App.js
index 2ed9716762..e03655565f 100644
--- a/apps/test-examples/App.js
+++ b/apps/test-examples/App.js
@@ -98,6 +98,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';
diff --git a/apps/test-examples/src/Test2002.tsx b/apps/test-examples/src/Test2002.tsx
new file mode 100644
index 0000000000..55a5a39979
--- /dev/null
+++ b/apps/test-examples/src/Test2002.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View, Button, useColorScheme, StyleSheet } from 'react-native';
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={styles.container}>
+      <Button
+        onPress={() => navigation.navigate('fullScreenModal')}
+        title="Open fullScreenModal"
+      />
+      <Button
+        onPress={() => navigation.navigate('formSheet')}
+        title="Open formSheet"
+      />
+    </View>
+  );
+}
+
+function ModalScreen({ navigation }) {
+  return (
+    <View style={styles.container}>
+      <Button onPress={() => navigation.goBack()} title="Dismiss" />
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator();
+
+export default function App() {
+  const scheme = useColorScheme();
+
+  return (
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <RootStack.Navigator>
+        <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>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
diff --git a/ios/RNSModalScreen.mm b/ios/RNSModalScreen.mm
index f88437f8ab..e4fd0ac39f 100644
--- a/ios/RNSModalScreen.mm
+++ b/ios/RNSModalScreen.mm
@@ -7,6 +7,28 @@
 
 @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
+// 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
+{
+  [super traitCollectionDidChange:previousTraitCollection];
+  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
 {