[fix] disallow text node children of View

Fix #627

src/components/View/__tests__/index-test.js

@@ -12,10 +12,18 @@ describe('components/View', () => {
     });
   });
 
-  test('prop "children"', () => {
+  describe('prop "children"', () => {
-    const children = <View testID="1" />;
+    test('text node throws error', () => {
-    const component = shallow(<View>{children}</View>);
+      const children = 'hello';
-    expect(component.contains(children)).toEqual(true);
+      const render = () => shallow(<View>{children}</View>);
+      expect(render).toThrow();
+    });
+
+    test('non-text is rendered', () => {
+      const children = <View testID="1" />;
+      const component = shallow(<View>{children}</View>);
+      expect(component.contains(children)).toEqual(true);
+    });
   });
 
   describe('prop "hitSlop"', () => {

src/components/View/index.js

@@ -11,6 +11,7 @@ import applyLayout from '../../modules/applyLayout';
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import { bool } from 'prop-types';
 import createElement from '../../modules/createElement';
+import invariant from 'fbjs/lib/invariant';
 import StyleSheet from '../../apis/StyleSheet';
 import ViewPropTypes from './ViewPropTypes';
 import React, { Component } from 'react';
@@ -49,6 +50,13 @@ class View extends Component {
       ...otherProps
     } = this.props;
 
+    if (process.env.NODE_ENV !== 'production') {
+      invariant(
+        typeof this.props.children !== 'string',
+        'A text node cannot be a child of a <View>'
+      );
+    }
+
     const { isInAParentText } = this.context;
 
     otherProps.style = [styles.initial, isInAParentText && styles.inline, style];