Search code examples
androidimagereact-nativeandroid-emulator

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

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?

Solution

  • 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.