diff --git a/examples/components/Image/ImageExample.js b/examples/components/Image/ImageExample.js
index 9521759a..73b06a67 100644
--- a/examples/components/Image/ImageExample.js
+++ b/examples/components/Image/ImageExample.js
@@ -652,6 +652,6 @@ var styles = StyleSheet.create({
examples.forEach((example) => {
storiesOf('component: Image', module)
- .addDecorator((renderStory) => {renderStory()})
+ .addDecorator((renderStory) => {renderStory()})
.add(example.title, () => example.render())
})
diff --git a/src/components/Image/__tests__/__snapshots__/index-test.js.snap b/src/components/Image/__tests__/__snapshots__/index-test.js.snap
index ee82fe53..97577461 100644
--- a/src/components/Image/__tests__/__snapshots__/index-test.js.snap
+++ b/src/components/Image/__tests__/__snapshots__/index-test.js.snap
@@ -52,23 +52,7 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "accessible" 1`] = `
@@ -125,23 +109,7 @@ exports[`components/Image prop "accessible" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "children" 1`] = `
@@ -198,78 +166,8 @@ exports[`components/Image prop "children" 1`] = `
"textDecoration": "none",
}
}>
-
+ className="unique" />
`;
@@ -329,23 +227,7 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w
"textDecoration": "none",
"width": "40px",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
@@ -404,23 +286,7 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles
"textDecoration": "none",
"width": "20px",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
@@ -477,23 +343,7 @@ exports[`components/Image prop "defaultSource" sets background image when value
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
@@ -552,23 +402,7 @@ exports[`components/Image prop "defaultSource" sets background image when value
"textDecoration": "none",
"width": undefined,
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "resizeMode" value "contain" 1`] = `
@@ -624,23 +458,7 @@ exports[`components/Image prop "resizeMode" value "contain" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "resizeMode" value "cover" 1`] = `
@@ -696,23 +514,7 @@ exports[`components/Image prop "resizeMode" value "cover" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "resizeMode" value "none" 1`] = `
@@ -768,23 +570,7 @@ exports[`components/Image prop "resizeMode" value "none" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
@@ -840,23 +626,7 @@ exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
@@ -912,23 +682,7 @@ exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = `
@@ -984,23 +738,7 @@ exports[`components/Image prop "style" correctly supports "resizeMode" property
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image prop "testID" 1`] = `
@@ -1057,23 +795,7 @@ exports[`components/Image prop "testID" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
exports[`components/Image sets correct accessibility role" 1`] = `
@@ -1129,21 +851,5 @@ exports[`components/Image sets correct accessibility role" 1`] = `
"textAlign": "inherit",
"textDecoration": "none",
}
- }>
-
-
+ } />
`;
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index a9ab17ad..828c94f0 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -1,7 +1,6 @@
/* global window */
import applyNativeMethods from '../../modules/applyNativeMethods';
import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
-import createDOMElement from '../../modules/createDOMElement';
import ImageResizeMode from './ImageResizeMode';
import ImageStylePropTypes from './ImageStylePropTypes';
import StyleSheet from '../../apis/StyleSheet';
@@ -53,7 +52,6 @@ class Image extends Component {
};
static defaultProps = {
- accessible: true,
style: {}
};
@@ -64,12 +62,14 @@ class Image extends Component {
this.state = { isLoaded: false };
const uri = resolveAssetSource(props.source);
this._imageState = uri ? STATUS_PENDING : STATUS_IDLE;
+ this._isMounted = false;
}
componentDidMount() {
if (this._imageState === STATUS_PENDING) {
this._createImageLoader();
}
+ this._isMounted = true;
}
componentDidUpdate() {
@@ -87,6 +87,7 @@ class Image extends Component {
componentWillUnmount() {
this._destroyImageLoader();
+ this._isMounted = false;
}
render() {
@@ -117,26 +118,16 @@ class Image extends Component {
// View doesn't support 'resizeMode' as a style
delete style.resizeMode;
- /**
- * The image is displayed as a background image to support `resizeMode`.
- * The HTML image is hidden but used to provide the correct responsive
- * image dimensions, and to support the image context menu. Child content
- * is rendered into an element absolutely positioned over the image.
- */
return (
- {createDOMElement('img', { src: displayImage, style: styles.img })}
- {children ? (
-
- ) : null}
-
+ />
);
}
@@ -198,7 +189,11 @@ class Image extends Component {
this._imageState = status;
const isLoaded = this._imageState === STATUS_LOADED;
if (isLoaded !== this.state.isLoaded) {
- this.setState({ isLoaded });
+ window.requestAnimationFrame(() => {
+ if (this._isMounted) {
+ this.setState({ isLoaded });
+ }
+ });
}
}
}
@@ -209,20 +204,6 @@ const styles = StyleSheet.create({
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
- },
- img: {
- borderWidth: 0,
- height: 'auto',
- maxHeight: '100%',
- maxWidth: '100%',
- opacity: 0
- },
- children: {
- bottom: 0,
- left: 0,
- position: 'absolute',
- right: 0,
- top: 0
}
});