katanyajati / react-native-image-blur-loading Goto Github PK

View Code? Open in Web Editor NEW

23.0 4.0 7.0 693 KB

React Native component for progressive image loading.

TypeScript 100.00%

react-native image progressive component loading

react-native-image-blur-loading's Introduction

React Native Image Blur Loading

React Native component for progressive image loading.

Installation

Run in your root project directory

using NPM

$ npm install react-native-image-blur-loading

or using yarn

$ yarn add react-native-image-blur-loading

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import ImageBlurLoading from 'react-native-image-blur-loading'

// ...
const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <ImageBlurLoading
        thumbnailSource={{ uri: 'https://picsum.photos/id/1/50/50' }}
        source={{ uri: 'https://picsum.photos/id/1/1000/1000' }}
        style={{ flex: 1, width: 'auto', height: 'auto', resizeMode: 'contain' }}
      />
    </View>
  )
}

Properties

Props	Description	Type	Required	Default
Image props ...	It accepts all the Image props	-	-	-
`thumbnailSource`	The source of the thumbnail image. Should be a low resolution version of the image used in `source`.	ImageSourcePropType	No	-
`withIndicator`	Displaying `ActivityIndicator` component while the image is still loading.	boolean	No	`true`
`fastImage`	uses the FastImage component (react-native-fast-image) to handle image caching.	boolean	No	`false`
`resizeMode`	Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.	ResizeMode	No	`cover`

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

react-native-image-blur-loading's People

Contributors

Stargazers

Watchers

Forkers

eraydemirok kopax vuongductuanktmt rub1cc ali14a virtualizellc moocss

react-native-image-blur-loading's Issues

Indicator is still showing when withIndicator is not passed as a prop

I don't want to show activity indicator so I removed withIndicator props and still its showing Activity indicator in the bottom. In documentation its given as not required

Here is the code I tried first

   <ImageBlurLoading
        thumbnailSource={{uri: sliderImage}}
        source={{uri: sliderImage}}
        style={[sliderStyle.imageHeight]}
     />

Here is the result of the above result

After that I passed withIndicator={false} and its working fine

<ImageBlurLoading
          withIndicator={false}
          thumbnailSource={{uri: sliderImage}}
          source={{uri: sliderImage}}
          style={[sliderStyle.imageHeight]}
/>

Animated: `useNativeDriver` was not specified warning

Getting a useNativeDriver warning on RN 0.62.
Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

Possible memory leak

I keep getting the following warning with this component:

Warning: Can't perform a React state update on an unmounted component. This is
a no-op, but it indicates a memory leak in your application. To fix, cancel all
 subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function,
    in ImageBlurLoading (at Thumbnail.js:63)

Android don't have loading

ActivityIndicator size="small" color="gray"

undefined is not an object (evaluating style.borderBottomLeftRadius)

When not providing a style for the ResizeImage I get the following error.

undefined is not an object (evaluating style.borderBottomLeftRadius)

Perhaps the default styles need to be fixed?

fix timeout memory leak

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-image-blur-loading/src/index.tsx b/node_modules/react-native-image-blur-loading/src/index.tsx
index 7a36d91..e6905b7 100755
--- a/node_modules/react-native-image-blur-loading/src/index.tsx
+++ b/node_modules/react-native-image-blur-loading/src/index.tsx
@@ -35,7 +35,12 @@ function ImageBlurLoading(
 
   useEffect(() => {
     thumbnailSource && setHelper(true)
-    setTimeout(() => setLoading(false), 20000) // fetch image timeout 20s
+    const timer = setTimeout(() => setLoading(false), 20000) // fetch image timeout 20s
+    return () => {
+      if (timer){
+        clearTimeout(timer)
+      }
+    }
   }, [])
 
   const handleThumbnailLoad = () => {

This issue body was partially generated by patch-package.