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.
Related
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!
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 Image that I've downloaded and saved to the path /data/user/0/com.project/files/assets/image.png and I want to use this in my Image component in React-Native. Is there a way to use images stored in this path?
Ways to solve it that I have knowledge of but cannot use :
using require. which basically accepts literal strings that is not what I want for non-static images. names may change as per image for a single image source
using Native bundles, which is again I cannot use as the images are first being downloaded and then is being used.
using http links directly.which as again I cannot use as my feature states that the App cannot rely on network as it needs to render images in offline mode as well
If it's a file on your device, I think the way of displaying it is somewhat like this:
<Image source={{uri:'file:///data/user/0/com.project/files/assets/image.png'}} style={{width: 100, height: 100}}/>
Just make sure the file path is from the root. Hope it works for you.
I am trying to display a static image(ic_launcher) in my android app using react native. I am getting a black response. No errors. Just a blank view as though the resource doesn't exist.I am able to display images from the network.
Your ic_launcher files are probably placed in android/app/src/main/res/mipmap-xxx directories. Try to move it to android/app/src/main/res/drawable-xxx directories.
\android
|----\app
|----|---\src
|----|---|----\main
|----|---|----|---\res
|----|---|----|---|---\drawable
|----|---|----|---|---|---\ic_launcher.png
You should use require('image!img_name') as a source attribute of Image component.
See example app here https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ImageExample.js#L84 with it's resource placed under https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/android/app/src/main/res/drawable
I am working on windows phone application in which i need to change ApplicationBarButton icon dinamically, for example to show current date like in default Windows Phone Calendar app. Regarding to this article, we can use only png images previously added to solution and reference to them with relative Uri.
It is not a problem for me to generate correct png image (this way and using ToolStack C# PNG Writer Library) and save it to isolated storage, but when i'm initializing AppBarButton with absolute Uri to this image and trying to add it to ApplicationBar, my app throws ArgumentException.
Am i doing something wrong or i just have to draw 366 icons and add them to my project? :)
Thanks in advance!