fix(new arch): change measure function to measure native view hierarchy on UI thread

hannomargelo · hannomargelo · commit c86f396e5a98 · 2025-05-27T10:07:57.000+02:00
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java
@@ -32,6 +32,7 @@
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.ThreadConfined;
 import com.facebook.proguard.annotations.DoNotStripAny;
+import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.GuardedRunnable;
 import com.facebook.react.bridge.LifecycleEventListener;
@@ -1183,6 +1184,27 @@ public String toString() {
         });
   }
 
+  public void measure(int surfaceId, int reactTag, final Callback callback) {
+    mMountItemDispatcher.addMountItem(
+      new MountItem() {
+        @Override
+        public void execute(@NonNull MountingManager mountingManager) {
+          mMountingManager.measure(surfaceId, reactTag, callback);
+        }
+
+        @Override
+        public int getSurfaceId() {
+          return surfaceId;
+        }
+
+        @NonNull
+        @Override
+        public String toString() {
+          return "MEASURE_VIEW";
+        }
+      });
+  }
+
   @Override
   public void profileNextBatch() {
     // TODO T31905686: Remove this method and add support for multi-threading performance counters
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountingManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountingManager.java
@@ -10,13 +10,19 @@
 import static com.facebook.infer.annotation.ThreadConfined.ANY;
 import static com.facebook.infer.annotation.ThreadConfined.UI;
 
+import android.graphics.Matrix;
+import android.graphics.RectF;
+import android.util.Log;
 import android.view.View;
+import android.view.ViewParent;
+
 import androidx.annotation.AnyThread;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.UiThread;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.ThreadConfined;
+import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.bridge.ReadableArray;
@@ -30,12 +36,16 @@
 import com.facebook.react.fabric.events.EventEmitterWrapper;
 import com.facebook.react.fabric.mounting.mountitems.MountItem;
 import com.facebook.react.touch.JSResponderHandler;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.RootViewManager;
+import com.facebook.react.uimanager.RootViewUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewManagerRegistry;
 import com.facebook.react.uimanager.common.ViewUtil;
 import com.facebook.react.uimanager.events.EventCategoryDef;
 import com.facebook.yoga.YogaMeasureMode;
+
+import java.util.Arrays;
 import java.util.Map;
 import java.util.Queue;
 import java.util.concurrent.ConcurrentHashMap;
@@ -472,4 +482,65 @@ public void enqueuePendingEvent(
         ? getSurfaceManagerForView(reactTag)
         : getSurfaceManager(surfaceId));
   }
+
+  public void measure(int surfaceId, int reactTag, final Callback callback) {
+    UiThreadUtil.assertOnUiThread();
+    SurfaceMountingManager smm = getSurfaceMountingManager(surfaceId, reactTag);
+    View view = smm.getView(reactTag);
+    int[] mMeasureBuffer = new int[4];
+    measure(view, mMeasureBuffer);
+    Log.d("HannoDebug", "Live measured: " + Arrays.toString(mMeasureBuffer));
+
+    float x = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
+    float y = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
+    float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
+    float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
+    callback.invoke(0, 0, width, height, x, y);
+  }
+
+  public synchronized void measure(View v, int[] outputBuffer) {
+    View rootView = (View) RootViewUtil.getRootView(v);
+    computeBoundingBox(rootView, outputBuffer);
+    int rootX = outputBuffer[0];
+    int rootY = outputBuffer[1];
+    computeBoundingBox(v, outputBuffer);
+    outputBuffer[0] -= rootX;
+    outputBuffer[1] -= rootY;
+  }
+
+  private void computeBoundingBox(View view, int[] outputBuffer) {
+    RectF mBoundingBox = new RectF();
+    mBoundingBox.set(0, 0, view.getWidth(), view.getHeight());
+    mapRectFromViewToWindowCoords(view, mBoundingBox);
+
+    outputBuffer[0] = Math.round(mBoundingBox.left);
+    outputBuffer[1] = Math.round(mBoundingBox.top);
+    outputBuffer[2] = Math.round(mBoundingBox.right - mBoundingBox.left);
+    outputBuffer[3] = Math.round(mBoundingBox.bottom - mBoundingBox.top);
+  }
+
+  private void mapRectFromViewToWindowCoords(View view, RectF rect) {
+    Matrix matrix = view.getMatrix();
+    if (!matrix.isIdentity()) {
+      matrix.mapRect(rect);
+    }
+
+    rect.offset(view.getLeft(), view.getTop());
+
+    ViewParent parent = view.getParent();
+    while (parent instanceof View) {
+      View parentView = (View) parent;
+
+      rect.offset(-parentView.getScrollX(), -parentView.getScrollY());
+
+      matrix = parentView.getMatrix();
+      if (!matrix.isIdentity()) {
+        matrix.mapRect(rect);
+      }
+
+      rect.offset(parentView.getLeft(), parentView.getTop());
+
+      parent = parentView.getParent();
+    }
+  }
 }
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp
@@ -21,6 +21,9 @@
 #include <react/renderer/mounting/ShadowView.h>
 #include <react/renderer/mounting/ShadowViewMutation.h>
 
+#include <react/jni/JCallback.h>
+//#include <react/bridging/Function.h>
+
 #include <fbjni/fbjni.h>
 #include <glog/logging.h>
 
@@ -1074,4 +1077,14 @@ void FabricMountingManager::onAllAnimationsComplete() {
   allAnimationsCompleteJNI(javaUIManager_);
 }
 
+void FabricMountingManager::measure(const facebook::react::ShadowView& shadowView, std::function<void(folly::dynamic)> jsCallback) {
+    static auto measureJNI =
+        JFabricUIManager::javaClassStatic()->getMethod<void(jint, jint, jni::alias_ref<JCallback>)>(
+        "measure");
+
+    auto javaCallback = JCxxCallbackImpl::newObjectCxxArgs(jsCallback);
+
+    measureJNI(javaUIManager_, shadowView.surfaceId, shadowView.tag, javaCallback);
+}
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.h b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.h
@@ -60,6 +60,8 @@ class FabricMountingManager final {
 
   void onAllAnimationsComplete();
 
+  void measure(const ShadowView& shadowView, std::function<void(folly::dynamic)> callback);
+
  private:
   bool isOnMainThread();
 
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricUIManagerBinding.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricUIManagerBinding.cpp
@@ -611,6 +611,14 @@ void FabricUIManagerBinding::schedulerDidSetIsJSResponder(
       shadowView, isJSResponder, blockNativeResponder);
 }
 
+void FabricUIManagerBinding::schedulerMeasure(const ShadowView& shadowView, std::function<void(folly::dynamic)> jsCallback) {
+  auto mountingManager = getMountingManager("schedulerMeasure");
+  if (!mountingManager) {
+    return;
+  }
+  mountingManager->measure(shadowView, jsCallback);
+};
+
 void FabricUIManagerBinding::onAnimationStarted() {
   auto mountingManager = getMountingManager("onAnimationStarted");
   if (!mountingManager) {
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricUIManagerBinding.h b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricUIManagerBinding.h
@@ -120,6 +120,8 @@ class FabricUIManagerBinding : public jni::HybridClass<FabricUIManagerBinding>,
       bool isJSResponder,
       bool blockNativeResponder) override;
 
+  void schedulerMeasure(const ShadowView& shadowView, std::function<void(folly::dynamic)> jsCallback) override;
+
   void setPixelDensity(float pointScaleFactor);
 
   void driveCxxAnimations();
diff --git a/packages/react-native/ReactCommon/react/renderer/scheduler/Scheduler.cpp b/packages/react-native/ReactCommon/react/renderer/scheduler/Scheduler.cpp
@@ -312,6 +312,13 @@ void Scheduler::uiManagerDidSendAccessibilityEvent(
   }
 }
 
+void Scheduler::uiManagerMeasure(const ShadowNode::Shared& shadowNode, std::function<void(folly::dynamic)> jsCallback) {
+  if (delegate_ != nullptr) {
+    auto shadowView = ShadowView(*shadowNode);
+    delegate_->schedulerMeasure(shadowView, jsCallback);
+  }
+};
+
 /*
  * Set JS responder for a view.
  */
diff --git a/packages/react-native/ReactCommon/react/renderer/scheduler/Scheduler.h b/packages/react-native/ReactCommon/react/renderer/scheduler/Scheduler.h
@@ -95,6 +95,7 @@ class Scheduler final : public UIManagerDelegate {
       const ShadowNode::Shared& shadowNode,
       bool isJSResponder,
       bool blockNativeResponder) override;
+  void uiManagerMeasure(const ShadowNode::Shared& shadowNode, std::function<void(folly::dynamic)> jsCallback) override;
 
 #pragma mark - ContextContainer
   ContextContainer::Shared getContextContainer() const;
diff --git a/packages/react-native/ReactCommon/react/renderer/scheduler/SchedulerDelegate.h b/packages/react-native/ReactCommon/react/renderer/scheduler/SchedulerDelegate.h
@@ -64,6 +64,8 @@ class SchedulerDelegate {
       bool isJSResponder,
       bool blockNativeResponder) = 0;
 
+  virtual void schedulerMeasure(const ShadowView& shadowView, std::function<void(folly::dynamic)> jsCallback) = 0;
+
   virtual ~SchedulerDelegate() noexcept = default;
 };
 
diff --git a/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp b/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp
@@ -628,16 +628,24 @@ jsi::Value UIManagerBinding::get(
             return jsi::Value::undefined();
           }
 
-          auto measureRect = dom::measure(currentRevision, *shadowNode);
+          auto sharedCallback = std::make_shared<jsi::Function>(std::move(callbackFunction));
+          auto runtimeExecutor = uiManager->runtimeExecutor_;
+          std::function<void(folly::dynamic)> jsCallback = [sharedCallback, runtimeExecutor](folly::dynamic args) {
+            // Schedule call on JS
+            runtimeExecutor([sharedCallback, args](jsi::Runtime& jsRuntime) {
+              // Invoke the actual callback we got from JS
+              sharedCallback->call(jsRuntime, {
+                                                jsi::Value{jsRuntime, args.at(0).getDouble()},
+                                                jsi::Value{jsRuntime, args.at(1).getDouble()},
+                                                jsi::Value{jsRuntime, args.at(2).getDouble()},
+                                                jsi::Value{jsRuntime, args.at(3).getDouble()},
+                                                jsi::Value{jsRuntime, args.at(4).getDouble()},
+                                                jsi::Value{jsRuntime, args.at(5).getDouble()},
+                                            });
+            });
+          };
+          uiManager->getDelegate()->uiManagerMeasure(shadowNode, std::move(jsCallback));
 
-          callbackFunction.call(
-              runtime,
-              {jsi::Value{runtime, measureRect.x},
-               jsi::Value{runtime, measureRect.y},
-               jsi::Value{runtime, measureRect.width},
-               jsi::Value{runtime, measureRect.height},
-               jsi::Value{runtime, measureRect.pageX},
-               jsi::Value{runtime, measureRect.pageY}});
           return jsi::Value::undefined();
         });
   }
diff --git a/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerDelegate.h b/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerDelegate.h
@@ -41,6 +41,8 @@ class UIManagerDelegate {
       const std::string& commandName,
       const folly::dynamic& args) = 0;
 
+  virtual void uiManagerMeasure(const ShadowNode::Shared& shadowNode, std::function<void(folly::dynamic)> jsCallback) = 0;
+
   /*
    * Called when UIManager wants to dispatch some accessibility event
    * to the mounting layer. eventType is platform-specific and not all

Original file line number	Diff line number	Diff line change
`@@ -312,6 +312,13 @@ void Scheduler::uiManagerDidSendAccessibilityEvent(`
`312`	`312`	`}`
`313`	`313`	`}`
`314`	`314`
	`315`	`+void Scheduler::uiManagerMeasure(const ShadowNode::Shared& shadowNode, std::function<void(folly::dynamic)> jsCallback) {`
	`316`	`+ if (delegate_ != nullptr) {`
	`317`	`+ auto shadowView = ShadowView(*shadowNode);`
	`318`	`+ delegate_->schedulerMeasure(shadowView, jsCallback);`
	`319`	`+ }`
	`320`	`+};`
	`321`	`+`
`315`	`322`	`/*`
`316`	`323`	`* Set JS responder for a view.`
`317`	`324`	`*/`