How to use react-native-blurhash to show image loading progress?

[xts-bit]

How to use react-native-blurhash to show image loading progress? I am trying to show users' image progress with blur colors according to the image how can i use that to do that? like when the image is fetching and then loading it displays a blurred image How can I do this? For example, there is an image in the image there is a sun a tree, and a river flowing so instead of manually adding yellow color for the sun green color for the tree, and blue color for the river how can I do something like it displays blur yellow color green color blue color the color is based on the image data How to do this I am trying to do this can you help me to do that? I tried to use a package called react-native-blurhash But I can't able to use it properly how can I use this according to my need

import React, { useState, useMemo } from 'react';
import { View, ActivityIndicator } from 'react-native';
import FastImage from 'react-native-fast-image';
import { Blurhash } from 'react-native-blurhash';

const News = ({ picture }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [blurhash, setBlurhash] = useState('');

  useMemo(async () => {
    const imageBitmap = await fetch(picture).then((response) => response.blob());
    const blurhash = await Blurhash.encode(imageBitmap, 4, 3);
    setBlurhash(blurhash);
  }, [picture]);

  const source = useMemo(() => ({ uri: picture }), [picture]);

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        {blurhash ? (
          <Blurhash
            blurhash={blurhash}
            style={styles.image}
          />
        ) : null}
        <FastImage
          source={source}
          style={[styles.image, { opacity: isLoading ? 0 : 1 }]}
          priority={FastImage.priority.high}
          onLoadEnd={() => setIsLoading(false)}
        />
        {isLoading && <ActivityIndicator style={styles.spinner} />}
      </View>
    </View>
  );
};

export default News;

[ramonxm]

i have the same question

[codegabk]

@ramonxm @xts-bit Use expo-image's placeholder prop: <Image {...props} placeholder={{ blurhash: "UCB:Q%.=EvE5{C^|mpsk7xqw~TwK9ckn$+%1" }} />