Display an image stored on phone

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} />

Click this for reactnative android permissions docs


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 :)


    <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

Tags:

React Native

Recent Posts