i have a one project. in that their is a list which i get from api and the api's response contains a one image url which frequently changes ,but in that one one part of image name is common and the image also a same. but the later half signature is changes whenever is called it.So how can i cache
this image in react native using any if the caching library or should i need to cache it manually ?
ex:- https://abcImage.png/..../.... (where .... contains any unique signature text)
Thanks in advance
Related
I am trying to figure out a way to update one of the static files in my react native project.
The requirement being after client downloads the app, we can either update the app using code-push (I just want to update some static files).
Or maybe create some resource pack kind of thing, so that when user clicks on download/update resource, the file gets downloaded or updated.
So, how do I create this resource pack thing, whose content are being used in the app, consider I want to update an logo. So, downloading it, and then using that image instead of the old one.
Or any other alternatives are welcome.
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 want to implement a post editing interface works as follow:
user can input text, and when he/she presses the image upload button, after the image is uploaded to the server, the uploaded image need to be inserted after the current cursor, and user can continue to input the text.
How can I achieve this in React Native?
What have you tried so far? It's always better to try and post your current code so that we can help you.
I see two parts to your question
1) Image uploading - You can use a library for picking the image (e.g - https://github.com/react-community/react-native-image-picker). Then when you get the asset url from the image picker library you can use a file upload library (e.g - https://github.com/aroth/react-native-uploader) to upload this to your server and get the stored url back from the server as the response.
2) Image Displaying - For this you can use a native and set its source using the url returned by your server.
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 need to set a caption when I share a picture (QR code) from my app integrated with Facebook Messenger.
There is metadata NSString field but I don't see a way how to use it. Did anyone solve that problem?
metadata field You can see that we're passing options to the share
method. This contains two fields we want to send back to Messenger:
metadata and contextOverride.
The metadata field takes a NSString and is optional. It can be used to
give information about the content being shared. For example, you can
store a serialized JSON string. This is useful during replies as this
data is passed back to your app.
https://developers.facebook.com/docs/messenger/ios#bp_using_metadata
The metadata is meant for you, as a developer, to use. For example, when a user creates an image from your app you can attach metadata to it, at that point. This metadata is sent, in the background, together with the image to the recipient. When they decide to reply, using your app, you will receive the metadata there.
You can use this, for example, if in your app somebody selected a category to get the image. When you pass in this category in the metadata (which is up to you to format, but JSON is convenient), you get this metadata/JOSN in your app when the recipient replies. You can read the category and load the images on that category already.
The metadata does not set a caption to your image. Actually, there is no integrated way to add a caption to your images.
I would advise to generate the QR-code part of the image and the caption in your app. The image that you post to the Messenger API is thus a combination of the QR-code and a textual caption above or below it. Does that make sense?
ps: about the credible source; I'm a developer support engineer at Facebook :)