zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-03 10:46:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Prevent constant Image reloading when source given as an object

Browse Source 
Close #1770
This commit is contained in:
Charlie Croom
2020-10-14 22:51:54 -04:00
committed by Nicolas Gallagher
parent 18d5d449a7
commit 09c2f1975b
3 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
+4 -4
View File
@@ -328,14 +328,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
>
<div
class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
style="filter: url(#tint-54);"
style="filter: url(#tint-57);"
/>
<svg
style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
>
<defs>
<filter
id="tint-54"
id="tint-57"
>
<feflood
flood-color="blue"
@@ -377,7 +377,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
>
<div
class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-53);"
style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
/>
<img
alt=""
@@ -390,7 +390,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
>
<defs>
<filter
id="tint-53"
id="tint-56"
>
<feflood
flood-color="red"
packages/react-native-web/src/exports/Image/__tests__/index-test.js
Vendored
+26
View File
@@ -183,6 +183,32 @@ describe('components/Image', () => {
expect(onLoadStub.mock.calls.length).toBe(1);
expect(onLoadEndStub.mock.calls.length).toBe(1);
});
test('is not called on update if "uri" is the same and given as an object', () => {
const onLoadStartStub = jest.fn();
const onLoadStub = jest.fn();
const onLoadEndStub = jest.fn();
const { rerender } = render(
<Image
onLoad={onLoadStub}
onLoadEnd={onLoadEndStub}
onLoadStart={onLoadStartStub}
source={{ uri: 'https://test.com/img.jpg', width: 1, height: 1 }}
/>
);
act(() => {
rerender(
<Image
onLoad={onLoadStub}
onLoadEnd={onLoadEndStub}
onLoadStart={onLoadStartStub}
source={{ uri: 'https://test.com/img.jpg', width: 1, height: 1 }}
/>
);
});
expect(onLoadStub.mock.calls.length).toBe(1);
expect(onLoadEndStub.mock.calls.length).toBe(1);
});
});
describe('prop "resizeMode"', () => {
packages/react-native-web/src/exports/Image/index.js
Vendored
+2 -3
View File
@@ -219,11 +219,10 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
}
// Image loading
const uri = resolveAssetUri(source);
useEffect(() => {
abortPendingRequest();
const uri = resolveAssetUri(source);
if (uri != null) {
updateState(LOADING);
if (onLoadStart) {
@@ -265,7 +264,7 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
}
return abortPendingRequest;
}, [source, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
}, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
return (
<View