Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: restart animations when image starts loading #84

Closed
wants to merge 1 commit into from
Closed

fix: restart animations when image starts loading #84

wants to merge 1 commit into from

Conversation

itsramiel
Copy link
Contributor

closes #83

The reason why a new source url that resolves to the same cache key hides the image is because the opacity is set to 0 when calling resetAnimations

react-native-image-cache/src/CachedImage.tsx

Lines 130 to 134 in 644fbda

const resetAnimations = () => {
animatedLoadingImage.value = 1;
animatedThumbnailImage.value = 0;
animatedImage.value = 0;
};

And resetAnimations is called when the source prop changes

react-native-image-cache/src/CachedImage.tsx

Lines 90 to 93 in 644fbda

if (propsSource !== currentSource.current) {
currentSource.current = propsSource;
resetAnimations();
}

However the image only shows up when the image has loaded

react-native-image-cache/src/CachedImage.tsx

Lines 156 to 168 in 644fbda

const onImageLoad = (e: NativeSyntheticEvent<ImageLoadEventData>): void => {
if (props.onLoad) {
props.onLoad(e);
}
animatedImage.value = withTiming(1, {
duration:
props.sourceAnimationDuration === 0
? 0
: props.sourceAnimationDuration ||
CacheManager?.config?.sourceAnimationDuration ||
100,
});
};

Now the problem is that since the source url resolves to the same cache key, the image will not load since it is already loaded and the opacity is never set back to 1, leaving the source image invisible even though it is loaded.

Since we animate the opacity back on image load, then it makes sense to reset the animation on image load start and not when the source url prop changes.

Here is the outcome after this change compared to the one showed in the issue. The difference here is that the image stays rendered after the url changes

Simulator.Screen.Recording.-.iPhone.15.-.2024-07-17.at.09.38.54.mp4

@itsramiel
Copy link
Contributor Author

@efstathiosntonas Can you please check this?

@itsramiel itsramiel closed this by deleting the head repository Aug 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Providing a new source url that results in the same cacheKey hides the image
1 participant
@itsramiel