diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js index 012a9b1887e..204aca19062 100644 --- a/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js +++ b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js @@ -21,7 +21,7 @@ type NativeProps = $ReadOnly<{| |}>; export type DebuggingOverlayNativeComponentType = HostComponent; export type Overlay = { - rect: {left: number, top: number, width: number, height: number}, + rect: ElementRectangle, color: ?ProcessedColorValue, }; diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js index aadb7003102..2cc32e6ee65 100644 --- a/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js +++ b/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js @@ -111,7 +111,7 @@ class DebuggingOverlayRegistry { // TODO(T171095283): We should refactor this to use `getBoundingClientRect` when Paper is no longer supported. publicInstance.measure((x, y, width, height, left, top) => { resolve({ - rect: {left, top, width, height}, + rect: {x: left, y: top, width, height}, color: processColor(color), }); }); diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index f96ddb2bf17..3ddeeb73ec5 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -4770,7 +4770,7 @@ exports[`public API should not change unintentionally Libraries/Debugging/Debugg |}>; export type DebuggingOverlayNativeComponentType = HostComponent; export type Overlay = { - rect: { left: number, top: number, width: number, height: number }, + rect: ElementRectangle, color: ?ProcessedColorValue, }; export type ElementRectangle = { diff --git a/packages/react-native/React/Views/RCTDebuggingOverlay.m b/packages/react-native/React/Views/RCTDebuggingOverlay.m index c605864818e..986e7ed7b4c 100644 --- a/packages/react-native/React/Views/RCTDebuggingOverlay.m +++ b/packages/react-native/React/Views/RCTDebuggingOverlay.m @@ -38,12 +38,7 @@ NSDictionary *nodeRectangle = node[@"rect"]; NSNumber *nodeColor = node[@"color"]; - NSNumber *x = nodeRectangle[@"left"]; - NSNumber *y = nodeRectangle[@"top"]; - NSNumber *width = nodeRectangle[@"width"]; - NSNumber *height = nodeRectangle[@"height"]; - - CGRect rect = CGRectMake(x.doubleValue, y.doubleValue, width.doubleValue, height.doubleValue); + CGRect rect = [RCTConvert CGRect:nodeRectangle]; UIView *box = [[UIView alloc] initWithFrame:rect]; box.backgroundColor = [UIColor clearColor]; diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java index 707e3b398b4..02af5711c6c 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java @@ -50,8 +50,8 @@ public class DebuggingOverlayManager extends SimpleViewManager for (int i = 0; i < overlaysArr.length(); i++) { JSONObject overlay = overlaysArr.getJSONObject(i); JSONObject rectObj = overlay.getJSONObject("rect"); - float left = (float) rectObj.getDouble("left"); - float top = (float) rectObj.getDouble("top"); + float left = (float) rectObj.getDouble("x"); + float top = (float) rectObj.getDouble("y"); float right = (float) (left + rectObj.getDouble("width")); float bottom = (float) (top + rectObj.getDouble("height")); RectF rect = new RectF(left, top, right, bottom);