code-and-co / react-native-image-offline Goto Github PK

As I saw in the sources, I do not have an ability to set my own headers for image requests. How soon will this function be implemented? And will it be realized at all?
I mean have you planed to implement this one?

Great Work

Hello,
I am so happy to find your package because it suits perfectly my needs. Thank you for this great work!

Problem

Anyway, I was trying to clear the store before re-downloading images but when doing it, I got an error saying that the images I re-download already exists and then when I try to display the image, I got an error: Could not find image: file://blablabla....

Observation

Looking through the code, I noticed that here:

Then, I noticed that the instance was frozen before being export:

As a result, it is not possible to reassign property like this.entries = {}

When I comment this line, it works fine.

Solution

I identified two solutions,

The first and easiest solution would be to remove the line L368 (the freeze of the instance) but I am not sure why it is done like that and I'm not aware of side effects

The second solution would be to rework clearStore function. Iterating on this.entries and deleting each keys one by one:

delete this.entries[blabla]

Conclusion

I would be happy to develop the fix because I'd like to use it quickly in my project.
Let me know which solution you like the most.
Waiting for your answer, I will be implementing the second one.

Have a nice day!

Robin

When I install the app and fetch news with images, it stays a fallback image for several seconds and then the image appears corrupted:

What direction should I keep digging?

The lib is great! Thank you!

Hi. Great job on this. I have read all your doco, but, 3 questions...

1. What excactly does OfflineImageStore.restore do? The code comments say to run on app startup. From the code it seems to just load all image details from AsyncStorage and then clear those that are expired. Is that correct? It doesn't do anything else?
2. What exactly does OfflineImageStore.preLoad do? The code makes it looks like it just starts downloading and storing the images that aren't in the store. Nothing else?
3. So if my assumptions above are correct, then if a remote image changes, the store won't update until the timeout is reached?

Thanks :)

EDIT: And if the images we are storing are a bit more dynamic (i.e. profile pics of other users that the current user is interacting with), then when we add a new uri in an should we be running either of these functions?

Great lib, as I have already told you :)

Hello, ist it possible to get the downloaded local file path? We want to share downloaded image or save it to camera roll. Just saving via URL wont work, as there is a header needed.

Thank you for any advice.

Image doesn't refresh if the new source is from local storage.

After update react native to 0.59, I found some warnings related to AsyncStorage, because, the lastest version of react native, dont use AsyncStorage from react-native, they has moved this dependency to https://github.com/react-native-community/react-native-async-storage , I ask me if is possible do this change, if you want i could make a pull request with this change

HI,
I have to update the source of my image. Here what i do
<OfflineImage
resizeMode={'cover'}
style={{
flex: 1,
width: Dimensions.get('window').width / 2
}}
source={ { uri: data.main_image[this.state.selectImagePosition] }}

But the image doesnt change. Any idea ?

See : https://reactnative.dev/blog/2023/01/12/version-071#breaking-changes

Any fork or new package indication is appreciated :)

I notices that the version that is released via npm is v0.0.7 and is ahead of v0.0.6 which is the most current in this repo.

Can you push the changes to GitHub as I would like to send a merge request against the most recent state?

Thanks

Thanks for this awesome library.
I have used it in one of the product for my client and initially it works fine, I preload the images and they are shown even offline.

But after a few days (some random time I guess), it shows blank image. Please see this video:
https://youtu.be/sjB8KkGl0v8

Let me know if this is a known issue or if this can be fixed.

If the uri image does not exist, then the fallback image is not shown instead. This only happens if this image is beeing rehydrated.
If I'll find time, I'll try to make a PR.

Hi, i am using offline image cache storage to store images offline but i am facing an issue that is the library isn't able to download the image from the same url which is stored already in the cache.

For example:- https://images.graph.cool/v1/cji4f30yf6uwx0119va5jp226/cjio9y0ny7sat0161stutdvts/800x600
This is the url and when i call the offline image store again to download and store it in the offline that is not stored even i cleared the offline image cache.

Please give the solution.

I have an OfflineImage like this

<OfflineImage
resizeMode="cover"
key={'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls11111.jpg'}
style={[styles.imgBackground]}
fallbackSource={FALLBACK_SOURCE}
source={{
uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls11111.jpg',
}}
/>

Basically its a a invalid uri that I am trying to load. It should go to fallback source right. Could you please let me know if i am missing something here

Related to #1

This still seems to be an issue on 0.1.4. We are changing the uri of the image, but it does not reload. I have checked OfflineImage.js and the code changes listed above are there, although 1 line is different....

if (nextSource && source && nextSource.uri !== source.uri){

I put some logging before that if statement and noticed that nextSource.uri and source.uri are showing as the same value, even though I change the value

<OfflineImage
accessibilityLabel="logo"
accesible
key={KEY_COMMON_EYE_CLOSE}
style={styles.eyeIcon}
reloadImage
fallbackSource={this.state.eye}
source={{
uri: "",
}}
/>

When uri value is empty, it doesnt seem to load the fallback source. How to do this. Please let me know

Hi there,

I noticed an error while using your package. After the boot of my application, I systematically clear the store then preload all my images for offline usage.

Clearing the store fails because no images have been saved yet, and the folder does not exist yet.

Is there a reason why clearing the store fails when the store is empty?

The goal of clearStore being having an empty store once executed, it feels natural to have a clearStore on an empty that does not fail.

Would you accept a PR changing the clearStore behaviour? Do you have any other sugestions/objections?

return new Promise((resolve) => OfflineImageStore.clearStore(resolve))
  .then(() => OfflineImageStore.preLoad(urls))

OnePlus6:/ $ adb shell
OnePlus6:/ $ run-as com.myapp.dev
OnePlus6:/data/data/com.myapp.dev $ ls cache/
WebView image_cache

unable to remove offline store Error: Failed to delete '/data/user/0/com.myapp.dev/cache/Offline_Images'
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:116440:42
    at MessageQueue.__invokeCallback (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8849:18)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8596:18
    at MessageQueue.__guard (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8753:13)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8595:14)
    at t (file:///Applications/React%20Native%20Debugger.app/Contents/Resources/app.asar/js/RNDebuggerWorker.js:1:42788)
From previous event:
    at Object.unlink (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:116433:12)
    at OfflineImageStore.clearStore (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:115316:40)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139492:52
From previous event:
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139489:14
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188185:20
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188496:16
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:190360:35
    at dispatch (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:91308:20)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139352:16
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28999:21
    at _callTimer (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28888:9)
    at _callImmediatesPass (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28924:9)
    at Object.callImmediates (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:29143:14)
    at MessageQueue.__callImmediates (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8770:16)
From previous event:
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139351:42
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188185:20
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188496:16
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:190360:35
    at dispatch (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:91308:20)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139375:32
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28999:21
    at _callTimer (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28888:9)
    at _callImmediatesPass (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28924:9)
    at Object.callImmediates (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:29143:14)
From previous event:
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:139374:10
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188185:20
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188496:16
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:190360:35
    at dispatch (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:91308:20)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:136918:16
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28999:21
    at _callTimer (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28888:9)
    at _callImmediatesPass (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:28924:9)
From previous event:
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:136915:10
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188185:20
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:188496:16
    at Object.dispatch (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:190360:35)
    at dispatch (file:///Applications/React%20Native%20Debugger.app/Contents/Resources/app.asar/js/RNDebuggerWorker.js:1:8072)
    at initialize (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:114981:16)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:115019:11
    at OfflineImageStore._removeExpiredImages (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:115477:11)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:115676:26
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:86677:23
    at MessageQueue.__invokeCallback (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8849:18)
    at blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8596:18
    at MessageQueue.__guard (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8753:13)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (blob:file:///0316cea7-6261-451a-85f0-546f5be1781a:8595:14)
    at t (file:///Applications/React%20Native%20Debugger.app/Contents/Resources/app.asar/js/RNDebuggerWorker.js:1:42788)

Good job!

Hello team,
I am still really happy with your package. It works well!

Problem

Anyway, when I use the package, I get a bluebird warning message saying that a promise is created but not returned: https://github.com/petkaantonov/bluebird/blob/master/docs/docs/warning-explanations.md#warning-a-promise-was-created-in-a-handler-but-was-not-returned-from-it

Observation

Looking through the code, I found some places where we are in a chain of promises and we call another async function without returning anything:
1:
https://github.com/code-and-co/react-native-image-offline/blob/master/src/OfflineImageStore.js#L93
2:

Solution

In order to avoid this warning to appear for those using bluebird, and considering that you did not return these promises on purpose, a solution would be to simply return null after the call of those three functions. It would solve the problem, as detailed in bluebird documentation: bluebird warning
More over, its always a good thing to return null from a function instead of nothing.

Conclusion

What do you think about this fix?
I would be happy to do it myself because if I don't my only way is to silent this kind of error in my whole project and I don't want to.

Regards,

Robin

First off, amazing library!! This really solved a major problem for my app without me having to go through and write it myself.

Are you guys thinking about having the ability to use multiple storage folders or divide the current storage folder somehow? If not, I'm happy to do a PR if I have the time to add the feature. Thanks!