Skip to content

Commit dbb7eac

Browse files
mdvaccafacebook-github-bot
authored andcommitted
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
1 parent 7e3a43c commit dbb7eac

File tree

3 files changed

+23
-7
lines changed

3 files changed

+23
-7
lines changed

ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java

+5
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,9 @@ public class ReactFeatureFlags {
9090
* <p>The react flag is disabled by default because this is increasing ANRs (T57363204)
9191
*/
9292
public static boolean clipChildRectsIfOverflowIsHidden = false;
93+
94+
/**
95+
* This react flag enables the rendering of <View>s with no fixed size within a <Text> component.
96+
*/
97+
public static boolean supportInlineViewsWithDynamicSize = true;
9398
}

ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ rn_android_library(
2121
react_native_dep("third-party/java/jsr-305:jsr-305"),
2222
react_native_target("java/com/facebook/react/bridge:bridge"),
2323
react_native_target("java/com/facebook/react/common:common"),
24+
react_native_target("java/com/facebook/react/config:config"),
2425
react_native_target("java/com/facebook/react/module/annotations:annotations"),
2526
react_native_target("java/com/facebook/react/uimanager:uimanager"),
2627
react_native_target("java/com/facebook/react/uimanager/annotations:annotations"),

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

+17-7
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
2121
import com.facebook.react.bridge.ReadableArray;
2222
import com.facebook.react.bridge.ReadableMap;
23+
import com.facebook.react.config.ReactFeatureFlags;
2324
import com.facebook.react.uimanager.IllegalViewOperationException;
2425
import com.facebook.react.uimanager.LayoutShadowNode;
2526
import com.facebook.react.uimanager.NativeViewHierarchyOptimizer;
@@ -136,12 +137,23 @@ private static void buildSpannedFromShadowNode(
136137
YogaValue widthValue = child.getStyleWidth();
137138
YogaValue heightValue = child.getStyleHeight();
138139

140+
float width;
141+
float height;
139142
if (widthValue.unit != YogaUnit.POINT || heightValue.unit != YogaUnit.POINT) {
140-
throw new IllegalViewOperationException(
141-
"Views nested within a <Text> must have a width and height");
143+
if (ReactFeatureFlags.supportInlineViewsWithDynamicSize) {
144+
// If the measurement of the child isn't calculated, we calculate the layout for the
145+
// view using Yoga
146+
child.calculateLayout();
147+
width = child.getLayoutWidth();
148+
height = child.getLayoutHeight();
149+
} else {
150+
throw new IllegalViewOperationException(
151+
"Views nested within a <Text> must have a width and height");
152+
}
153+
} else {
154+
width = widthValue.value;
155+
height = heightValue.value;
142156
}
143-
float width = widthValue.value;
144-
float height = heightValue.value;
145157

146158
// We make the inline view take up 1 character in the span and put a corresponding character
147159
// into
@@ -360,9 +372,7 @@ protected Spannable spannedFromShadowNode(
360372
*/
361373
protected @Nullable String mFontFamily = null;
362374

363-
/**
364-
* @see android.graphics.Paint#setFontFeatureSettings
365-
*/
375+
/** @see android.graphics.Paint#setFontFeatureSettings */
366376
protected @Nullable String mFontFeatureSettings = null;
367377

368378
protected boolean mContainsImages = false;

0 commit comments

Comments
 (0)