Display an image stored on phone

Question

I have succesfully been able to take a photo inside my app and store it on the phone, but how do I display it?

I tried this static approach but it does not work (Yes the image is there :) )

 <Image width={40} height={40} source={{uri: '/storage/emulated/0/DCIM/IMG_20161201_125218.jpg'}} />

Are you using a library to take the picture? you should be able to get the data returned from that. Otherwise, what about the Camera Roll API? — BradByte
– BradByte, Commented Dec 1, 2016 at 13:35
what captureTarget are you using? it might help to post your configuration. github.com/lwansbrough/react-native-camera#capturetarget — BradByte
– BradByte, Commented Dec 2, 2016 at 20:13

gprathour · Accepted Answer · 2019-12-17 08:32:56Z

32

Even I faced this issues and got it resolved. You have to prepend the the file path with file:// (mind the double /).

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

Here's a reference!

I hope this helps :)

edited Dec 17, 2019 at 8:32

gprathour

15.4k5 gold badges72 silver badges92 bronze badges

answered Feb 28, 2017 at 7:04

DesignThought

4365 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tuan Nguyen Over a year ago

It doesn't work for me file:///storage/emulated/0/appiwell/image/qkpOyUaRla.jpg

David Over a year ago

It does not help me

David Over a year ago

@TuanNguyen could you find a solution? adding file:// works only on simulator, on real device it does not work

Tuan Nguyen Over a year ago

@Which device for you? Simply, pick uri of file and add file:// if OS is android. Dont add for ios.

Tuan Nguyen · Accepted Answer · 2018-01-11 03:24:57Z

 <Image source = {{uri: "file:///storage/emulated/0/appiwell/image/qkpOyUaRla.jpg", width: responsiveWidth(100), height: responsiveHeight(100)}}/>

Notice, should set width, height inside {uri, width, height}. Width, height in style maybe didn't work.

responsiveWidth, responsiveHeight here https://www.npmjs.com/package/react-native-responsive-dimensions

Sachinthra · Accepted Answer · 2020-12-12 13:11:50Z

We should get 'READ_EXTERNAL_STORAGE' Permission

Import

// import import { PermissionsAndroid } from "react-native";

Function to request permission

// function to request permission requestStoragePermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, { title: "Permission title", message: "Permission message", buttonNeutral: "Ask Me Later", buttonNegative: "Cancel", buttonPositive: "OK", } ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log("You can use the EXTERNAL_STORAGE"); } else { console.log("EXTERNAL_STORAGE permission denied"); } } catch (err) { console.warn(err); } };

Call the above Function

<Button title="request permissions" onPress={this.requestStoragePermission} />

Collectives™ on Stack Overflow

Display an image stored on phone

3 Answers 3

4 Comments

Comments

We should get 'READ_EXTERNAL_STORAGE' Permission

Import

Function to request permission

Call the above Function

Click this for reactnative android permissions docs

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

We should get 'READ_EXTERNAL_STORAGE' Permission

Import

Function to request permission

Call the above Function

Click this for reactnative android permissions docs

Comments

Linked

Related