Suggestion: A more reliable way to check if image is in the cache

[dominictb]

Is there an existing request?

• I have searched for this request

Describe the feature request

Problem

Original issue: Expensify/App#45853

Most of the time if the image is loaded once, it will be in the cache, and subsequent fetch for the same image URI will hit the cache. However, this implementation

react-native-web/packages/react-native-web/src/exports/Image/index.js

Lines 203 to 212 in 54c14d6

	const [state, updateState] = React.useState(() => {
	const uri = resolveAssetUri(source);
	if (uri != null) {
	const isLoaded = ImageLoader.has(uri);
	if (isLoaded) {
	return LOADED;
	}
	}
	return IDLE;
	});

indicate that if the initial state of the image will always be IDLE even if the image is loaded before.

Solution

We will modify the ImageLoader.has logic to be able to check reliably if the image is in the cache. It works both when the image URI is previously loaded by <img tag or by the Image component in react-native-web

let globalImageToCheckCache = new window.Image()
ImageLoader.has = (uri) => {
   globalImageToCheckCache.src = uri;
   let isInCache = globalImageToCheckCache.complete
    globalImageToCheckCache.src  = '' // unassign to avoid firing extra request
    return isInCache
}