Top-down onLayout events

Summary:
This makes Android Paper/Classic renderer fire `onLayout` events top down, like in Fabric/new Architecture, and like iOS on Paper/classic architecture. This makes it much more sane under its model to calculate insets using parent dimensions.

I thought iOS Paper also was bottom-up, but it turns out that is only Android and Windows.

This is marginally breaky since event ordering can be relied on, but to my knowledge was never hit during the Fabric migration, and any JS code written for both Android and iOS will need to support this model already.

Changelog:
[General][Changed] - Make layout events top-down on Android classic renderer

Differential Revision: D49627996

fbshipit-source-id: 18641174cc97ec98b6c26542c86de1f2aa6e8b37

Author: NickGerleman

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

@@ -123,9 +123,9 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
    */
   void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue);
 
-  /** @return true if layout (position or dimensions) changed, false otherwise. */
+  /* package */ boolean dispatchUpdatesWillChangeLayout(float absoluteX, float absoluteY);
 
-  /* package */ boolean dispatchUpdates(
+  /* package */ void dispatchUpdates(
       float absoluteX,
       float absoluteY,
       UIViewOperationQueue uiViewOperationQueue,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java

@@ -337,9 +337,32 @@ public void onAfterUpdateTransaction() {
   @Override
   public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {}
 
-  /** @return true if layout (position or dimensions) changed, false otherwise. */
   @Override
-  public boolean dispatchUpdates(
+  public boolean dispatchUpdatesWillChangeLayout(float absoluteX, float absoluteY) {
+    if (!hasNewLayout()) {
+      return false;
+    }
+
+    float layoutX = getLayoutX();
+    float layoutY = getLayoutY();
+    int newAbsoluteLeft = Math.round(absoluteX + layoutX);
+    int newAbsoluteTop = Math.round(absoluteY + layoutY);
+    int newAbsoluteRight = Math.round(absoluteX + layoutX + getLayoutWidth());
+    int newAbsoluteBottom = Math.round(absoluteY + layoutY + getLayoutHeight());
+
+    int newScreenX = Math.round(layoutX);
+    int newScreenY = Math.round(layoutY);
+    int newScreenWidth = newAbsoluteRight - newAbsoluteLeft;
+    int newScreenHeight = newAbsoluteBottom - newAbsoluteTop;
+
+    return newScreenX != mScreenX
+        || newScreenY != mScreenY
+        || newScreenWidth != mScreenWidth
+        || newScreenHeight != mScreenHeight;
+  }
+
+  @Override
+  public void dispatchUpdates(
       float absoluteX,
       float absoluteY,
       UIViewOperationQueue uiViewOperationQueue,
@@ -386,10 +409,6 @@ public boolean dispatchUpdates(
               getScreenHeight());
         }
       }
-
-      return layoutHasChanged;
-    } else {
-      return false;
     }
   }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIImplementation.java

@@ -29,7 +29,9 @@
 import com.facebook.systrace.SystraceMessage;
 import com.facebook.yoga.YogaConstants;
 import com.facebook.yoga.YogaDirection;
+import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.List;
 import java.util.Map;
 
 /**
@@ -665,7 +667,20 @@ protected void updateViewHierarchy() {
               .arg("rootTag", cssRoot.getReactTag())
               .flush();
           try {
-            applyUpdatesRecursive(cssRoot, 0f, 0f);
+            List<ReactShadowNode> onLayoutNodes = new ArrayList<>();
+            applyUpdatesRecursive(cssRoot, 0f, 0f, onLayoutNodes);
+
+            for (ReactShadowNode node : onLayoutNodes) {
+              mEventDispatcher.dispatchEvent(
+                  OnLayoutEvent.obtain(
+                      -1, /* surfaceId not used in classic renderer */
+                      node.getReactTag(),
+                      node.getScreenX(),
+                      node.getScreenY(),
+                      node.getScreenWidth(),
+                      node.getScreenHeight()));
+            }
+
           } finally {
             Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);
           }
@@ -951,39 +966,34 @@ protected void calculateRootLayout(ReactShadowNode cssRoot) {
     }
   }
 
-  protected void applyUpdatesRecursive(ReactShadowNode cssNode, float absoluteX, float absoluteY) {
+  protected void applyUpdatesRecursive(
+      ReactShadowNode cssNode,
+      float absoluteX,
+      float absoluteY,
+      List<ReactShadowNode> onLayoutNodes) {
     if (!cssNode.hasUpdates()) {
       return;
     }
 
+    if (cssNode.dispatchUpdatesWillChangeLayout(absoluteX, absoluteY)
+        && cssNode.shouldNotifyOnLayout()
+        && !mShadowNodeRegistry.isRootNode(cssNode.getReactTag())) {
+      onLayoutNodes.add(cssNode);
+    }
+
     Iterable<? extends ReactShadowNode> cssChildren = cssNode.calculateLayoutOnChildren();
     if (cssChildren != null) {
       for (ReactShadowNode cssChild : cssChildren) {
         applyUpdatesRecursive(
-            cssChild, absoluteX + cssNode.getLayoutX(), absoluteY + cssNode.getLayoutY());
+            cssChild,
+            absoluteX + cssNode.getLayoutX(),
+            absoluteY + cssNode.getLayoutY(),
+            onLayoutNodes);
       }
     }
 
-    int tag = cssNode.getReactTag();
-    if (!mShadowNodeRegistry.isRootNode(tag)) {
-      boolean frameDidChange =
-          cssNode.dispatchUpdates(
-              absoluteX, absoluteY, mOperationsQueue, mNativeViewHierarchyOptimizer);
-
-      // Notify JS about layout event if requested
-      // and if the position or dimensions actually changed
-      // (consistent with iOS).
-      if (frameDidChange && cssNode.shouldNotifyOnLayout()) {
-        mEventDispatcher.dispatchEvent(
-            OnLayoutEvent.obtain(
-                -1, /* surfaceId not used in classic renderer */
-                tag,
-                cssNode.getScreenX(),
-                cssNode.getScreenY(),
-                cssNode.getScreenWidth(),
-                cssNode.getScreenHeight()));
-      }
-    }
+    cssNode.dispatchUpdates(absoluteX, absoluteY, mOperationsQueue, mNativeViewHierarchyOptimizer);
+
     cssNode.markUpdateSeen();
     mNativeViewHierarchyOptimizer.onViewUpdatesCompleted(cssNode);
   }