refactor: use same rectangle spec for DebuggingOverlay native commands

Summary: Changelog: [Internal] Differential Revision: https://internalfb.com/D51708055 fbshipit-source-id: 0e0ebb343d7c83748e56606e2f45d5f42fd2f4c4
hoxyq · Jan 15, 2024 · 8790425 · 8790425
1 parent 80d555a
commit 8790425
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 10 deletions.
diff --git 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<NativeProps>;
 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
@@ -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/React/Views/RCTDebuggingOverlay.m b/packages/react-native/React/Views/RCTDebuggingOverlay.m
@@ -38,12 +38,7 @@ - (void)draw:(NSString *)serializedNodes
     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/...roid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java b/...roid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java
@@ -50,8 +50,8 @@ public void receiveCommand(
           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);