CODEWITHSUNDEEP
androidreact-nativereact-native-image-picker
Reza Shoja
Reza Shoja

Reputation: 927

react-native-image-picker uri doesn't persist for android

according to the documentation:

On iOS, don't assume that the absolute uri returned will persist. See #107

I'm testing it on my android(Xiaomi) device and it works fine when I choose an image, but after closing the app and opening it again or re-running it using react-native run-android, the uri doesn't work anymore and instead of the image, I get a blueish color. this is my code:

ImagePicker.showImagePicker({
   storageOptions: {
      skipBackup: true
   }
}, res => {
   // handling error, etc.
   this.setState({image: res.uri});
   // persisting with AsyncStorage
   }
);

//then showing it
<Image style={{height: 100, width: 100}} source={{ uri: this.state.image }}/>

after re-opening the app this is my uri after restarting the app: content://com.miui.gallery.open/raw/%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20190310_123752.jpg

It's strange because when I get the bluish color and again choose the same picture from my gallery I get the same uri as above and it works!!!although it's the same as before restarting. what can I do? thanks

Upvotes: 2

Views: 4262

Answers (3)

sathira lamal
sathira lamal

Reputation: 87

When we taking an image using launchCamera() method, the image is saved in a temporary location so the Image can be deleted at any time, You need to move or copy that Image into Storage. You can use react-native-fs package to copy or move that image from a temporary location to Storage. launchCamera() return temporary location uri, you can use that uri to perform a move or copy function.

This method allows you to take multiple images and upload them after taking images.

Upvotes: 0

Michael SALIHI
Michael SALIHI

Reputation: 126

For Android, you can use response.path instead response.uri to get the real file path on the device. https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md

Don't forget to prepend file:/// to response.path so if I take your code:

...
this.setState({image: "file:///" + res.path});
...

response.uri seems to be temporary path which it's kill at the same time app is close.

Upvotes: 1

Ali Bakhtiar
Ali Bakhtiar

Reputation: 178

The standard way of resolving this issue is to disable the cache for your images, however I always overcome this by adding an extra parameter at the end of url to make it different than before, so with this way you'll trick the os(android in your case). The code is changed to something like this:

<Image style={{height: 100, width: 100}} source={{uri:'your_image_link.com/image.jpg?ts=Math.random()' }}/>

this will add a unique tail to your uri that prevents caching. Don't forget that you need to put 'your_image_link.com/image.jpg?ts=Math.random()' in your setState(). Good luck!

Upvotes: 0

Related Questions