candlefinance / faster-image

Fast image loading for React Native backed by performant native libraries.
https://candle.fi/discord
MIT License
479 stars 21 forks source link

onSuccess callback calls only once #41

Open StasKovalov opened 3 weeks ago

StasKovalov commented 3 weeks ago

Preamble

To have a nice placeholder while the photo is being loaded from the server for both platforms, I am using the react-native-blurhash library. Below is a code sample of how I use it together.

Reproduceable Code

import { useState } from 'react';
import { View } from 'react-native';

import { FasterImageProps, FasterImageView } from '@candlefinance/faster-image';
import { Blurhash } from 'react-native-blurhash';
import Animated, { FadeOut } from 'react-native-reanimated';

import { useStyles } from './serverProgressiveImageLoading.styles';

export const ServerProgressiveImageLoading = ({
  source,
  style,
}: FasterImageProps) => {
  const styles = useStyles();
  const [isImageLoadedFromServer, setIsImageLoadedFromServer] = useState(false);

  const onSuccessImageLoad = () => {
    setIsImageLoadedFromServer(true);
  };

  return (
    <View style={style}>
      {!isImageLoadedFromServer && (
        <Animated.View exiting={FadeOut} style={[styles.blurhashContainer]}>
          <Blurhash
            blurhash="LLJ}ucoJVEs.}[W;VsjZm-w{n*S2"
            decodeAsync={true}
            decodeWidth={32}
            decodeHeight={32}
            style={styles.blurhash}
          />
        </Animated.View>
      )}
      <FasterImageView
        source={source}
        onSuccess={onSuccessImageLoad}
        style={styles.blurPlaceholderOrImage}
      />
    </View>
  );
};

Problem

onSuccess is called only once. When you reopen the app, the callback is no longer called, which may be because the photo is already cached, but even in this situation, I would like to understand that it is already loaded to remove this blur placeholder. I also use a FlashList for preview these images like a feed, which I think is also one of the reasons for this behavior.

P. S. Waiting for your response. Thanks for this great library

gtokman commented 1 week ago

@StasKovalov thanks for the report. I'll take a look. Is this happening on both platforms?

FWIW, blurhash is supported on iOS and WIP on Android.

StasKovalov commented 1 week ago

@StasKovalov thanks for the report. I'll take a look. Is this happening on both platforms?

FWIW, blurhash is supported on iOS and WIP on Android.

@gtokman, Yes, for both. I also found a bug for base64Placeholder, resizeMode does not work on it. The image that is in base64Placeholder, it just stretches randomly