I'm using RNCamera to take a picture. The path to the picture taken is in the file systems cache. Something like this:
"file:///data/user/0/com.find/cache/Camera/1986b5f9-4770-a255-543703fc6597.jpg"
Then I use the react native image editor to crop this image and I get another file. Something like this:
"file:///data/user/0/com.find/cache/ReactNative_cropped_image_8510242.jpg"
These files are (according to the filepath of the images, at least) stored in the cache on the phone.
My question is this:
How long can I be sure that these images will remain in the cache? Do they get cleared when the app is closed? Or will they remain until I delete them myself?
Thanks!
This Thread is old but for those who need it:
So, i've been working with RNCamera since 2 weeks now and i had the same question, but sadly i couldn't find any answer. I now checked with react-native-fs and it seems like the images are stored for the whole Camera session or maybe even the whole app session, thats the thing i could not find out.
But they still stay cached after reusing the RNCamera
Related
I'm losing my mind trying to get this to work.
So, it seems that, in React Native, Android will cache the image of a certain URL forever. If I change the image at that URL, it will not change in the app for Android, but iOS handles it just fine.
I know about the trick of just adding
`?time=${Date.now()}`
to the end of the uri specified in source={{ uri }}
However, that will fetch a new image every time, which technically works, but then the user has to wait for the image to load every time. I could add an ActivityIndicator placeholder while the image loads, but if I could properly cache the image then that ActivityIndicator wouldn't be shown nearly as often, making for better UX.
I would like to know if there's a way to check if the remote image has changed, within the constraints of Expo SDK 33 (no react-native link). I can handle the cache busting just fine if there is such a method, it would just require incrementing a persistently saved integer whenever a change is detected, and appending that to the uri.
Maybe a different approach is necessary.
I fixed this issue in the backend. If you have access to the backend, that's great!
What I did was create an API that would take in the path to the image that I wanted, and it redirected to that image, with ?lastUpdated=<modified> appended to the URL, where <modified> is the time at which that file was last modified. This way, it automatically cache busts the image whenever the image is changed!
I have an app that makes heavy use of the Image component from React Native.
I understand that caching is good for remote images but I need to load local images which change regularly.
The Image component is caching the files and showing the cached version even when the local files change.
The question is how do I disable caching on local files but keep it for remote URLs (as I have a mix of local and remote)?
I would give a code example but literally it's as simple as
<Image source={{uri: 'file://image.png'}} />
Note: These are files that are created and changed by actions in the app so require('image.png') will not cut it. I use that for static images all the time and works great but it's static not dynamic.
I've also seen answers about random query params on the end of the string. That's very hacky in general so I wouldn't hire you for a job :) but apart from that it apparently doesn't work.
Cheers in advance!
To be really clear based on commments and answers to far....when the image file changes. It needs to change the image component immediately so caching and state need to be cleared and the new image is displayed.
A bit late to answer but you can add the query "?time=new Date()" in your variable, like that :
const [profilePicture] = useState(`${baseURL}${user.infoUser.image_profile}?time=${new Date()}`);
The main problem with this one is that is gonna refresh the image every time and oso the delay to display the image may be quite high.
Catching would be good for your app,so you don't want to stop. The solution to that sort of problem is to change the name of the image as well as the image itself. Changing the image without changing the name will do nothing.
You could have something like this
<Image source={{uri: `file://${imageName}`}} />,
that's the only piece of code you have posted so I can't really suggest more than that.
Better still you could store the imageName as part of state to be be able to re-render to a different anytime you feel like.
<Image source={{uri: `file://${this.state.imageName}`}} />
I think the problem is that there's no listener for changes on the image resource itself (and I don't think there's an library for that either). The only possible solution if you don't want to change the name of your file, would be to trigger an Event (or a state/redux - change) to force the component to reload everytime you change the Image in your code.
Otherwise you have to write your own library which always listens on image changes and reloads the component evertime something changes.
Can anyone tell me why when I use my app, every boot up has a lag when loading my images and vector font icons? It probably only lags for a second, but it looks really bad.
It can't be the sizes of them because even the vector icons have about a second lag. Is there any way to prevent this
Would this have anything to do with it being connected to Expo?
You can resolve this by caching your assets while the app loading screen is still up: https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html
Nevermind I found out it's an Expo thing. They strip all of the local images and put it in their cdn before building the app. Take note if you have an app in production using Expo
I have a component which consists of a FlatList and a Modal-component. This modal component has several Image-components. The images are set by the source-attribute to an external url.
I switch die visibility of the modal-component by changing the visible attribute.
The problem:
Everytime I open the modal (at the beginning or after closing it) the images are loaded from the server. So there are no images for maybe 1 second.
Are the images deleted from the cache if I set the visible of the modal to false??
Caching of images can be related to multiple things. The most effective one is probably the Cache-Control header sent from the server when you request the image. You can check the headers to see if the request has a low time on cache.
The other thing is that, while development process, building or hot-reloading of the app can result in clearing the cache for the app.
Another reason can be the low storage in device might be triggering the OS to delete cached images.
In iOS you can control caching. More info can be find here.
Its hard to tell without any sample code but, if you are mounting and then unmounting Modal when you set the visibility of it, you can try to prefetch images before mounting the Modal. If the caching control is right when you mount the Modal they should be served from the cache. If the images you are trying to show are large it might be a performance issue or they might be taking long time to load from the disk. You can debug this with a less number of item in modal with smaller images.
Hope the information above is going to be enough.
you can use react-native-img-cache
or react-native-cached-image to cash your images
and yes the images in react native are not cached by default
also to preload images you can use react-native-fast-image
i'm new in smartphones app developer, so i have this trouble, I'm trying to optimize my application by trying to store the cache images, however, by performing the save action on the device these are not shown, but it shows me in the debug that if they are stored but I can not see them, they are invisible...
Without Cache
Cache stored
With react-native you can't do this because when you require an image from a path, this path has to be a fixed string. You cannot do, for example:
const myImage = require(`/cache/${imageId}.png`);
Anyway, network images are already cached AFAIK.