adding error message including stacktrace and example

Reviewed By: fkgozali

Differential Revision: D5908789

fbshipit-source-id: 061e414d5105df607b7dcafefb134ad9c94a9a71

Libraries/Image/Image.android.js

@@ -272,6 +272,10 @@ var Image = createReactClass({
       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 aboslute positioning.');
+    }
+
     if (source && (source.uri || Array.isArray(source))) {
       let style;
       let sources;

Libraries/Image/Image.ios.js

@@ -374,6 +374,10 @@ const Image = createReactClass({
       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 aboslute positioning.');
+    }
+
     return (
       <RCTImageView
         {...this.props}

RNTester/js/ImageExample.js

@@ -439,7 +439,22 @@ exports.examples = [
     },
   },
   {
-    title: 'Nesting',
+    title: 'Nesting content inside <Image> component',
+    render: function() {
+      return (
+        <View style={{width: 60, height: 60}}>
+          <Image
+            style={{...StyleSheet.absoluteFillObject}}
+            source={fullImage}/>
+          <Text style={styles.nestedText}>
+            React
+          </Text>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Nesting content inside <ImageBackground> component',
     render: function() {
       return (
         <ImageBackground