billmalarky/react-native-image-cache-hoc

React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

react-native-image-cache-hoc's Issues

Hoc should not show console.error if cannot load image

it should just stay with placeholder, not crash whole app

Static methods (cacheFile, flush) works only with default directory

Precached files requested again if fileDirName is set.

Support caching logic on URI change in addition to on component mount.

Currently the caching logic only works on component mount. Thus in order to change the image you need to destroy the component and remount a new one.

Erick Reutz (https://github.com/erickreutz) has built logic to allow the caching mechanism to work on source props change.

#15

Implement this if possible and add tests.

The image can't be cache if the link is in HTTP

Based on the title,

The problem keep persist in android. Meanwhile when I try on ios it works perfectly fine.. It never mention any error just a warning.. But the image is not displaying on android because of this warn.. I did try allow the android:usesCleartextTraffic = true and other instruction based on this thread but the problem still persist..

Here's one of http image

and here's the warn display:

all of the above problem is when i use this :

CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true) .then( localFileInfo => { console.log(localFileInfo); });

if i use this function:

<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} permanent={false} />

this the warn i got :

I did try trace the 'EUNSPECIFIED' in the module itself and try to log one by one but the log never appear on the 'EUNSPECIFIED' section..

Did I do wrong somewhere?
Can anyone help me with this problem? Thanks in advance

app showing error while http url images in ios and android platform

I implemented react-native-image-cache-hoc. When I run code HTTP URL images are not showing even I modified my info.plist file with arbitrary loads true.
this error I am getting always -
Error with task : Error: Invalid source prop. props.source.uri should be a web-accessible URL with a valid protocol and host. NOTE: Default valid protocol is https, default valid hosts are *.

I used also this -
export const CacheableImage = imageCacheHoc(Image, {
validProtocols: ['http','https']
});

Permanent CacheableImages should not pull from local cache dir only permanent dir

Currently FileSystem.getLocalFilePathFromUrl() checks if a file exists in either the local cache or permanent directories before hitting the network and saving to the appropriate local dir.

If the permanent prop flag is set to true, we should hit the network even if the file already exists in the local cache dir because cache dir files are ephemeral and the permanent prop should not rely on them (what if the user wants this image to render in a future render even if at that point in time the app does not have internet access).

Better yet, if permanent prop is set and the file exists in the cache dir but not the permanent dir, ignore the network and just copy the local file from cache dir to permanent dir.

Error: url has invalid file extension

I suspect this library isn't able to handle URLs with query strings?

e.g. https://firebasestorage.googleapis.com/v0/b/.appspot.com/o/user-images%2F9666dfbe-0b6e-46de-9fc7-e41391c9dd2c.jpg?alt=media&token=2c7f555a-57be-48ff-a3e9-a457fcd05ee0

The library throws the error "Error: url has invalid file extension"

Cheers & good work so far!

how to get the cache size？

how to get the cache size？

I want to show the cache size to users and manual flush

Warning on setState

Hey @billmalarky

Sorry for being so verbose, but I found that in the line

react-native-image-cache-hoc/lib/imageCacheHoc.js

Line 153 in 5bca7d2

localFilePath => this.setState({ localFilePath }),

of imageCacheHoc file there is a setState without checking if the component is mounted. Maybe keeping a flag and setting to true in componentDidMount and false in componentDidUnmount would be a solution.

It happens of images that I show and hide real fast, I'm using it inside a chat app so this can happen. I can do a PR if you think it's a good idea.

Console warning

First of all, thank you for this project 🙏

I am getting a console waring in the app for each image.
"Received data was not a string, or was not a recognised encoding"

The only thing I found searching for a the cause of this warning was this issue on react-native facebook/react-native#1780 (comment)

"react-native": "^0.49.5",
"react-native-image-cache-hoc": "^1.4.0",

Could not add resizeMode property to cacheable image

Hello

I get an error on adding resizeMode: 'contain' property to style object of cacheable image.

While the native Image object supports the resizeMode property on style object.

Regards
Shubhi

Caches images non-unique naming

Sometimes react-native-image-cache-hoc throws Unhandled promise rejection error, android studio debugger shows that
'Unhandled promise rejection', { [Error: File ...filename.png already exists]

Cacheable Image not working with ImageBackground which does not use a uri.

Trying to load a locally required image, throws the above error. Code Snippet:
img = require('path/to/image.png');
<ImageBackground source={img} />;

react-native link rn-fetch-blob throws error

@billmalarky shouldn't the lib install the peer dependency automatically?

Warning

Hi,

Thanks for this great library. Right now I'm adding it to our react native app and sometimes I see this warning:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState or forceUpdate on an unmounted component. This is a no-op.

on line 151 of imageCacheHoc.js. At least that's what it says :). Am I doing something wrong or is there a way to fix that? Thanks

Feature Request: Implement PureComponent

Could be a great improvement for using image cache hoc inside FlatLists or SectionLists

Clear cache

Hello,

I was wondering if it's possible to clear the cache. For example when a user disconnects and then another one connects on the same device, I would like to clear the cache because the other account doesn't need the images that were stored in cache from the first account.

Thanks a lot.

it will crash when given a wrong image uri

it will crash when given a wrong image uri .

Can give a handle to place a default local pictue when uri is null?

Warning on last version

Hi @billmalarky

I've updated to the last library version and sometimes I get the following warning:

TypeError: undefined is not a function (evaluating 'this.cancelLocalFilePathRequest()')

Looks like sometimes the function is not initialized. It occurs when a view that has a ImageCacheHoc disappears quickly.

And btw, I have a question, the images that are stored in the cache (not permanently) should be visible from the DocumentDir folder? The problem is in a app screen that has a lot of images, I always get the placeholder but looking the code if it's a local file and already exists it should display the image directly from the local fs. But I don't know if it's the correct behaviour.

Thanks

HTTP Source images not supported

Hello

I an getting following error upon initialization of CacheableImage

i.e Invalid source prop. props.source.uri should be a web accessible url with a valid protocol and host. NOTE: Default valid protocol is https, default valid hosts are *.

Could you tell me if current library supports http protocol links.

Package abandoned?

There haven't been any commits for ~2.5 years and there are a number of pretty breaking issues #22 #26 #32 #45, do you intend on supporting this package going forward?
If this is abandoned would you consider letting someone else take it over?
I've ended up forking this package to add a few enhancements and quite a few changes (and some breaking ones), if this package is abandoned I think I may make my fork standalone.

https://github.com/mnightingale/react-native-image-cache-hoc/projects/1 outlines changes and ideas for future enhancements, granted I haven't made any updates for a while I've just added features as and when I needed them and the readme needs updates.

Notable changes:

• Replace permanent/cache with immutable/mutable
  • immutable - download only if not in cache (same as existing behaviour regardless of permanent value)
  • mutable - download if not in cache, else respect http headers (sends if-modified-since)
• Deduplication of requests (RxJS), multiple components can subscribe to the same URL, only one download request will be made and the components will be notified when the local uri changes
• Switch to react-native-fs (resolves image loading issues and I prefer the api and behaviour)
• Get file extension from path

The local file is actually not used. Should set source.uri instead on of uri

Line 189 in imageCacheHoc.js
Should change into

let props = Object.assign({}, filteredProps, { source: { uri: this.state.localFilePath }});

Instead of

let props = Object.assign({}, filteredProps, { uri: this.state.localFilePath });

Currently no local file is actually used

[Improvements] Request headers, filename, rejection callback

Hi there,

I forked your library for a project and added some (in my case) improvements:

• Component takes a headers-property (needed for authorization headers in my specific case)
• Component takes a fileName-property (I did not have the filename in the URL, and fetching the extension can slower than is desirable)
• Component takes a rejected-component, similar to the placeholder that has already been implemented
• Component takes a onRejected-property that gets called when fetching the image fails.

These additions should be perfectly backwards compatible.

Additional changes I want to implement in my fork, but would not be backwards-compatible:

• Changing the placeholder props and options into a more standard pattern (slots or render-function)

    <CacheableImage
       placeholder={
         <Spinner />
       }/>

or

    <CacheableImage
      placeholder={
        () => <Spinner/>
      }/>

• I was thinking of maybe changing up the code somewhat so the library could be changed to export both a FAC- and a HOC-component, but this would require some larger rearrangements of code.
  I feel this would make the library more flexible for advanced users.
  FAC-example

    <CacheableImage
      source="my.resource.com">
      {({pending, source, isRejected}) => 
        pending ? 
          <Spinner/> : 
          <Image source={source}/>
      }
    </CacheableImage>

I can totally make a pull request (or two!) for these, so they can be merged and published under this package, if those changes are something you see fitting here!

Cheers!

Warning: componentWillReceiveProps has been renamed

Getting this warning !!!!

Warning: componentWillReceiveProps has been renamed

file:

react-native-image-cache-hoc/lib/imageCacheHoc.js

Line 167 in a2880e9

async componentWillReceiveProps(nextProps) {

Caching Folder absolute path

I can't find out the full path to test if the caching is really working

[TypeError: Network request failed] in android

"react-native": "0.61.5",
"react-native-image-cache-hoc": "^2.0.0",
"rn-fetch-blob": "^0.12.0"

I get [TypeError: Network request failed] when I try to load image in android.

What have I tried?
Updated android manifest with android:usesCleartextTraffic="true" and deleted debug folder as mentioned in thread in rn-fetch-blob but no luck.

Can you please help me with this issue

Usable with ImageBackground?

Using <Image> with children is deprecated and will be an error in the near future. Is it possible to easily integrate this library with the new <ImageBackground>?

The docs do suggest implementing ImageBackground yourself. Is that an option for this package?

https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Unable to determine remote image filetype

When i try to load images with uri without file extension like .png .jpg. i get this error. For example
https://s3.us-east-2.amazonaws.com/my-files/da10e0d5-a781-4601-b40e-304459fbbd61

Error: Unable to determine remote image filetype.
    at FileSystem.getFileNameFromUrl$ (blob:http://localhost:8081/bdbc2931-ac7a-4ccf-babd-9e95180ae711:110388:23)

Any help will be highly appreciated. Anyway great package.

removing dep on react-native-fetch-blob?

react-native-fetch-blob has no maintainer, and a ton of issues.
On a fresh project with React Native 0.54 I couldn't get RNFB working after following manual linking instructions etc.
Are you using a lot of complicated functionality of RNFB or would it be possible to use just boring old fetches?

Getting the following exception when the image loads on iOS

Hi I'm using the cached image hoc to preserve images, but when the images loads, I am getting this exception. The image loads correctly though.

cannot load special url with query argument

The plugin can load this image file,but can't load the url with argument.why?
http://ophkybhhb.bkt.clouddn.com/032e7596d4e7ed5cae43f9bd7215f93b2c801156.png

http://ophkybhhb.bkt.clouddn.com/032e7596d4e7ed5cae43f9bd7215f93b2c801156.png?imageView2/1/w/50/h/50/q/75|imageslim

Make rn-fetch-blob a peer dependency

In the same way that react-native is not a direct dependency, rn-fetch-blob should be a peer dependency.

Users may already have a direct dependency on this in their project - ideally this wouldn't be duplicated. It also allows users to use other (compatible) versions of rn-fetch-blob which may include bug fixes.

It can be added as a dev dependency for the tests to run, if necessary. The minimum compatible react-native version should also be specified as a peer dependency.

Image loading issue - Half images

images are showing when its not fully loaded.

How to set expiration time for the cache to be deleted ?

Hi .

One of key aspects of cache images is the expiration date , which you can set to something like 7 days until the image is deleted .

How I can do this with this lib ?

Thanks in advance .