Repository: facebook/react
Pull request: React Native: Allow Views to be nested inside of Text

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.

Here's some sample React Native code that utilizes the inline view feature:

```js
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.background}>
        <Text>
          This is an{' '}
          <View style={{backgroundColor: 'steelblue', width: 10, height: 10}} />
          {' '}inline view.
        </Text>
      </View>
    );
  }
}
```

### Output Before PR (Android)

![image](https://user-images.githubusercontent.com/199935/56465176-78e0c800-63ad-11e9-9aca-4ed5621aa1c1.png)

### Output After PR (Android)

![image](https://user-images.githubusercontent.com/199935/56465180-81390300-63ad-11e9-871d-4061becd48b3.png)

Adam Comella
Microsoft Corp.

Changed files:
filename: packages/react-native-renderer/src/ReactFabricHostConfig.js
patch: @@ -191,11 +191,6 @@ export function createInstance(
     }
   }
 
-  invariant(
-    type !== 'RCTView' || !hostContext.isInAParentText,
-    'Nesting of <View> within <Text> is not currently supported.',
-  );
-
   const updatePayload = create(props, viewConfig.validAttributes);
 
   const node = createNode(

filename: packages/react-native-renderer/src/ReactNativeHostConfig.js
patch: @@ -102,11 +102,6 @@ export function createInstance(
     }
   }
 
-  invariant(
-    type !== 'RCTView' || !hostContext.isInAParentText,
-    'Nesting of <View> within <Text> is not currently supported.',
-  );
-
   const updatePayload = create(props, viewConfig.validAttributes);
 
   UIManager.createView(

filename: packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
patch: @@ -610,7 +610,7 @@ describe('ReactFabric', () => {
     expect(snapshots).toMatchSnapshot();
   });
 
-  it('should throw when <View> is used inside of a <Text> ancestor', () => {
+  it('should not throw when <View> is used inside of a <Text> ancestor', () => {
     const Image = createReactNativeComponentClass('RCTImage', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTImage',
@@ -624,16 +624,13 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() =>
-      ReactFabric.render(
-        <Text>
-          <View />
-        </Text>,
-        11,
-      ),
-    ).toThrow('Nesting of <View> within <Text> is not currently supported.');
+    ReactFabric.render(
+      <Text>
+        <View />
+      </Text>,
+      11,
+    );
 
-    // Non-View things (e.g. Image) are fine
     ReactFabric.render(
       <Text>
         <Image />

filename: packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
patch: @@ -486,7 +486,7 @@ describe('ReactNative', () => {
     expect(mockArgs.length).toEqual(0);
   });
 
-  it('should throw when <View> is used inside of a <Text> ancestor', () => {
+  it('should not throw when <View> is used inside of a <Text> ancestor', () => {
     const Image = createReactNativeComponentClass('RCTImage', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTImage',
@@ -500,14 +500,12 @@ describe('ReactNative', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() =>
-      ReactNative.render(
-        <Text>
-          <View />
-        </Text>,
-        11,
-      ),
-    ).toThrow('Nesting of <View> within <Text> is not currently supported.');
+    ReactNative.render(
+      <Text>
+        <View />
+      </Text>,
+      11,
+    );
 
     // Non-View things (e.g. Image) are fine
     ReactNative.render(