diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index 65a6b7068..b1d744d71 100644 --- a/Libraries/Image/Image.android.js +++ b/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 component requires a `source` property rather than `src`.'); } + invariant(!this.props.children, 'The 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; diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 6d3799533..d23a457bc 100644 --- a/Libraries/Image/Image.ios.js +++ b/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 component requires a `source` property rather than `src`.'); } + invariant(!this.props.children, 'The component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.'); + return ( component', + render: function() { + return ( + + + + React + + + ); + }, + }, + { + title: 'Nesting content inside component', render: function() { return (