As the title said I really don't know how to stop react-native Image component to cache the images from the same URI. I'm always using the same URL to get the user profile image because the generated URI has a static part and a variable part based on the user id, if the user change profile image, this image is never updated (on device). I've already tried to add a uuid to the end of the URL as query param but nothing has changed:
<Image
source={{
uri: `${Config.profileImageBaseUrl}/${user.id}.jpg?id=${imageUuid}`,
}}
</Image>
Do you have some other suggestions or some workaroud to this problem?
If you need some other information feel free to ask!
Related
The display for image from local file system stops work with Image in React Native 0.66. Here is the code:
<Image
source={{uri: img_source}}
.../>
Here img_source is a string returned by image picker (not from react-native-cameraroll). here is an example of imp_source in iOS emulator:
/Users/macair/Library/Developer/CoreSimulator/Devices/107E832C-4828-47D9-83D1-DABE20BA32F3/data/Containers/Data/Application/5C0BB55D-4834-47A9-B7CF-22CE9355C3FD/tmp/react-native-image-crop-picker/A52D733E-DB54-4C72-90DE-2444C3C45FD4.jpg
The app has the permission to pick up image from local gallery. Tried 'file://' + imp_source with no avail. How to make the code above working with Image?
Use the uri value from image picker. It looks like you're attaching a bunch of things prior to the root of the application in your URL. Without seeing the code, I'm assuming the URI should be file:///tmp/react-native-image-crop-picker/A52D733E-DB54-4C72-90DE-2444C3C45FD4.jpg, not the full system path.
I'm using a cloud based storage for avatar images. If an image for a user doesn't exist I want to fallback to the user title.The code below works for android, but on IOS the image is just blank and no title.
<Avatar rounded source={{ uri: avatarUrl }} title={userName.slice(0, 2)} />
On a regular Image you can use onError to handle this, but I don't see how I can use this on the Avatar.
Anyone have any suggestions how to fix this? or another package that handles it better?
Thanks!
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.
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.