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

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

Open
xts-bit opened this issue Mar 5, 2023 · 1 comment
Open

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

xts-bit opened this issue Mar 5, 2023 · 1 comment
Labels
question Further information is requested

Comments

@xts-bit
Copy link

xts-bit commented Mar 5, 2023

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;
@xts-bit xts-bit added the question Further information is requested label Mar 5, 2023
@ramonxm
Copy link

ramonxm commented Jul 9, 2024

i have the same question

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants