[Android] Images from device local storage are not rendering.(In some devices)

[divyanshunegi]

Description

When I try to show a image from local storage using
<Image source={{ uri: 'file:///path' }} style={{width:100, height:100}} resizeMethod='resize' />
it is working fine in IOS but in case of android, in some devices the images are not showing at all, the view is taking the space in the view but no image is visible. devices In which it did not work OnePlus 5T and Google Pixel.

React Native version:

{
"name": "NodeStoryRN63",
"version": "0.0.1",
"private": true,
"scripts": {
"bundle_android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/art": "^1.2.0",
"@react-native-community/async-storage": "^1.11.0",
"@react-native-community/blur": "^3.6.0",
"@react-native-community/cameraroll": "^4.0.0",
"@react-native-community/google-signin": "^4.0.3",
"@react-native-community/push-notification-ios": "^1.3.0",
"@thehanimo/react-native-audiokit": "1",
"axios": "^0.19.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"normalizr": "^3.6.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-content-loader": "^5.1.0",
"react-native": "0.63.1",
"react-native-animatable": "^1.3.3",
"react-native-app-intro-slider": "^4.0.4",
"react-native-audio": "^4.3.0",
"react-native-audiowaveform": "^2.0.5",
"react-native-autogrow-textinput": "^5.4.0",
"react-native-aws3": "^0.0.9",
"react-native-camera": "^3.32.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-device-info": "^5.6.3",
"react-native-document-picker": "^3.5.4",
"react-native-draggable-flatlist": "^2.3.6",
"react-native-easy-toast": "^1.2.0",
"react-native-fast-image": "^8.3.2",
"react-native-fbsdk": "^2.0.0",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-haptic-feedback": "^1.10.0",
"react-native-hyperlink": "^0.0.19",
"react-native-iap": "^4.5.0",
"react-native-image-crop-picker": "^0.32.2",
"react-native-image-picker": "^2.3.3",
"react-native-image-resizer": "^1.2.3",
"react-native-interactable": "^2.0.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.5.6",
"react-native-modalbox": "^2.0.0",
"react-native-pixel-color": "^0.0.2",
"react-native-progress": "^4.1.2",
"react-native-push-notification": "^4.0.0",
"react-native-reanimated": "^1.9.0",
"react-native-responsive-screen": "^1.4.1",
"react-native-root-toast": "^3.2.1",
"react-native-screens": "^2.9.0",
"react-native-share": "^3.7.0",
"react-native-slider": "^0.11.0",
"react-native-svg": "^12.1.0",
"react-native-thumbnail": "^1.1.3",
"react-native-vector-icons": "^7.0.0",
"react-native-version-number": "^0.3.6",
"react-native-video": "^4.4.5",
"react-native-video-cache": "^1.0.0",
"react-native-video-processing": "^1.20.0",
"react-native-view-shot": "^3.1.2",
"react-navigation": "^3.11.0",
"react-navigation-fluid-transitions": "^0.3.2",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.3.0",
"styled-components": "^4.3.2",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^25.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}

Steps To Reproduce

1. from React-native-community/cameraroll extract data CameraRoll.getPhotos({ first: 10, assetType: 'Photos', groupTypes: 'All'}) it returns an array of objects which contain file uri.
   2.use that URI in Image component.

Expected Results

To show the Image.

[dymank]

I have the same problem. For me it works on OnePlus 3T, but doesn't on Xiaomi Mi Note 10 Lite. My best guess for now is it's related to Android version. My OnePlus runs Android 9, while Xiaomi Android 10.

[divyanshunegi]

I have the same problem. For me it works on OnePlus 3T, but doesn't on Xiaomi Mi Note 10 Lite. My best guess for now is it's related to Android version. My OnePlus runs Android 9, while Xiaomi Android 10.

I fixed this issue by adding this """"android:requestLegacyExternalStorage="true""""" in AndroidManifest.xml. The issue is related to android SDK version not sure which one.

<application
android:largeHeap="true"
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:requestLegacyExternalStorage="true" // add this in your androidManifest file
android:theme="@style/AppTheme">

[grbruno]

I have the same problem. For me it works on OnePlus 3T, but doesn't on Xiaomi Mi Note 10 Lite. My best guess for now is it's related to Android version. My OnePlus runs Android 9, while Xiaomi Android 10.

I fixed this issue by adding this """"android:requestLegacyExternalStorage="true""""" in AndroidManifest.xml. The issue is related to android SDK version not sure which one.

<application
android:largeHeap="true"
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:requestLegacyExternalStorage="true" // add this in your androidManifest file
android:theme="@style/AppTheme">

This works for me, I'm using API 29. Thanks.

[schrulnz]

I have the same problem but have been using build target API 28. Can the missing 'requestLegacyExternalStorage' even be the reason, then? So do I need to change my target to 29 and use 'requestLegacyExternalStorage', or should it work anyway and I need to search for another reason for my problem?

So, I guess my question is: Can this problem even occur on target API 28?

Unfortunately, I can't test this, because my Android 10 devices work fine, but I know of users that have these problems.

[thinhtran3588]

@schrulnz the problem is only on devices with android version >=29. You do not need to change target version but only add android:requestLegacyExternalStorage fix. I have the same issue on Xiaomi Mimix 3 android ver 10. The fix works for me.