From dbb7eacb429adb4160e740017c212bfd6df0f03a Mon Sep 17 00:00:00 2001
From: David Vacca <dvacca@fb.com>
Date: Tue, 14 Jan 2020 09:02:54 -0800
Subject: [PATCH] Add support to render <View> with no fixed size nested within
 a <Text>

Summary:
This diff fixes the redbox error: Views nested within a <Text> must have a width and height

This error is reproducible when rendering a View with no fixed size, inside a <Text>. e.g.
```
function PlaygroundContent(props: {}) {
  return (
    <View style={styles.container}>
      <Text>
        <View>
          <Image source={fbicon.filled('chevron-down', 10)} />
        </View>
      </Text>
    </View>
  );
}
```

changelog: Add support to render <View> with no fixed size nested within a <Text>

Reviewed By: shergin

Differential Revision: D19387760

fbshipit-source-id: a9cee8410e56a2d362d6b8f993e602719c416925
---
 .../react/config/ReactFeatureFlags.java       |  5 ++++
 .../java/com/facebook/react/views/text/BUCK   |  1 +
 .../views/text/ReactBaseTextShadowNode.java   | 24 +++++++++++++------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java b/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java
index b746fcdc1cc200..b06df9eaaacb67 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java
@@ -90,4 +90,9 @@ public class ReactFeatureFlags {
    * <p>The react flag is disabled by default because this is increasing ANRs (T57363204)
    */
   public static boolean clipChildRectsIfOverflowIsHidden = false;
+
+  /**
+   * This react flag enables the rendering of <View>s with no fixed size within a <Text> component.
+   */
+  public static boolean supportInlineViewsWithDynamicSize = true;
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK b/ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK
index 62458f6ae265ae..9d05a349159b17 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK
@@ -21,6 +21,7 @@ rn_android_library(
         react_native_dep("third-party/java/jsr-305:jsr-305"),
         react_native_target("java/com/facebook/react/bridge:bridge"),
         react_native_target("java/com/facebook/react/common:common"),
+        react_native_target("java/com/facebook/react/config:config"),
         react_native_target("java/com/facebook/react/module/annotations:annotations"),
         react_native_target("java/com/facebook/react/uimanager:uimanager"),
         react_native_target("java/com/facebook/react/uimanager/annotations:annotations"),
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
index 76c658212edd15..013ec3b5283085 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
@@ -20,6 +20,7 @@
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.uimanager.IllegalViewOperationException;
 import com.facebook.react.uimanager.LayoutShadowNode;
 import com.facebook.react.uimanager.NativeViewHierarchyOptimizer;
@@ -136,12 +137,23 @@ private static void buildSpannedFromShadowNode(
         YogaValue widthValue = child.getStyleWidth();
         YogaValue heightValue = child.getStyleHeight();
 
+        float width;
+        float height;
         if (widthValue.unit != YogaUnit.POINT || heightValue.unit != YogaUnit.POINT) {
-          throw new IllegalViewOperationException(
-              "Views nested within a <Text> must have a width and height");
+          if (ReactFeatureFlags.supportInlineViewsWithDynamicSize) {
+            // If the measurement of the child isn't calculated, we calculate the layout for the
+            // view using Yoga
+            child.calculateLayout();
+            width = child.getLayoutWidth();
+            height = child.getLayoutHeight();
+          } else {
+            throw new IllegalViewOperationException(
+                "Views nested within a <Text> must have a width and height");
+          }
+        } else {
+          width = widthValue.value;
+          height = heightValue.value;
         }
-        float width = widthValue.value;
-        float height = heightValue.value;
 
         // We make the inline view take up 1 character in the span and put a corresponding character
         // into
@@ -360,9 +372,7 @@ protected Spannable spannedFromShadowNode(
    */
   protected @Nullable String mFontFamily = null;
 
-  /**
-   * @see android.graphics.Paint#setFontFeatureSettings
-   */
+  /** @see android.graphics.Paint#setFontFeatureSettings */
   protected @Nullable String mFontFeatureSettings = null;
 
   protected boolean mContainsImages = false;