React-Native 0.63 not able to access Device Storage images in Android 10

user_14490277 0
Viewed 1656

I am using React Native 0.63. I wanted to display images in a FlatList from my phone's device storage and was using <Image/> for the renderItem prop of FlatList. Using the source prop, I added a uri key but I am still not able to see the images. The image tiles are being generated in the FlatList and I am able to see the thin scrollbar on the right when I try to scroll over the list.

This is what I am doing to display the image. (The uri used here is of an image which I got from the CameraRoll.getPhotos() API)

<Image
 source={{ uri: 'file:///storage/emulated/0/Pictures/Twitter/20201019_160855.jpg'}}
 style={{ height: 100, width: 100 }}
/>

I have made sure about the following:

  1. Allowed READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permissions for the application.
  2. Added file:// prefix to the file.
  3. Made sure source={{ uri: ... }} in <Image/> works for external links, tried using Google logo, random jpegs from the internet.

Another thing which I noticed is, I am using Samsung phone with Android 10 on my device where I am facing this issue. I tried running this on the Google Nexus 5 Android Emulator which also runs on Android 10 and works perfectly fine (By this, I mean I am able to access the emulator's device storage and not using the exact same uri specified above).

UPDATE: Tried compiling the application on Android 7, the above thing is working fine. Any issue with the the SDK Versions?

react-native android-emulator android image
3 Answers

Are you getting a permission denied error?

This might be helpful: https://github.com/react-native-image-picker/react-native-image-picker/issues/1259

Something to try adding:

android:requestLegacyExternalStorage="true"

... to the tag in your AndroidManifest.xml.

Warning:

From May 5 2021 onwards: Play Store will not accept this implementation and remove all apps using it except if the app functionally really requires it and it needs to be requested.

The implementation will need to use Scoped Storage.

user_1975360

Are the images appearing on the emulator correctly?

If the issue is only on your device, you will want to check you've added android.permission.READ_EXTERNAL_STORAGE to your AndroidManifest.xml and requested perission to use file storage

See: Usage - react-native CameraRoll

user_36870170 
This can be helpful: https://github.com/react-native-image-picker/react-native-image-picker/issues/1259

In manifest
 android:requestLegacyExternalStorage="true"
  
 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:theme="@style/AppTheme"
      android:requestLegacyExternalStorage="true"
        android:usesCleartextTraffic="true"> 


  build.gradle

 // camera    
    compileSdkVersion = 29
user_53168720
Related