diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap index b7314426d..c87e95253 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap @@ -255,7 +255,7 @@ exports[`components/Image prop "source" is correctly updated when missing in ini `; -exports[`components/Image prop "source" is not set immediately if the image has not already been loaded 1`] = ` +exports[`components/Image prop "source" is set immediately if the image has already been loaded 1`] = `
@@ -272,53 +272,53 @@ exports[`components/Image prop "source" is not set immediately if the image has
`; -exports[`components/Image prop "source" is set immediately if the image has already been loaded 1`] = ` +exports[`components/Image prop "source" is set immediately if the image has already been loaded 2`] = `
`; -exports[`components/Image prop "source" is set immediately if the image has already been loaded 2`] = ` +exports[`components/Image prop "source" is set immediately if the image was preloaded 1`] = `
`; -exports[`components/Image prop "source" is set immediately if the image was preloaded 1`] = ` +exports[`components/Image prop "source" is set immediately while image is loading and there is no default source 1`] = `
`; 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 0e75e792e..abfae4787 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 @@ -277,8 +277,8 @@ describe('components/Image', () => { }); }); - test('is not set immediately if the image has not already been loaded', () => { - const uri = 'https://google.com/favicon.ico'; + test('is set immediately while image is loading and there is no default source', () => { + const uri = 'https://google.com/not-yet-loaded-image.ico'; const source = { uri }; const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index 64b7a7327..c89dd0ab3 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -225,24 +225,18 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => { } } - const [state, updateState] = React.useState(() => { - const uri = resolveAssetUri(source); - if (uri != null) { - const isLoaded = ImageLoader.has(uri); - if (isLoaded) { - return LOADED; - } - } - return IDLE; - }); - + const [state, updateState] = React.useState(IDLE); const [layout, updateLayout] = React.useState({}); const hasTextAncestor = React.useContext(TextAncestorContext); const hiddenImageRef = React.useRef(null); const filterRef = React.useRef(_filterId++); const requestRef = React.useRef(null); + const uri = resolveAssetUri(source); + const isCached = uri != null && ImageLoader.has(uri); const shouldDisplaySource = - state === LOADED || (state === LOADING && defaultSource == null); + state === LOADED || + isCached || + (state === LOADING && defaultSource == null); const [flatStyle, _resizeMode, filter, _tintColor] = getFlatStyle( style, blurRadius, @@ -297,7 +291,6 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => { } // Image loading - const uri = resolveAssetUri(source); React.useEffect(() => { abortPendingRequest();