Skip to content

Commit

Permalink
fix: debugging overlays should not have explicit height
Browse files Browse the repository at this point in the history
Summary:
# 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  - facebook#38024

Here is an explanation: facebook#38024 (comment)

Differential Revision: D50644900

fbshipit-source-id: fdb5c43a2b5c7447f964e3f6bf470af492b4e81a
  • Loading branch information
hoxyq authored and facebook-github-bot committed Dec 1, 2023
1 parent bcd35df commit 663a5a1
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 5 deletions.
4 changes: 2 additions & 2 deletions packages/react-native/Libraries/Inspector/InspectorOverlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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>
);
Expand All @@ -59,6 +58,7 @@ const styles = StyleSheet.create({
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -166,5 +166,6 @@ const styles = StyleSheet.create({
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});

0 comments on commit 663a5a1

Please sign in to comment.