Android: Enable views to be nested within <Text> (#23195)

Summary:
Potential breaking change: The signature of ReactShadowNode's onBeforeLayout method was changed
  - Before: public void onBeforeLayout()
  - After:  public void onBeforeLayout(NativeViewHierarchyOptimizer nativeViewHierarchyOptimizer)

Implements same feature as this iOS PR: https://github.com/facebook/react-native/pull/7304

Previously, only Text and Image could be nested within Text. Now, any view can be nested within Text. One restriction of this feature is that developers must give inline views a width and a height via the style prop.

Previously, inline Images were supported via FrescoBasedReactTextInlineImageSpan. To get support for nesting views within Text, we create one special kind of span per inline view. This span is called TextInlineViewPlaceholderSpan. It is the same size as the inline view. Its job is just to occupy space -- it doesn't render any visual. After the text is rendered, we query the Android Layout object associated with the TextView to find out where it has positioned each TextInlineViewPlaceholderSpan. We then position the views to be at those locations.

One tricky aspect of the implementation is that the Text component needs to be able to render native children (the inline views) but the Android TextView cannot have children. This is solved by having the native parent of the ReactTextView also host the inline views. Implementation-wise, this was accomplished by extending the NativeViewHierarchyOptimizer to handle this case. The optimizer now handles these cases:
  - Node is not in the native tree. An ancestor must host its children.
  - Node is in the native tree and it can host its own children.
  - (new) Node is in the native tree but it cannot host its own children. An ancestor must host both this node and its children.

I added the `onInlineViewLayout` event which is useful for writing tests for verifying that the inline views are positioned properly.

Limitation: Clipping
----------

If Text's height/width is small such that an inline view doesn't completely fit, the inline view may still be fully visible due to hoisting (the inline view isn't actually parented to the Text which has the limited size. It is parented to an ancestor which may have a different clipping rectangle.). Prior to this change, layout-only views had a similar limitation.
Pull Request resolved: https://github.com/facebook/react-native/pull/23195

Differential Revision: D14014668

Pulled By: shergin

fbshipit-source-id: d46130f3d19cc83ac7ddf423adcc9e23988245d3
This commit is contained in:
Adam Comella
2019-04-01 19:55:23 -07:00
committed by Facebook Github Bot
parent 770da3ac67
commit a2285b1790
19 changed files with 672 additions and 135 deletions
@@ -48,15 +48,16 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
/**
* Nodes that return {@code true} will be treated as "virtual" nodes. That is, nodes that are not
* mapped into native views (e.g. nested text node). By default this method returns {@code false}.
* mapped into native views or Yoga nodes (e.g. nested text node). By default this method returns
* {@code false}.
*/
boolean isVirtual();
/**
* Nodes that return {@code true} will be treated as a root view for the virtual nodes tree. It
* means that {@link NativeViewHierarchyManager} will not try to perform {@code manageChildren}
* operation on such views. Good example is {@code InputText} view that may have children {@code
* Text} nodes but this whole hierarchy will be mapped to a single android {@link EditText} view.
* means that all of its descendants will be "virtual" nodes. Good example is {@code InputText}
* view that may have children {@code Text} nodes but this whole hierarchy will be mapped to a
* single android {@link EditText} view.
*/
boolean isVirtualAnchor();
@@ -68,6 +69,14 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
*/
boolean isYogaLeafNode();
/**
* When constructing the native tree, nodes that return {@code true} will be treated as leaves.
* Instead of adding this view's native children as subviews of it, they will be added as subviews
* of an ancestor. In other words, this view wants to support native children but it cannot host
* them itself (e.g. it isn't a ViewGroup).
*/
boolean hoistNativeChildren();
String getViewClass();
boolean hasUpdates();
@@ -99,7 +108,7 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
* layout. Will be only called for nodes that are marked as updated with {@link #markUpdated()} or
* require layouting (marked with {@link #dirty()}).
*/
void onBeforeLayout();
void onBeforeLayout(NativeViewHierarchyOptimizer nativeViewHierarchyOptimizer);
void updateProperties(ReactStylesDiffMap props);
@@ -135,6 +144,12 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
@Nullable
T getParent();
// Returns the node that is responsible for laying out this node.
@Nullable
T getLayoutParent();
void setLayoutParent(@Nullable T layoutParent);
/**
* Get the {@link ThemedReactContext} associated with this {@link ReactShadowNode}. This will
* never change during the lifetime of a {@link ReactShadowNode} instance, but different instances
@@ -179,6 +194,8 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
boolean isLayoutOnly();
NativeKind getNativeKind();
int getTotalNativeChildren();
boolean isDescendantOf(T ancestorNode);
@@ -354,4 +371,6 @@ public interface ReactShadowNode<T extends ReactShadowNode> {
Integer getWidthMeasureSpec();
Integer getHeightMeasureSpec();
Iterable<? extends ReactShadowNode> calculateLayoutOnChildren();
}