diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index 1c45144b..5aa8d334 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -14,6 +14,7 @@ const findImageSurfaceStyle = wrapper => StyleSheet.flatten(wrapper.childAt(0).p
describe('components/Image', () => {
beforeEach(() => {
+ ImageUriCache._entries = {};
window.Image = jest.fn(() => ({}));
});
@@ -111,8 +112,8 @@ describe('components/Image', () => {
});
const onLoadStub = jest.fn();
const uri = 'https://test.com/img.jpg';
- shallow();
ImageUriCache.add(uri);
+ shallow();
jest.runOnlyPendingTimers();
expect(ImageLoader.load).not.toBeCalled();
expect(onLoadStub).toBeCalled();
@@ -164,6 +165,19 @@ describe('components/Image', () => {
expect(component.find('img')).toBeUndefined;
});
+ test('is set immediately if the image was preloaded', () => {
+ const uri = 'https://yahoo.com/favicon.ico';
+ ImageLoader.load = jest.fn().mockImplementationOnce((_, onLoad, onError) => {
+ onLoad();
+ });
+ return Image.prefetch(uri).then(() => {
+ const source = { uri };
+ const component = shallow(, { disableLifecycleMethods: true });
+ expect(component.find('img').prop('src')).toBe(uri);
+ ImageUriCache.remove(uri);
+ });
+ });
+
test('is set immediately if the image has already been loaded', () => {
const uriOne = 'https://google.com/favicon.ico';
const uriTwo = 'https://twitter.com/favicon.ico';
@@ -247,4 +261,17 @@ describe('components/Image', () => {
const component = shallow();
expect(component.prop('onResponderGrant')).toBe(fn);
});
+
+ test('queryCache', () => {
+ const uriOne = 'https://google.com/favicon.ico';
+ const uriTwo = 'https://twitter.com/favicon.ico';
+ ImageUriCache.add(uriOne);
+ ImageUriCache.add(uriTwo);
+ return Image.queryCache([uriOne, uriTwo, 'oops']).then(res => {
+ expect(res).toEqual({
+ [uriOne]: 'disk/memory',
+ [uriTwo]: 'disk/memory'
+ });
+ });
+ });
});
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 25ee74e1..5695ecd9 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -130,7 +130,22 @@ class Image extends Component<*, State> {
}
static prefetch(uri) {
- return ImageLoader.prefetch(uri);
+ return ImageLoader.prefetch(uri).then(() => {
+ // Add the uri to the cache so it can be immediately displayed when used
+ // but also immediately remove it to correctly reflect that it has no active references
+ ImageUriCache.add(uri);
+ ImageUriCache.remove(uri);
+ });
+ }
+
+ static queryCache(uris) {
+ const result = {};
+ uris.forEach(u => {
+ if (ImageUriCache.has(u)) {
+ result[u] = 'disk/memory';
+ }
+ });
+ return Promise.resolve(result);
}
_filterId = 0;