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.

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

onSuccess callback calls only once #41

Open
StasKovalov opened this issue Jun 7, 2024 · 2 comments
Open

onSuccess callback calls only once #41

StasKovalov opened this issue Jun 7, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@StasKovalov
Copy link

StasKovalov commented Jun 7, 2024

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

@StasKovalov StasKovalov changed the title onSuccess callback call only once onSuccess callback calls only once Jun 7, 2024
@gtokman gtokman added the bug Something isn't working label Jun 15, 2024
@gtokman
Copy link
Member

gtokman commented Jun 15, 2024

@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
Copy link
Author

StasKovalov commented Jun 19, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants