onSuccess callback calls only once

[StasKovalov]

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]

@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]

@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

[sontruongna]

I also have the same issue. onSuccess calls only once. I think many people like me will need onSuccess to get the width and height every time the image is loaded

[tconns]

@StasKovalov I have just committed the BlurHash feature support for Android at https://github.com/candlefinance/faster-image/pull/55. Combined with the existing BlurHash for iOS, you will no longer need to use the "react-native-blur" package

[Falicitas]

same issue