2

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

Reza Shoja
  • 887
  • 2
  • 11
  • 24
  • I don't have the same issue, but I heard developers usually use redux-persist for android. – Ziyo Mar 25 '19 at 17:27
  • @Ziyo yes, this is exactly what I did, but I don't know why this happens?! is anything wrong with my code? on the other hand, the picture that I choose or take with the camera doesn't appear in the `pictures` directory! is that ok? – Reza Shoja Mar 25 '19 at 17:39

3 Answers3

1

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.

Michael SALIHI
  • 126
  • 2
  • 7
0

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!

Ali Bakhtiar
  • 178
  • 11
0

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.

sathira lamal
  • 47
  • 6