Adding error message including stacktrace

Reviewed By: shergin

Differential Revision: D5887667

fbshipit-source-id: 6c1f1ad74db886a01f76171cdcafa97169fef4c3

Libraries/Image/Image.android.js

@@ -28,6 +28,7 @@ var ViewStylePropTypes = require('ViewStylePropTypes');
 var createReactClass = require('create-react-class');
 var filterObject = require('fbjs/lib/filterObject');
 var flattenStyle = require('flattenStyle');
+var invariant = require('invariant');
 var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
@@ -272,6 +273,8 @@ var Image = createReactClass({
       console.warn('The <Image> component requires a `source` property rather than `src`.');
     }
 
+    invariant(!this.props.children, '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

@@ -25,6 +25,7 @@ const StyleSheetPropType = require('StyleSheetPropType');
 
 const createReactClass = require('create-react-class');
 const flattenStyle = require('flattenStyle');
+const invariant = require('invariant');
 const requireNativeComponent = require('requireNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
 
@@ -374,6 +375,8 @@ const Image = createReactClass({
       console.warn('The <Image> component requires a `source` property rather than `src`.');
     }
 
+    invariant(!this.props.children, '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