fix[devtools]: still show overlay, if getClientRects is not implemented (#35294)
Follow-up to https://github.com/facebook/react/pull/34653. React Native doesn't implement `getClientRect`, since this is applicable to CSS box, which is not a concept for Native (maybe yet). I am loosening the condition that gates `showOverlay()` call to pass if `getClientRect` is not implemented. Conceptually, everything that is inside `react-devtools-shared/backend` should be Host-agnostic, because both on Web and Native it is installed inside the Host JavaScript runtime, be it main frame of the page, or RN instance. Since overlay & highlighting logic also lives there, it should also follow these principles.
Ruslan Lesiutin committed
Dec 10, 2025 at 19:21 UTC
5d801243459cc18a768c9b291355943366730539
1 file changed
+5
-6
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+5
-6
@@ -202,13 +202,12 @@ export default function setupHighlighter(
202
typeof node.getClientRects === 'function'
203
? node.getClientRects()
204
: [];
205
- // If this is currently display: none, then try another node.
206
- // This can happen when one of the host instances is a hoistable.
205
if (
208
- nodeRects.length > 0 &&
209
- (nodeRects.length > 2 ||
210
- nodeRects[0].width > 0 ||
211
- nodeRects[0].height > 0)
206
+ typeof node.getClientRects === 'undefined' || // If Host doesn't implement getClientRects, try to show the overlay.
207
+ (nodeRects.length > 0 && // If this is currently display: none, then try another node.
208
+ (nodeRects.length > 2 || // This can happen when one of the host instances is a hoistable.
209
+ nodeRects[0].width > 0 ||
210
+ nodeRects[0].height > 0))
211
) {
212
// $FlowFixMe[method-unbinding]
213
if (scrollIntoView && typeof node.scrollIntoView === 'function') {