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
Related
I am creating an app using Expo/RN where the first screen has a fair amount (~20) images loaded, as the result of a network call. I am only working in iOS.
My issue is that the images load extremely slowly, most taking around a minute to load, and some never load but stay black. I am using the built in Image component, with a url supplied in the source object. The images load immediately when the mobile website is loaded in Safari.
Furthermore, the built-in caching seems to not work at all. When an image has loaded and should be shown in multiple places, it often doesn't appear in the second place at all. I have tried using "force-cache" with no effect.
I have tried the packages react-native-fast-image, which wouldn't run, and react-native-expo-image-cache, which gave me some results but memory leak issues and UI freezes.
Is there any solution? Should I just create my own caching component?
EDIT: The images are loaded in a FlatList. Each item is rendered by a custom component including an . The image simply takes the url as
<Image
style={[styles.image, smallCell ? { width: smallCellWidth } : {}]}
source={{ uri: project.imageUrl, cache: "force-cache" }}
opacity={0.85}
/>
It turns out the biggest issue was not on the RN side, but the API call used. I was downloading the original sized images from the server, rather than the resized ones, and they were so large that I was getting the above result.
However, using force-cache did have good results for me.
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!
There is any possibility to upload a file with different sizes in DropzoneJs?
I'm using vue-dropzone which is made with dropzonejs and i have to upload the same file with different sizing for srcset.
Example:
I want to upload the file test.png which is 1000x500 px. There is any possibility to upload it at the same time in original resolution and also in 500x250px?
Image resizing in the browser has been a seat-of-the pants experience for a long time. Web assemblies are the way of the future for processing-intensive tasks in web apps. I came across this project the other day. It looks fantastic and I really can't wait to strip out our home-baked image resizing with canvas and replace it with this.
The usual reason for doing this is to avoid large uploads. It's a little bit weird to want to resize in the browser then upload the original. You might be better resizing on the server. You'll save bandwidth and the server libraries will be more mature than what's available on the client.
Along with the original image object you can add one more your custom resized image to the array of images by using resize config of dropzone. You can do the above on drop event or adddedFile event of dropzone.
I am having difficulties to understand Image prefetch. In the doc's there is not much explanation about it:
"Prefetches a remote image for later use by downloading it to the disk
cache"
Could you please help me understand the following about Image prefetch:
Suppose a user uploads a profile image, and the image's URL is stored in the AsyncStorage.
Should I run Image.prefetch(UserStore.profileImageUrl) only once after successful upload. And use prefetched image in the components normally like <Imagesource={{uri: UserStore.profileImageUrl}}/>
Or should I always run Image.prefetch(UserStore.profileImageUrl) before using that image in the component, then only run <Imagesource={{uri: UserStore.profileImageUrl}}/>
Suppose, later on, the user changes their profile image by uploading a new image and after successful upload, I will prefetch the new image. Will the previously cached image still exist on the disk?
If yes, won't it occupy a lot of space in the device if there are lots of prefetched images?
Is there any way to manually remove the prefetched image from the disk?
With the above questions in mind, if there are alternate solutions to achieve caching of images when using react native with expo, could you please help me with it.
It was indeed a question that I was dealing with for a while, and I learned a few things about Image.prefetch:
In the current React-Native version (0.48), this method is still in progress. To be more precise:
the ios implementation is still incomplete.
There is no complete guide on it.
There is no way to clear cache (you can check if the url is cached, however as far as I know you cannot clear it now).
As a result, I don't suggest you use it. Regardless, if you want to know how the API works, it is how:
Purpose
The purpose is quite obvious I think, this API:
Prefetches a remote image for later use by downloading it to the disk cache
It means that you can use Image.prefetch(url) in your constructor or componentWillMount. It tries to fetch image asynchronically, then, render your page with some kind of an ActivityIndicator, Finally, when the image is successfully fetched you can re-render your component.
Image.prefetch(url) actually saves the image to disk (not memory), as a result, whenever or wherever you try to use
<Image source={{uri:url}}/>
At firsts it checks the list of caches urls, if you have prefetched that url before (and it is located on the disk), it won't bother to re-fetch (unless you run function `Image.prefetch(url)' again (I am not sure if it works properly).
The implications of this issue are so complicated. It means that if you prefetch an image inside one component (for example <Component1/>), when you try to show this specific image in another component (for example <Component12>), It won't fetch the image and just uses the disk cache.
Therefore, either don't use this Image.prefetch at all (until there is a complete API, with cache control) or use it at your own risk.
on Android
On Android, you have 3 APIs for prefetch, and only one of them is presented in the documentation:
prefetch:
var response = Image.prefetch(imageUrl,callbackFunction)
Image.prefetch can have an optional second argument callbackFunction, which a function that runs Before fetching image. It can be written in the following format:
var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))
It might be worthy to note that, callbackFunction can have an argument called requestId, (indicating the number of prefetch among all other prefetches) which can be then used to abort the fetch.
var response = Image.prefetch(imageUrl,(id)=>console.log(id))
Moreover, response is a promise, you can use .then to do more after the image is pre-fetched.
abortPrefetch
Image.abortPrefetch(requestId) ;
used to abort the pending prefetch. requestId used as argument is the same as the one seen in prefetch.
queryCache
Image.queryCache([url1,url2, ...])
.then((data)=>console.log(data));
Used to check if a certain url is already cached, and if so where is it cached (disk or memory)
on IOS
I think that only Image.prefetch(url) is currently available on IOS, and there is no callback function to be called as the second argument.
if there are alternate solutions to achieve caching of images when
using react native with expo, could you please help me with it.
You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component.
React Native Image Cache HOC
Tl;DR Code Example:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
</View>
);
}
}
The first image will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.
The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app.
Personally I would not overcomplicate things by writing over files over and over when the file changes, that's just asking for a massive headache. Instead I would create a unique filename for each upload. So the user's profile pic the first time they upload is "profile-uniqueIdHere.jpg" and when they change their profile pic you just create a new file "profile-anotherUniqueIdHere.jpg" and update their user data to reflect the new file location. For help with creating unique Ids look at react-native-uuid.
I've posted about this before but have been struggling to come up with a solution.
Basically I have a HTML5/jQuery app within my iPad app. Every time I load an image into the UIWebView (HTML App) the overall allocations in the profiler increases by about 2MB each time. This sounds about right because the image is approx 2MB's. I am using the data notation in the tag to load a Base64 image.
i.e.
When I load a certain number of images (page turns) the app will crash.
The app is an ebook viewer, so when I turn to a new (not previously loaded in current session) the allocations increase. But, if I turn back to a previiously loaded page the allocations don't increase and the page loads quicker than a new one. Every page turn sends a request to the database so i'm beginning to think the leak isn't in the iOS and that it could be in the HTML5 app.
Any ideas on this? I guess there could just as easily be a leak in the HTML app as there could be in iOS. How do I go about debugging this?
Any ideas greatly appreciated.
Thanks
HTTP and WebKit likes to keep a local copy of resources, just in case you will need it again. This may be what you encounter.
Check the answers to this question: Is it possible to prevent an NSURLRequest from caching data or remove cached data following a request?
This was die an unfixable issue with iOS 4.
Issue resolved itself after upgrading to iOS5.