react-native: Images with Headers Authentication are not showing.
Description
I am showing headers Auth Images via 'GET method but some images are showing fine and some are not. in IOS & Android not showing. The onLoadEnd method also calling fine but still image not showing. I am Stuck in the last 5 Days. I think some images are late coming from the URL so maybe the Image tag doing timeOut.
React Native version:
"react": "16.13.1",
"react-native": "0.63.2",
System: OS: macOS 10.15.6 CPU: (4) x64 Intel® Core™ i5-4278U CPU @ 2.60GHz Memory: 87.70 MB / 8.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.18.3 - /usr/local/bin/node Yarn: 1.22.4 - ~/.yarn/bin/yarn npm: 6.14.6 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.0. - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 Android SDK: API Levels: 28, 29 Build Tools: 28.0.3, 29.0.2, 29.0.3 System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-Q | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 12.0/12A7209 - /usr/bin/xcodebuild Languages: Java: 1.8.0_221 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 react-native-macos: Not Found
Steps To Reproduce
- Added Image tag
- Passed URL Link and Authentication too but in 100 images some of the images are showing and some of the images are not showing.
Expected Results
All Images Need to show fine.
Snack, code example, screenshot, or link to a repository:
<Image style={{width: 200, height: 200}} source={{uri: ImgURL, headers: {Authorization : 'OAuth 0000000000', },}} onLoadEnd={()=>{console.log("Loaded")}} />
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 1
- Comments: 16 (2 by maintainers)
any news ? same here
I’ve also been running into this issue. It seems like https://github.com/facebook/react-native/issues/25945 might be an older issue for this same thing that was closed, but never actually resolved. It seems like on android only, that image headers either don’t send, or don’t send in all conditions resulting in the image not being able to render.
Hello,
I’m currently looking into this issue. It seems to be located in
com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult, as I can only reproduce it when passing multiple sources. When I temporarily cut down the list to a length of 1, the image will be loaded (and thereby the cache populated). After that it will show at least the cached image, even when switching back to multiple sources, as this is loaded here https://github.com/facebook/react-native/blob/6be46b0bb59f2d88bc78e9a72db672bd55914fa7/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java#L662-L666The temporary fix is to only pass lists of length 1 on Android.
I will update this as soon as I have fixed the issue or at least found the root cause in case I can’t go ahead and fix it.
Edit: I just now realised this issue was about single pictures, I guess I should open a new issue for this.
sames here, i trying get image from remote url with auth headers and sometimes is just not working. In onError props i have nativeEvent.error with status code 401, but when i was debugging it turns out that image server do not have any request from mobile app. When i change the url to without auth, the image was downoload.