From 130412cb08f6304f3de58d4abba186906416198f Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <hoxy@meta.com>
Date: Mon, 8 Jan 2024 00:51:42 -0800
Subject: [PATCH] fix: debugging overlays should not have explicit height
 (#41750)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41750

# Changelog:
[ANDROID] [FIXED] - fixed unexpected resizing of ReactRootView for dev bundles in brownfield apps

There was an android-only issue related to brownfield apps, when React Native root view is inside a modal and resizes it  - https://github.com/facebook/react-native/issues/38024

Here is an explanation: https://github.com/facebook/react-native/issues/38024#issuecomment-1660848653

Reviewed By: NickGerleman, motiz88

Differential Revision: D50644900

fbshipit-source-id: c618d30db1eade945097882ac1d21c691ff12635
---
 .../react-native/Libraries/Inspector/InspectorOverlay.js   | 4 ++--
 .../Libraries/Inspector/ReactDevToolsOverlay.js            | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/Libraries/Inspector/InspectorOverlay.js b/packages/react-native/Libraries/Inspector/InspectorOverlay.js
index d1ef1a13bbf198..33b7ce67d63515 100644
--- a/packages/react-native/Libraries/Inspector/InspectorOverlay.js
+++ b/packages/react-native/Libraries/Inspector/InspectorOverlay.js
@@ -15,7 +15,6 @@ import type {InspectedElement} from './Inspector';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
@@ -46,7 +45,7 @@ function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
       onStartShouldSetResponder={handleStartShouldSetResponder}
       onResponderMove={findViewForTouchEvent}
       nativeID="inspectorOverlay" /* TODO: T68258846. */
-      style={[styles.inspector, {height: Dimensions.get('window').height}]}>
+      style={styles.inspector}>
       {content}
     </View>
   );
@@ -59,6 +58,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });
 
diff --git a/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js b/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js
index dfc28608a09acb..866c3d7d4e99f6 100644
--- a/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js
+++ b/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js
@@ -17,7 +17,6 @@ import type {InspectedElement} from './Inspector';
 import View from '../Components/View/View';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import StyleSheet from '../StyleSheet/StyleSheet';
-import Dimensions from '../Utilities/Dimensions';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
@@ -130,7 +129,8 @@ export default function ReactDevToolsOverlay({
     [onResponderMove],
   );
 
-  let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+  const highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+
   if (isInspecting) {
     const events =
       // Pointer events only work on fabric
@@ -149,7 +149,7 @@ export default function ReactDevToolsOverlay({
     return (
       <View
         nativeID="devToolsInspectorOverlay"
-        style={[styles.inspector, {height: Dimensions.get('window').height}]}
+        style={styles.inspector}
         {...events}>
         {highlight}
       </View>
@@ -166,5 +166,6 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });