React Native: Allow Views to be nested inside of Text (#15464)
This feature is now supported on both iOS and Android. The Android feature was merged a couple of weeks ago: https://github.com/facebook/react-native/pull/23195.
Adam Comella committed
Apr 25, 2019 at 04:06 UTC
a187e9b5e40b328a5d0d4d6eded0cbe17fff9ba7
4 files changed
+14
-29
packages/react-native-renderer/src/ReactFabricHostConfig.js
-5
@@ -191,11 +191,6 @@ export function createInstance(
191
}
192
}
193
194
- invariant(
195
- type !== 'RCTView' || !hostContext.isInAParentText,
196
- 'Nesting of <View> within <Text> is not currently supported.',
197
- );
198
-
194
const updatePayload = create(props, viewConfig.validAttributes);
195
196
const node = createNode(
packages/react-native-renderer/src/ReactNativeHostConfig.js
-5
@@ -102,11 +102,6 @@ export function createInstance(
102
}
103
}
104
105
- invariant(
106
- type !== 'RCTView' || !hostContext.isInAParentText,
107
- 'Nesting of <View> within <Text> is not currently supported.',
108
- );
109
-
105
const updatePayload = create(props, viewConfig.validAttributes);
106
107
UIManager.createView(
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+7
-10
@@ -610,7 +610,7 @@ describe('ReactFabric', () => {
610
expect(snapshots).toMatchSnapshot();
611
});
612
613
- it('should throw when <View> is used inside of a <Text> ancestor', () => {
613
+ it('should not throw when <View> is used inside of a <Text> ancestor', () => {
614
const Image = createReactNativeComponentClass('RCTImage', () => ({
615
validAttributes: {},
616
uiViewClassName: 'RCTImage',
@@ -624,16 +624,13 @@ describe('ReactFabric', () => {
624
uiViewClassName: 'RCTView',
625
}));
626
627
- expect(() =>
628
- ReactFabric.render(
629
- <Text>
630
- <View />
631
- </Text>,
632
- 11,
633
- ),
634
- ).toThrow('Nesting of <View> within <Text> is not currently supported.');
627
+ ReactFabric.render(
628
+ <Text>
629
+ <View />
630
+ </Text>,
631
+ 11,
632
+ );
633
636
- // Non-View things (e.g. Image) are fine
634
ReactFabric.render(
635
<Text>
636
<Image />
packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+7
-9
@@ -486,7 +486,7 @@ describe('ReactNative', () => {
486
expect(mockArgs.length).toEqual(0);
487
});
488
489
- it('should throw when <View> is used inside of a <Text> ancestor', () => {
489
+ it('should not throw when <View> is used inside of a <Text> ancestor', () => {
490
const Image = createReactNativeComponentClass('RCTImage', () => ({
491
validAttributes: {},
492
uiViewClassName: 'RCTImage',
@@ -500,14 +500,12 @@ describe('ReactNative', () => {
500
uiViewClassName: 'RCTView',
501
}));
502
503
- expect(() =>
504
- ReactNative.render(
505
- <Text>
506
- <View />
507
- </Text>,
508
- 11,
509
- ),
510
- ).toThrow('Nesting of <View> within <Text> is not currently supported.');
503
+ ReactNative.render(
504
+ <Text>
505
+ <View />
506
+ </Text>,
507
+ 11,
508
+ );
509
510
// Non-View things (e.g. Image) are fine
511
ReactNative.render(