From 4b2a2e93c8d35c667644cffdf47875b80ff8066d Mon Sep 17 00:00:00 2001
From: Aleksandr Litinskii <w.siteee@gmail.com>
Date: Thu, 22 Oct 2026 15:27:18 +0300
Subject: [PATCH] Reproduce Android edge-to-edge Modal initial layout in
 RNTester

Add a minimal Playground reproducer for #59353. Preserve every onLayout height and disable Modal animation so the initial screen-minus-insets size is observable.
---
 .../examples/Playground/RNTesterPlayground.js | 57 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
index 8e6b10479de7..e914bc40a457 100644
--- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
@@ -12,14 +12,57 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTesterText from '../../components/RNTesterText';
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Button, Dimensions, Modal, StyleSheet, View} from 'react-native';
 
 function Playground() {
+  const [visible, setVisible] = React.useState(false);
+  const [heights, setHeights] = React.useState<Array<number>>([]);
+  const screenHeight = Dimensions.get('screen').height;
+
   return (
     <View style={styles.container}>
       <RNTesterText>
-        Edit "RNTesterPlayground.js" to change this file
+        Android edge-to-edge Modal initial layout (issue #59353)
+      </RNTesterText>
+      <RNTesterText>Screen height: {screenHeight}</RNTesterText>
+      <RNTesterText>
+        Every onLayout height: {heights.join(' -> ') || 'Open the modal'}
       </RNTesterText>
+      <Button
+        title="Open Modal"
+        onPress={() => {
+          setHeights([]);
+          setVisible(true);
+        }}
+      />
+      {visible && (
+        <Modal
+          visible
+          transparent
+          statusBarTranslucent
+          navigationBarTranslucent
+          animationType="none"
+          onRequestClose={() => setVisible(false)}>
+          <View
+            collapsable={false}
+            style={styles.modal}
+            onLayout={({nativeEvent: {layout}}) => {
+              console.log('Modal onLayout:', layout);
+              setHeights(previous => [...previous, layout.height]);
+            }}>
+            <View style={styles.content}>
+              <RNTesterText>Screen height: {screenHeight}</RNTesterText>
+              <RNTesterText>
+                Every onLayout height: {heights.join(' -> ')}
+              </RNTesterText>
+              <RNTesterText>
+                Expected: the first height matches the full modal window.
+              </RNTesterText>
+              <Button title="Close Modal" onPress={() => setVisible(false)} />
+            </View>
+          </View>
+        </Modal>
+      )}
     </View>
   );
 }
@@ -28,11 +71,19 @@ const styles = StyleSheet.create({
   container: {
     padding: 10,
   },
+  modal: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#bde3ff',
+  },
+  content: {
+    paddingHorizontal: 24,
+    paddingTop: 100,
+  },
 });
 
 export default {
   title: 'Playground',
   name: 'playground',
-  description: 'Test out new features and ideas.',
+  description: 'Reproduce the initial height of an Android edge-to-edge Modal.',
   render: (): React.Node => <Playground />,
 } as RNTesterModuleExample;