Skip to content
Permalink
Browse files
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
  • Loading branch information
mdvacca authored and facebook-github-bot committed Jan 14, 2020
1 parent 7e3a43c commit dbb7eacb429adb4160e740017c212bfd6df0f03a
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 7 deletions.
@@ -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;
}
@@ -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"),
@@ -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;

0 comments on commit dbb7eac

Please sign in to comment.