[change] Image no longer accepts children

Align with recent changes to the React Native API.

docs/storybook/1-components/Image/ImageScreen.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import PropChildren from './examples/PropChildren';
 import PropDefaultSource from './examples/PropDefaultSource';
 import PropDraggable from './examples/PropDraggable';
 import PropOnError from './examples/PropOnError';
@@ -35,15 +34,6 @@ const ImageScreen = () => (
     <Section title="Props">
       <DocItem name="...View props" />
 
-      <DocItem
-        name="children"
-        typeInfo="?any"
-        description="Content to display over the image."
-        example={{
-          render: () => <PropChildren />
-        }}
-      />
-
       <DocItem
         name="defaultSource"
         typeInfo="?object"

docs/storybook/1-components/Image/examples/NetworkImage.js

@@ -32,6 +32,7 @@ class NetworkImageExample extends PureComponent {
 
     return (
       <View>
+        {loader}
         <Image
           defaultSource={sources.placeholder}
           onError={this._handleError}
@@ -40,9 +41,7 @@ class NetworkImageExample extends PureComponent {
           onLoadStart={this._handleLoadStart}
           source={this.props.source}
           style={helpers.styles.base}
-        >
-          {loader}
-        </Image>
+        />
         {this.state.message && <Text style={helpers.styles.marginTop}>{this.state.message}</Text>}
       </View>
     );

docs/storybook/1-components/Image/examples/PropChildren.js

@@ -4,12 +4,12 @@
 
 import sources from '../sources';
 import React from 'react';
-import { Image, StyleSheet, Text } from 'react-native';
+import { ImageBackground, StyleSheet, Text } from 'react-native';
 
 const ImageChildrenExample = () => (
-  <Image source={sources.large} style={styles.image}>
+  <ImageBackground source={sources.large} style={styles.image}>
     <Text style={styles.text}>Child content</Text>
-  </Image>
+  </ImageBackground>
 );
 
 const styles = StyleSheet.create({

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

@@ -33,12 +33,6 @@ describe('components/Image', () => {
     expect(component.prop('accessible')).toBe(false);
   });
 
-  test('prop "children"', () => {
-    const children = <div className="unique" />;
-    const component = shallow(<Image children={children} />);
-    expect(component.find('.unique').length).toBe(1);
-  });
-
   describe('prop "defaultSource"', () => {
     test('sets background image when value is an object', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };

src/components/Image/index.js

@@ -96,7 +96,6 @@ class Image extends Component<*, State> {
 
   static propTypes = {
     ...ViewPropTypes,
-    children: any,
     defaultSource: ImageSourcePropType,
     draggable: bool,
     onError: func,
@@ -176,7 +175,6 @@ class Image extends Component<*, State> {
     const {
       accessibilityLabel,
       accessible,
-      children,
       defaultSource,
       draggable,
       onLayout,
@@ -221,6 +219,16 @@ class Image extends Component<*, State> {
         })
       : null;
 
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.src) {
+        console.warn('The <Image> component requires a `source` property rather than `src`.');
+      }
+
+      if (this.props.children) {
+        throw new Error('The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.');
+      }
+    }
+
     return (
       <View
         {...other}
@@ -231,7 +239,6 @@ class Image extends Component<*, State> {
         testID={testID}
       >
         {hiddenImage}
-        {children}
       </View>
     );
   }