From e17021fda8d934998f84559fc20cf7fcd330fc5b Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 24 Oct 2025 12:11:00 +0200
Subject: [PATCH 1/4] Initial reproduction

---
 apps/src/tests/TestLayout.tsx | 106 ++++++++++++++++++++++++++++++++++
 apps/src/tests/index.ts       |   1 +
 2 files changed, 107 insertions(+)
 create mode 100644 apps/src/tests/TestLayout.tsx

diff --git a/apps/src/tests/TestLayout.tsx b/apps/src/tests/TestLayout.tsx
new file mode 100644
index 0000000000..e4e1855132
--- /dev/null
+++ b/apps/src/tests/TestLayout.tsx
@@ -0,0 +1,106 @@
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { Button, Pressable, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const Stack = createNativeStackNavigator();
+
+function Navigation() {
+  return (
+    <NavigationContainer>
+      <StackComponent />
+    </NavigationContainer>
+  )
+}
+
+function StackComponent() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={Home} />
+      <Stack.Screen name="GreenModal" component={GreenScreen} options={{
+        presentation: 'modal'
+      }} />
+    </Stack.Navigator>
+  )
+}
+
+function Home({ navigation }) {
+  const showModalAction = React.useCallback(() => {
+    navigation.navigate('GreenModal');
+  }, [navigation]);
+
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Hello world</Text>
+      <Button title="Show modal" onPress={showModalAction} />
+    </View>
+  );
+}
+
+function ModalContent() {
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Hello world from modal</Text>
+    </View>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = React.useState(0);
+
+  const counterAction = React.useCallback(() => {
+    setCount(v => v + 1);
+  }, []);
+
+  return (
+    <Pressable onPress={counterAction}>
+      <Text>{`Counter: ${count}`}</Text>
+    </Pressable>
+  )
+}
+
+export function GreenScreen() {
+  const insets = useSafeAreaInsets();
+  return (
+    <>
+      <View style={{ flex: 1, paddingBottom: insets.bottom }}>
+        <Pressable>
+          <Text>Green / Modal </Text>
+        </Pressable>
+        <Counter />
+        <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
+        <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
+      </View>
+    </>
+  );
+}
+
+export function GreenModal() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
+      {/* <Pressable onPress={() => router.dismiss()}> */}
+      {/*   <Text>dismiss()</Text> */}
+      {/* </Pressable> */}
+      {/* <Pressable onPress={() => router.dismissAll()}> */}
+      {/*   <Text>dismissAll()</Text> */}
+      {/* </Pressable> */}
+      {/* <Pressable onPress={() => router.dismissTo("/blue")}> */}
+      {/*   <Text>dismissTo("/blue")</Text> */}
+      {/* </Pressable> */}
+      {/* <Pressable onPress={() => router.dismissTo("/red")}> */}
+      {/*   <Text>dismissTo("/red")</Text> */}
+      {/* </Pressable> */}
+      <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
+      <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <Navigation />
+  );
+}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index af7d677e20..58a3d779ed 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -168,3 +168,4 @@ export { default as TestBottomTabs } from './TestBottomTabs';
 export { default as TestScreenStack } from './TestScreenStack';
 export { default as TestSplitView } from './TestSplitView';
 export { default as TestSafeAreaViewIOS } from './TestSafeAreaViewIOS';
+export { default as TestLayout } from './TestLayout';

From 2aa50830410cd9b4a07cad34783b0d1d78730d54 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 27 Oct 2025 13:29:28 +0100
Subject: [PATCH 2/4] Filter out setting frame from RN for modals

This is done to prevent exactly the same issue we have with native
header. Basically e.g. on iPads, the horizontal space available is
constrained (the modal view is narrower than the view underneath) and
the native layout differs from first Yoga layout leading to content
jumps & flickers in the very beginning, before we send first state
updates.

I filter these out now. Relying fully on native layout. Really hard to
state whether it won't break anything. Until now manual testing seems
ok.
---
 ios/RNSScreen.mm | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 65c18f1ddc..bd1fa9429a 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -1464,6 +1464,14 @@ - (void)updateLayoutMetrics:(const react::LayoutMetrics &)layoutMetrics
   _newLayoutMetrics = layoutMetrics;
   _oldLayoutMetrics = oldLayoutMetrics;
   UIViewController *parentVC = self.reactViewController.parentViewController;
+
+  if (parentVC == nil && [self isKindOfClass:RNSModalScreen.class]) {
+    // If we're in modal presentation, we don't want to set the frame from RN,
+    // as the available space is most likely restriced & differs from what Yoga
+    // resolves during firt layout. We want to rely on native layout here.
+    return;
+  }
+
   if (parentVC == nil || ![parentVC isKindOfClass:[RNSNavigationController class]]) {
     [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
   }

From b23d32075c4e0877f820a184e642376aad6e275e Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 27 Oct 2025 13:57:11 +0100
Subject: [PATCH 3/4] Update reproduction

---
 apps/src/tests/Test3345.tsx   |  49 ++++++++++++++++
 apps/src/tests/TestLayout.tsx | 106 ----------------------------------
 apps/src/tests/index.ts       |   2 +-
 3 files changed, 50 insertions(+), 107 deletions(-)
 create mode 100644 apps/src/tests/Test3345.tsx
 delete mode 100644 apps/src/tests/TestLayout.tsx

diff --git a/apps/src/tests/Test3345.tsx b/apps/src/tests/Test3345.tsx
new file mode 100644
index 0000000000..1100669fb2
--- /dev/null
+++ b/apps/src/tests/Test3345.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function HomeScreen({ navigation }) {
+  return (
+    // In original repro SafeAreaView from `react-native` has been used here. 
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button
+        title="Open Modal"
+        onPress={() => navigation.navigate('Modal')}
+      />
+    </View>
+  );
+}
+
+function ModalScreen() {
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    console.log('Modal width:', width);
+  };
+  return (
+    <View style={{ flex: 1, width: '100%', alignSelf: 'center', paddingHorizontal: 16, backgroundColor: 'green' }} onLayout={onLayout}>
+      <View style={{ flex: 1, backgroundColor: 'purple' }} />
+    </View>
+  );
+}
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          name="Modal"
+          component={ModalScreen}
+          options={{
+            presentation: 'modal'
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;
diff --git a/apps/src/tests/TestLayout.tsx b/apps/src/tests/TestLayout.tsx
deleted file mode 100644
index e4e1855132..0000000000
--- a/apps/src/tests/TestLayout.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import React from "react";
-import { Button, Pressable, Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const Stack = createNativeStackNavigator();
-
-function Navigation() {
-  return (
-    <NavigationContainer>
-      <StackComponent />
-    </NavigationContainer>
-  )
-}
-
-function StackComponent() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen name="Home" component={Home} />
-      <Stack.Screen name="GreenModal" component={GreenScreen} options={{
-        presentation: 'modal'
-      }} />
-    </Stack.Navigator>
-  )
-}
-
-function Home({ navigation }) {
-  const showModalAction = React.useCallback(() => {
-    navigation.navigate('GreenModal');
-  }, [navigation]);
-
-
-  return (
-    <View style={{ flex: 1 }}>
-      <Text>Hello world</Text>
-      <Button title="Show modal" onPress={showModalAction} />
-    </View>
-  );
-}
-
-function ModalContent() {
-  return (
-    <View style={{ flex: 1 }}>
-      <Text>Hello world from modal</Text>
-    </View>
-  );
-}
-
-function Counter() {
-  const [count, setCount] = React.useState(0);
-
-  const counterAction = React.useCallback(() => {
-    setCount(v => v + 1);
-  }, []);
-
-  return (
-    <Pressable onPress={counterAction}>
-      <Text>{`Counter: ${count}`}</Text>
-    </Pressable>
-  )
-}
-
-export function GreenScreen() {
-  const insets = useSafeAreaInsets();
-  return (
-    <>
-      <View style={{ flex: 1, paddingBottom: insets.bottom }}>
-        <Pressable>
-          <Text>Green / Modal </Text>
-        </Pressable>
-        <Counter />
-        <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
-        <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
-      </View>
-    </>
-  );
-}
-
-export function GreenModal() {
-  const insets = useSafeAreaInsets();
-  return (
-    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
-      {/* <Pressable onPress={() => router.dismiss()}> */}
-      {/*   <Text>dismiss()</Text> */}
-      {/* </Pressable> */}
-      {/* <Pressable onPress={() => router.dismissAll()}> */}
-      {/*   <Text>dismissAll()</Text> */}
-      {/* </Pressable> */}
-      {/* <Pressable onPress={() => router.dismissTo("/blue")}> */}
-      {/*   <Text>dismissTo("/blue")</Text> */}
-      {/* </Pressable> */}
-      {/* <Pressable onPress={() => router.dismissTo("/red")}> */}
-      {/*   <Text>dismissTo("/red")</Text> */}
-      {/* </Pressable> */}
-      <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
-      <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
-    </View>
-  );
-}
-
-export default function App() {
-  return (
-    <Navigation />
-  );
-}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index 58a3d779ed..ec8a48b634 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -168,4 +168,4 @@ export { default as TestBottomTabs } from './TestBottomTabs';
 export { default as TestScreenStack } from './TestScreenStack';
 export { default as TestSplitView } from './TestSplitView';
 export { default as TestSafeAreaViewIOS } from './TestSafeAreaViewIOS';
-export { default as TestLayout } from './TestLayout';
+export { default as Test3345 } from './Test3345';

From ad8eda8462b05dd586f2543323de00303eb76d8f Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 4 Nov 2025 11:50:49 +0100
Subject: [PATCH 4/4] Commit actual reproduction

---
 apps/src/tests/Test3345.tsx | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/src/tests/Test3345.tsx b/apps/src/tests/Test3345.tsx
index 1100669fb2..6ca0de92da 100644
--- a/apps/src/tests/Test3345.tsx
+++ b/apps/src/tests/Test3345.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Button } from 'react-native';
+import { View, Button, ScrollView } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
@@ -23,12 +23,35 @@ function ModalScreen() {
     console.log('Modal width:', width);
   };
   return (
-    <View style={{ flex: 1, width: '100%', alignSelf: 'center', paddingHorizontal: 16, backgroundColor: 'green' }} onLayout={onLayout}>
-      <View style={{ flex: 1, backgroundColor: 'purple' }} />
+    <View style={{ flex: 1, width: '100%', flexDirection: 'row', paddingHorizontal: 16, backgroundColor: 'green' }} onLayout={onLayout}>
+      <ScrollView style={{ alignSelf: 'center', width: 600 }}>
+        <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+        <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+        <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+      </ScrollView>
     </View>
   );
 }
 
+function ModalScreen2() {
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    console.log('Modal width:', width);
+  };
+  return (
+    <View style={{ flex: 1, backgroundColor: 'green' }} onLayout={onLayout}>
+      <View style={{ flex: 1, overflow: 'hidden', elevation: 4 }}>
+        <View style={{ flex: 1 }}>
+          <ScrollView contentContainerStyle={{ maxWidth: 600, alignSelf: 'center', width: '100%', paddingHorizontal: 16, flex: 1 }}>
+            <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+            <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+            <View style={{ width: 600, height: 400, backgroundColor: 'purple', alignSelf: 'center' }} />
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+}
 function App() {
   return (
     <NavigationContainer>
@@ -36,7 +59,7 @@ function App() {
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen
           name="Modal"
-          component={ModalScreen}
+          component={ModalScreen2}
           options={{
             presentation: 'modal'
           }}