Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
divyanshunegi opened this issue Aug 10, 2020 · 5 comments

Comments

@divyanshunegi
Copy link

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
Copy link

dymank commented Aug 10, 2020

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
Copy link
Author

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
Copy link

grbruno commented Nov 17, 2020

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants