Android: Enable views to be nested within <Text>

Libraries/Components/View/View.js

@@ -11,11 +11,8 @@
 'use strict';
 
 const React = require('React');
-const TextAncestor = require('TextAncestor');
 const ViewNativeComponent = require('ViewNativeComponent');
 
-const invariant = require('invariant');
-
 import type {ViewProps} from 'ViewPropTypes';
 
 export type Props = ViewProps;
@@ -36,15 +33,7 @@ if (__DEV__) {
       forwardedRef: React.Ref<typeof ViewNativeComponent>,
     ) => {
       return (
-        <TextAncestor.Consumer>
-          {hasTextAncestor => {
-            invariant(
-              !hasTextAncestor,
-              'Nesting of <View> within <Text> is not currently supported.',
-            );
-            return <ViewNativeComponent {...props} ref={forwardedRef} />;
-          }}
-        </TextAncestor.Consumer>
+        <ViewNativeComponent {...props} ref={forwardedRef} />
       );
     };
     ViewToExport = React.forwardRef(View);

Libraries/Text/Text.js

@@ -66,12 +66,16 @@ const viewConfig = {
     minimumFontScale: true,
     textBreakStrategy: true,
     onTextLayout: true,
+    onInlineViewLayout: true,
     dataDetectorType: true,
   },
   directEventTypes: {
     topTextLayout: {
       registrationName: 'onTextLayout',
     },
+    topInlineViewLayout: {
+      registrationName: 'onInlineViewLayout',
+    },
   },
   uiViewClassName: 'RCTText',
 };

ReactAndroid/src/main/java/com/facebook/react/uimanager/IViewManagerWithChildren.java

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager;
+
+public interface IViewManagerWithChildren {
+  /**
+   * Returns whether this View type needs to handle laying out its own children instead of
+   * deferring to the standard css-layout algorithm.
+   * Returns true for the layout to *not* be automatically invoked. Instead onLayout will be
+   * invoked as normal and it is the View instance's responsibility to properly call layout on its
+   * children.
+   * Returns false for the default behavior of automatically laying out children without going
+   * through the ViewGroup's onLayout method. In that case, onLayout for this View type must *not*
+   * call layout on its children.
+   */
+  public boolean needsCustomLayoutForChildren();
+}

ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeKind.java

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager;
+
+// Common conditionals:
+//   - `kind == PARENT` checks whether the node can host children in the native tree.
+//   - `kind != NONE` checks whether the node appears in the native tree.
+
+public enum NativeKind {
+  // Node is in the native hierarchy and the HierarchyOptimizer should assume it can host children
+  // (e.g. because it's a ViewGroup). Note that it's okay if the node doesn't support children. When
+  // the HierarchyOptimizer generates children manipulation commands for that node, the
+  // HierarchyManager will catch this case and throw an exception.
+  PARENT,
+  // Node is in the native hierarchy, it may have children, but it cannot host them itself (e.g.
+  // because it isn't a ViewGroup). Consequently, its children need to be hosted by an ancestor.
+  LEAF,
+  // Node is not in the native hierarchy.
+  NONE
+}

ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java

@@ -195,16 +195,16 @@ public synchronized void updateLayout(
       // Check if the parent of the view has to layout the view, or the child has to lay itself out.
       if (!mRootTags.get(parentTag)) {
         ViewManager parentViewManager = mTagsToViewManagers.get(parentTag);
-        ViewGroupManager parentViewGroupManager;
-        if (parentViewManager instanceof ViewGroupManager) {
-          parentViewGroupManager = (ViewGroupManager) parentViewManager;
+        IViewManagerWithChildren parentViewManagerWithChildren;
+        if (parentViewManager instanceof IViewManagerWithChildren) {
+          parentViewManagerWithChildren = (IViewManagerWithChildren) parentViewManager;
         } else {
           throw new IllegalViewOperationException(
               "Trying to use view with tag " + parentTag +
-                  " as a parent, but its Manager doesn't extends ViewGroupManager");
+                  " as a parent, but its Manager doesn't implement IViewManagerWithChildren");
         }
-        if (parentViewGroupManager != null
-            && !parentViewGroupManager.needsCustomLayoutForChildren()) {
+        if (parentViewManagerWithChildren != null
+            && !parentViewManagerWithChildren.needsCustomLayoutForChildren()) {
           updateLayout(viewToUpdate, x, y, width, height);
         }
       } else {

ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyOptimizer.java

@@ -64,6 +64,15 @@ private static class NodeIndexPair {
   private final ShadowNodeRegistry mShadowNodeRegistry;
   private final SparseBooleanArray mTagsWithLayoutVisited = new SparseBooleanArray();
 
+  public static void assertNodeSupportedWithoutOptimizer(ReactShadowNode node) {
+    // NativeKind.LEAF nodes require the optimizer. They are not ViewGroups so they cannot host
+    // their native children themselves. Their native children need to be hoisted by the optimizer
+    // to an ancestor which is a ViewGroup.
+    Assertions.assertCondition(
+        node.getNativeKind() != NativeKind.LEAF,
+        "Nodes with NativeKind.LEAF are not supported when the optimizer is disabled");
+  }
+
   public NativeViewHierarchyOptimizer(
       UIViewOperationQueue uiViewOperationQueue,
       ShadowNodeRegistry shadowNodeRegistry) {
@@ -79,6 +88,7 @@ public void handleCreateView(
       ThemedReactContext themedContext,
       @Nullable ReactStylesDiffMap initialProps) {
     if (!ENABLED) {
+      assertNodeSupportedWithoutOptimizer(node);
       int tag = node.getReactTag();
       mUIViewOperationQueue.enqueueCreateView(
           themedContext,
@@ -92,7 +102,7 @@ public void handleCreateView(
         isLayoutOnlyAndCollapsable(initialProps);
     node.setIsLayoutOnly(isLayoutOnly);
 
-    if (!isLayoutOnly) {
+    if (node.getNativeKind() != NativeKind.NONE) {
       mUIViewOperationQueue.enqueueCreateView(
           themedContext,
           node.getReactTag(),
@@ -118,6 +128,7 @@ public void handleUpdateView(
       String className,
       ReactStylesDiffMap props) {
     if (!ENABLED) {
+      assertNodeSupportedWithoutOptimizer(node);
       mUIViewOperationQueue.enqueueUpdateProperties(node.getReactTag(), className, props);
       return;
     }
@@ -148,6 +159,7 @@ public void handleManageChildren(
       int[] tagsToDelete,
       int[] indicesToDelete) {
     if (!ENABLED) {
+      assertNodeSupportedWithoutOptimizer(nodeToManage);
       mUIViewOperationQueue.enqueueManageChildren(
           nodeToManage.getReactTag(),
           indicesToRemove,
@@ -189,6 +201,7 @@ public void handleSetChildren(
     ReadableArray childrenTags
   ) {
     if (!ENABLED) {
+      assertNodeSupportedWithoutOptimizer(nodeToManage);
       mUIViewOperationQueue.enqueueSetChildren(
         nodeToManage.getReactTag(),
         childrenTags);
@@ -208,8 +221,9 @@ public void handleSetChildren(
    */
   public void handleUpdateLayout(ReactShadowNode node) {
     if (!ENABLED) {
+      assertNodeSupportedWithoutOptimizer(node);
       mUIViewOperationQueue.enqueueUpdateLayout(
-          Assertions.assertNotNull(node.getParent()).getReactTag(),
+          Assertions.assertNotNull(node.getLayoutParent()).getReactTag(),
           node.getReactTag(),
           node.getScreenX(),
           node.getScreenY(),
@@ -221,6 +235,12 @@ public void handleUpdateLayout(ReactShadowNode node) {
     applyLayoutBase(node);
   }
 
+  public void handleForceViewToBeNonLayoutOnly(ReactShadowNode node) {
+    if (node.isLayoutOnly()) {
+      transitionLayoutOnlyViewToNativeView(node, null);
+    }
+  }
+
   /**
    * Processes the shadow hierarchy to dispatch all necessary updateLayout calls to the native
    * hierarchy. Should be called after all updateLayout calls for a batch have been handled.
@@ -229,16 +249,18 @@ public void onBatchComplete() {
     mTagsWithLayoutVisited.clear();
   }
 
-  private NodeIndexPair walkUpUntilNonLayoutOnly(
+  private NodeIndexPair walkUpUntilNativeKindIsParent(
       ReactShadowNode node,
       int indexInNativeChildren) {
-    while (node.isLayoutOnly()) {
+    while (node.getNativeKind() != NativeKind.PARENT) {
       ReactShadowNode parent = node.getParent();
       if (parent == null) {
         return null;
       }
 
-      indexInNativeChildren = indexInNativeChildren + parent.getNativeOffsetForChild(node);
+      indexInNativeChildren = indexInNativeChildren +
+          (node.getNativeKind() == NativeKind.LEAF ? 1 : 0) +
+          parent.getNativeOffsetForChild(node);
       node = parent;
     }
 
@@ -247,8 +269,8 @@ private NodeIndexPair walkUpUntilNonLayoutOnly(
 
   private void addNodeToNode(ReactShadowNode parent, ReactShadowNode child, int index) {
     int indexInNativeChildren = parent.getNativeOffsetForChild(parent.getChildAt(index));
-    if (parent.isLayoutOnly()) {
-      NodeIndexPair result = walkUpUntilNonLayoutOnly(parent, indexInNativeChildren);
+    if (parent.getNativeKind() != NativeKind.PARENT) {
+      NodeIndexPair result = walkUpUntilNativeKindIsParent(parent, indexInNativeChildren);
       if (result == null) {
         // If the parent hasn't been attached to its native parent yet, don't issue commands to the
         // native hierarchy. We'll do that when the parent node actually gets attached somewhere.
@@ -258,20 +280,26 @@ private void addNodeToNode(ReactShadowNode parent, ReactShadowNode child, int in
       indexInNativeChildren = result.index;
     }
 
-    if (!child.isLayoutOnly()) {
-      addNonLayoutNode(parent, child, indexInNativeChildren);
+    if (child.getNativeKind() != NativeKind.NONE) {
+      addNativeChild(parent, child, indexInNativeChildren);
     } else {
-      addLayoutOnlyNode(parent, child, indexInNativeChildren);
+      addNonNativeChild(parent, child, indexInNativeChildren);
     }
   }
 
   /**
-   * For handling node removal from manageChildren. In the case of removing a layout-only node, we
-   * need to instead recursively remove all its children from their native parents.
+   * For handling node removal from manageChildren. In the case of removing a node which isn't
+   * hosting its own children (e.g. layout-only or NativeKind.LEAF), we need to recursively remove
+   * all its children from their native parents.
    */
   private void removeNodeFromParent(ReactShadowNode nodeToRemove, boolean shouldDelete) {
-    ReactShadowNode nativeNodeToRemoveFrom = nodeToRemove.getNativeParent();
+    if (nodeToRemove.getNativeKind() != NativeKind.PARENT) {
+      for (int i = nodeToRemove.getChildCount() - 1; i >= 0; i--) {
+        removeNodeFromParent(nodeToRemove.getChildAt(i), shouldDelete);
+      }
+    }
 
+    ReactShadowNode nativeNodeToRemoveFrom = nodeToRemove.getNativeParent();
     if (nativeNodeToRemoveFrom != null) {
       int index = nativeNodeToRemoveFrom.indexOfNativeChild(nodeToRemove);
       nativeNodeToRemoveFrom.removeNativeChildAt(index);
@@ -282,21 +310,17 @@ private void removeNodeFromParent(ReactShadowNode nodeToRemove, boolean shouldDe
           null,
           shouldDelete ? new int[] {nodeToRemove.getReactTag()} : null,
           shouldDelete ? new int[] {index} : null);
-    } else {
-      for (int i = nodeToRemove.getChildCount() - 1; i >= 0; i--) {
-        removeNodeFromParent(nodeToRemove.getChildAt(i), shouldDelete);
-      }
     }
   }
 
-  private void addLayoutOnlyNode(
-      ReactShadowNode nonLayoutOnlyNode,
-      ReactShadowNode layoutOnlyNode,
+  private void addNonNativeChild(
+      ReactShadowNode nativeParent,
+      ReactShadowNode nonNativeChild,
       int index) {
-    addGrandchildren(nonLayoutOnlyNode, layoutOnlyNode, index);
+    addGrandchildren(nativeParent, nonNativeChild, index);
   }
 
-  private void addNonLayoutNode(
+  private void addNativeChild(
       ReactShadowNode parent,
       ReactShadowNode child,
       int index) {
@@ -307,30 +331,33 @@ private void addNonLayoutNode(
         new ViewAtIndex[] {new ViewAtIndex(child.getReactTag(), index)},
         null,
         null);
+
+    if (child.getNativeKind() != NativeKind.PARENT) {
+      addGrandchildren(parent, child, index + 1);
+    }
   }
 
   private void addGrandchildren(
       ReactShadowNode nativeParent,
       ReactShadowNode child,
       int index) {
-    Assertions.assertCondition(!nativeParent.isLayoutOnly());
+    Assertions.assertCondition(child.getNativeKind() != NativeKind.PARENT);
 
     // `child` can't hold native children. Add all of `child`'s children to `parent`.
     int currentIndex = index;
     for (int i = 0; i < child.getChildCount(); i++) {
       ReactShadowNode grandchild = child.getChildAt(i);
       Assertions.assertCondition(grandchild.getNativeParent() == null);
 
-      if (grandchild.isLayoutOnly()) {
-        // Adding this child could result in adding multiple native views
-        int grandchildCountBefore = nativeParent.getNativeChildCount();
-        addLayoutOnlyNode(nativeParent, grandchild, currentIndex);
-        int grandchildCountAfter = nativeParent.getNativeChildCount();
-        currentIndex += grandchildCountAfter - grandchildCountBefore;
+      // Adding this child could result in adding multiple native views
+      int grandchildCountBefore = nativeParent.getNativeChildCount();
+      if (grandchild.getNativeKind() == NativeKind.NONE) {
+        addNonNativeChild(nativeParent, grandchild, currentIndex);
       } else {
-        addNonLayoutNode(nativeParent, grandchild, currentIndex);
-        currentIndex++;
+        addNativeChild(nativeParent, grandchild, currentIndex);
       }
+      int grandchildCountAfter = nativeParent.getNativeChildCount();
+      currentIndex += grandchildCountAfter - grandchildCountBefore;
     }
   }
 
@@ -349,10 +376,16 @@ private void applyLayoutBase(ReactShadowNode node) {
     int x = node.getScreenX();
     int y = node.getScreenY();
 
-    while (parent != null && parent.isLayoutOnly()) {
-      // TODO(7854667): handle and test proper clipping
-      x += Math.round(parent.getLayoutX());
-      y += Math.round(parent.getLayoutY());
+    while (parent != null && parent.getNativeKind() != NativeKind.PARENT) {
+      if (!parent.isVirtual()) {
+        // Skip these additions for virtual nodes. This has the same effect as `getLayout*`
+        // returning `0`. Virtual nodes aren't in the Yoga tree so we can't call `getLayout*` on
+        // them.
+
+        // TODO(7854667): handle and test proper clipping
+        x += Math.round(parent.getLayoutX());
+        y += Math.round(parent.getLayoutY());
+      }
 
       parent = parent.getParent();
     }
@@ -361,10 +394,10 @@ private void applyLayoutBase(ReactShadowNode node) {
   }
 
   private void applyLayoutRecursive(ReactShadowNode toUpdate, int x, int y) {
-    if (!toUpdate.isLayoutOnly() && toUpdate.getNativeParent() != null) {
+    if (toUpdate.getNativeKind() != NativeKind.NONE && toUpdate.getNativeParent() != null) {
       int tag = toUpdate.getReactTag();
       mUIViewOperationQueue.enqueueUpdateLayout(
-          toUpdate.getNativeParent().getReactTag(),
+          toUpdate.getLayoutParent().getReactTag(),
           tag,
           x,
           y,