React Native not loading image from sdcard in android

Question

I am trying to load image from external sdcard after I take photo from camera in React native image component as following, but it is not rendering in android. I even check

Answer 1

We should get 'READ_EXTERNAL_STORAGE' Permission

refer this

Answer 2

Just had this issue, solved it by prepending the filepaths with file://

So, instead of:

 <Image source={{uri:'/storage/emulated/0/Pictures/myImage.jpg'}} style={myImageStyle} />

Use:

 <Image source={{uri:'file:///storage/emulated/0/Pictures/myImage.jpg'}} style={myImageStyle} />

Note the 3 consecutive slashes as opposed to just two as suggested by @Cherniv.

Answer 3

DSquare is right, unless you're running IOS. In that case 'file://' doesn't work.

<Image source={{uri:`${Platform.OS === "android" ? 'file://' : ''}/storage/emulated/0/Pictures/myImage.jpg`}} style={myImageStyle} />

The second problem is that this the path /storage/emulated/0 does not exist on IOS either.

You can make your life easier by using react-native-fs

import RNFS from "react-native-fs";
...
renderPhoto() {
    return <Image source={{uri:`${Platform.OS === "android" ? 'file://' : ''}/${RNFS.PicturesDirectoryPath}/myImage.jpg`}} style={myImageStyle} />
}

RNFS.PicturesDirectoryPath translates to /storage/emulated/0/Pictures on Android.

No more headaches, no more wondering what path is which on which device/platform.