billmalarky / react-native-image-cache-hoc Goto Github PK
View Code? Open in Web Editor NEWReact Native Higher Order Component that adds advanced caching functionality to the react native Image component.
License: MIT License
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.
License: MIT License
Getting this warning !!!!
Warning: componentWillReceiveProps has been renamed
file:
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:
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]
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?
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.
Implement this if possible and add tests.
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.
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.
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
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",
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.
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
it should just stay with placeholder, not crash whole app
I can't find out the full path to test if the caching is really working
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
it will crash when given a wrong image uri .
Can give a handle to place a default local pictue when uri is null?
Hi there,
I forked your library for a project and added some (in my case) improvements:
headers
-property (needed for authorization headers in my specific case)fileName
-property (I did not have the filename in the URL, and fetching the extension can slower than is desirable)rejected
-component, similar to the placeholder that has already been implementedonRejected
-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:
<CacheableImage
placeholder={
<Spinner />
}/>
or
<CacheableImage
placeholder={
() => <Spinner/>
}/>
<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!
Hey @billmalarky
Sorry for being so verbose, but I found that in the line
of imageCacheHoc file there is asetState
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.
@billmalarky shouldn't the lib install the peer dependency automatically?
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']
});
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.
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?
I want to show the cache size to users and manual flush
Precached files requested again if fileDirName is set.
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.
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
The plugin can load this image file,but can't load the url with argument.why?
http://ophkybhhb.bkt.clouddn.com/032e7596d4e7ed5cae43f9bd7215f93b2c801156.png
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
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 .
Could be a great improvement for using image cache hoc inside FlatLists or SectionLists
"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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.