mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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
This commit is contained in:
committed by
Facebook Github Bot
parent
7e3a43c23d
commit
dbb7eacb42
@@ -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"),
|
||||
|
||||
+17
-7
@@ -20,6 +20,7 @@ import com.facebook.infer.annotation.Assertions;
|
||||
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 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
|
||||
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 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {
|
||||
*/
|
||||
protected @Nullable String mFontFamily = null;
|
||||
|
||||
/**
|
||||
* @see android.graphics.Paint#setFontFeatureSettings
|
||||
*/
|
||||
/** @see android.graphics.Paint#setFontFeatureSettings */
|
||||
protected @Nullable String mFontFeatureSettings = null;
|
||||
|
||||
protected boolean mContainsImages = false;
|
||||
|
||||
Reference in New Issue
Block a user