Image component does not load image from specific URI on iOS

[rmacqueen]

Description

The Image component does not render an image on iOS when loaded from a specific URI

React Native version:

System:
OS: macOS 10.15.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 234.47 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.20.0 - ~/.nvm/versions/node/v10.20.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v10.20.0/bin/npm
Watchman: Not Found
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 14.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.9.0 => 16.9.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

See code snippet below

Expected Results

I would expect the code below to render an image on screen. It does do that on Android, but not on iOS. If i go to that link in a browser or curl it from the terminal it renders or downloads as expected. But React Native on iOS does not render it.

Snack, code example, screenshot, or link to a repository:

<Image style={{height: 100, width: 100}} source={{ uri: 'https://api.openpay.mx/barcode/185017437691737?width=1&height=100' }} />

See example here: https://snack.expo.io/QH4nUBfc6

[ryanpag3]

I'm seeing this issue too. Are you running IOS 14 beta?

[rmacqueen]

@ryanpag3 No, I'm running iOS 13.5

[DennisdeWitNL]

Can confirm. I have the same problem on iOS 13.5 and iOS 14.

[LewisYearsley]

All images not loading for me on iOS 14 beta

[torgeadelin]

Same, uri or local images not working. I have Xcode 12, iOS 14.

[rdperottoni]

iOS 13.5.1 + XCode 11.5 works fine here, both dev and production builds of our apps.

[SConaway]

Yep, same here. It only started occurring recently, so I think it must be from some dependency RN pulls in.

[rdperottoni]

This is most likely coming from iOS SDK 14, which comes with XCode 12. Should probably stay away from XCode 12 for a few months for production builds.

[SConaway]

I disagree. Even using the release SDK and toolchain still causes this on my end.

[rdperottoni]

I disagree. Even using the release SDK and toolchain still causes this on my end.

Hey @SConaway, could you post the output you're getting from executing xcodebuild -showsdks in the terminal?

[ryanpag3]

@rdperottoni The issue is reproducible on the snack emulator linked in the original post. I highly doubt that is using pre-release SDKs.

[SConaway]

Sure thing.

With the production XCode selected (images don't work):

$ xcodebuild -showsdks
iOS SDKs:
	iOS 13.5                      	-sdk iphoneos13.5

iOS Simulator SDKs:
	Simulator - iOS 13.5          	-sdk iphonesimulator13.5

macOS SDKs:
	DriverKit 19.0                	-sdk driverkit.macosx19.0
	macOS 10.15                   	-sdk macosx10.15

tvOS SDKs:
	tvOS 13.4                     	-sdk appletvos13.4

tvOS Simulator SDKs:
	Simulator - tvOS 13.4         	-sdk appletvsimulator13.4

watchOS SDKs:
	watchOS 6.2                   	-sdk watchos6.2

watchOS Simulator SDKs:
	Simulator - watchOS 6.2       	-sdk watchsimulator6.2

With the beta XCode (images don't work):

$ xcodebuild -showsdks
iOS SDKs:
	iOS 14.0                      	-sdk iphoneos14.0

iOS Simulator SDKs:
	Simulator - iOS 14.0          	-sdk iphonesimulator14.0

macOS SDKs:
	DriverKit 20.0                	-sdk driverkit.macosx20.0
	macOS 10.16                   	-sdk macosx10.16

tvOS SDKs:
	tvOS 14.0                     	-sdk appletvos14.0

tvOS Simulator SDKs:
	Simulator - tvOS 14.0         	-sdk appletvsimulator14.0

watchOS SDKs:
	watchOS 7.0                   	-sdk watchos7.0

watchOS Simulator SDKs:
	Simulator - watchOS 7.0       	-sdk watchsimulator7.0

Again, as @rmacqueen, @ryanpag3 and @DennisdeWitNL said, it occurs with the production XCode and iOS 13.x.

In the example snack, however, my phone successfully loads the local and base64 images, but not the remote one. I'm able to access it in Chrome on my computer and iPhone Safari, so there's an issue there as well.

Clearing my DerivedData seems to have resolved this issue on both SDK versions. Give that a shot. Sorry for the slow response time @rdperottoni, I am a dual-core i5 MBP that builds slowly.

[ryanpag3]

@SConaway What was your technique for clearing your DerivedData? I deleted my project folder @ ~/Library/Developer/Xcode/DerivedData/ and it did not fix the issue for me.

[legion-zver]

All images not loading for me on iOS 14 beta

See SDWebImage/SDWebImage@bb7b191

[DennisdeWitNL]

All images not loading for me on iOS 14 beta

See SDWebImage/SDWebImage@bb7b191

How do we integrate this fix with React Native? Where does React Native keep the SDWebImage library?

[QuintonC]

I'm also experiencing this issue, but only on iOS 14.

Images are working/loading just fine on iOS 13.x, but as soon as the same app is put on iOS 14 images are not displaying (neither local or remote).

[SConaway]

That's odd. Building with the 13.5 SDK results in working images. Can anyone test building with the 14 SDK and using an iOS 13 (or before) iPhone?

[QuintonC]

That's odd. Building with the 13.5 SDK results in working images. Can anyone test building with the 14 SDK and using an iOS 13 (or before) iPhone?

@SConaway I just switched over to iOS 14 SDK and am running on a 13.5 iPhone 11 Simulator:

➜  ~ xcodebuild -showsdks
iOS SDKs:
	iOS 14.0                      	-sdk iphoneos14.0

iOS Simulator SDKs:
	Simulator - iOS 14.0          	-sdk iphonesimulator14.0

macOS SDKs:
	DriverKit 20.0                	-sdk driverkit.macosx20.0
	macOS 10.16                   	-sdk macosx10.16

tvOS SDKs:
	tvOS 14.0                     	-sdk appletvos14.0

tvOS Simulator SDKs:
	Simulator - tvOS 14.0         	-sdk appletvsimulator14.0

watchOS SDKs:
	watchOS 7.0                   	-sdk watchos7.0

watchOS Simulator SDKs:
	Simulator - watchOS 7.0       	-sdk watchsimulator7.0

When running in 13.5 simulator all images show as intended. You can see a video of it running in iOS 13.5 here.

when running in 14.0 simulator with iOS 14.0 SDK none of the images display. You can see a video of that here.

[QuintonC]

So, interesting discovery --

I rebuilt the application on another Mac that was using Catalina. Rebuilt with the most recent prod-ready Xcode version and the application built successfully and images are displaying (even in iOS 14.0).

So it looks like iOS 14 itself isn't the issue.

[DennisdeWitNL]

So, interesting discovery --

I rebuilt the application on another Mac that was using Catalina. Rebuilt with the most recent prod-ready Xcode version and the application built successfully and images are displaying (even in iOS 14.0).

So it looks like iOS 14 itself isn't the issue.

I built the app with iOS 13 SDK and even on iOS 14 the images show perfectly fine. I built the app on Big Sur. The problem either is Xcode 12 or iOS 14 SDK.

[QuintonC]

So, interesting discovery --
I rebuilt the application on another Mac that was using Catalina. Rebuilt with the most recent prod-ready Xcode version and the application built successfully and images are displaying (even in iOS 14.0).
So it looks like iOS 14 itself isn't the issue.

I built the app with iOS 13 SDK and even on iOS 14 the images show perfectly fine. I built the app on Big Sur. The problem either is Xcode 12 or iOS 14 SDK.

That's what I'm thinking as well. Initially, I thought it was an iOS 14 issue, but that wouldn't have made sense anyway since other apps were loading images just fine.

[ayberkanilatsiz]

if I build an application Xcode 12 beta, images are NOT loading. I downloaded the application from the app store, images render as expected.

[rmacqueen]

The snack linked in original post does not work on iOS device running iOS 13.4.1

[lucasriondel]

RN 0.62.2, iOS 13.5.1 and xcode 11.5 here, working perfectly. But I'm facing issues on local images, only on Android.

[legion-zver]

@DennisdeWitNL use patch-package and my patch file (work with rn 0.63)

react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 
 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

[bpred754]

For those running older versions of React Native (e.g., 0.60.6) the patch is not possible since the RCTUIImageViewAnimated.m file doesn't exist. I solved this problem by using React Native Fast Image v8.1.5 and upgrading SDWebImage pod with pod update SDWebImage. More specifically, I upgraded SDWebImage from v5.8.1 to v5.9.2.

Source: DylanVann/react-native-fast-image#702 (comment)

[VisheshNucleusTeq]

If any one is still facing the problem here are stepwise solution which worked for me :-

1. Navigate to node_modules>>react-native>>Libraries>>image
2. Open RCTUIImageViewAnimated.m in your fav. editor
3. Replace the following code
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }
   with
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }else { [super displayLayer:layer]; }
4. Save the file
5. Close the packager if already running
6. ReLaunch the application (npx/ yarn ios)

[Dror-Bar]

@VisheshNucleusTeq the issue with editing a node_modules library directly is that after reinstalling with npm install for example, all of those edits are lost. This is a sure way to get very hard to find bugs later on.

[VisheshNucleusTeq]

@Dror-Bar
this is a temp solution this won't be need with the upcoming update
creating the post install script must be kept as first way but if that doesn't work then this is sure shot solution

[mavrickdeveloper]

If any one is still facing the problem here are stepwise solution which worked for me :-

1. Navigate to node_modules>>react-native>>Libraries>>image
2. Open RCTUIImageViewAnimated.m in your fav. editor
3. Replace the following code
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }
   with
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }else { [super displayLayer:layer]; }
4. Save the file
5. Close the packager if already running
6. ReLaunch the application (npx/ yarn ios)

this worked like butter

[oporter1]

I am still not able to see any images with the iOs 14.2 update. I have implemented:

1. npm install --save react-native-fix-image
2. react-native+0.63.0.patch
3. manually within node_modules

Is anyone else seeing these solutions not working for them?

I am on:
react-native-cli: 2.0.1
react-native: 0.61.4
Managed Expo:
Expo CLI 3.28.2 environment info:
System:
OS: macOS 10.15.4
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 15.0.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.0.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
IDEs:
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
expo: ^37.0.12 => 37.0.12
react: 16.9.0 => 16.9.0
react-dom: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
react-native-web: ^0.11.7 => 0.11.7
react-navigation: ^3.13.0 => 3.13.0
npmGlobalPackages:
expo-cli: 3.28.2
Expo Workflow: managed

[paulbreslin]

Finally fixed this by downgrading react-native from 0.63.3 to 0.63.0. Then applied the patch using the postinstall npm script.

Also, remember to set a width and height on the image style as it could be loading but just not displaying properly - this threw me off for a bit during testing.

[nHiRanZ]

If any one is still facing the problem here are stepwise solution which worked for me :-

1. Navigate to node_modules>>react-native>>Libraries>>image
2. Open RCTUIImageViewAnimated.m in your fav. editor
3. Replace the following code
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }
   with
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }else { [super displayLayer:layer]; }
4. Save the file
5. Close the packager if already running
6. ReLaunch the application (npx/ yarn ios)

Worked like a charm!

[Bullden]

@VisheshNucleusTeq thank you. It is really help me

[gnprice]

As mentioned above, this issue appears to be a duplicate of #29279. The issue is fixed in v0.63.2 (with b6ded72) and the upcoming v0.64 (with 123423c).

It'd be good for someone who's able to do so to mark this issue as closed.

[erdugen]

I using 0.63.4 and cli 2.0.1.
It's still continue this issue.
I'm using this link http://placehold.it/32x32
simulator 14.3

[Andrea-Arguello]

I am using RN 0.61.5 and Xcode 11.1, I am still getting this issue, but only when I try to make a Release build. Adding the else to node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m only worked for Debug buids.
Could this also be an issue with a Pods library? I am getting [framework] CUICatalog: Invalid asset name supplied: '(null)' on Xcode's logs

[anback]

I solved this by using react-native-fast-image

[infinitbility]

Any dev want to patch-package step by step doc to solve image issue checkout below link

https://infinitbility.com/image-not-showing-in-ios-14-react-native

[UsmanJ]

Any dev want to patch-package step by step doc to solve image issue checkout below link

https://infinitbility.com/image-not-showing-in-ios-14-react-native

I'm having this issue with my app on an actual device with the release build (images from URI only). However, on the simulator it works perfectly fine. Would this fix also work for this scenario?

Thanks

[MerryCello]

URI (from cache or web) image won't load either on physical device ios 14.4

using:

• react-native: 4.14.0
• expo: 4.1.6
• node: 14.15.4

[WashingtonLuiz99]

Se alguém ainda está enfrentando o problema, aqui estão uma solução passo a passo que funcionou para mim: -

1. Navegue até node_modules >> react-native >> Libraries >> image
2. Abra RCTUIImageViewAnimated.m em seus favoritos. editor
3. Substitua o seguinte código
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }
   por
   if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }else { [super displayLayer:layer]; }
4. Salve o arquivo
5. Feche o empacotador se já estiver em execução
6. Reinicie o aplicativo (npx / yarn ios)

That solved for me thank you

[perdona]

Any dev want to patch-package step by step doc to solve image issue checkout below link
https://infinitbility.com/image-not-showing-in-ios-14-react-native

I'm having this issue with my app on an actual device with the release build (images from URI only). However, on the simulator it works perfectly fine. Would this fix also work for this scenario?

Thanks

I'm having the same issue. Works fine on simulator. When I release it to TestFlight, it does not show remote images.

[AlphaJuliettOmega]

Very strange issue.
Not sure about Release / on Device yet but in the Simulator, this works on iOs, but not on Android (Inspector shows no network request for image even)

props.ytThumbnailId='dQw4w9WgXcQ',
...
<Image
              source={{
                height: 120,
                width: 120,
                uri:
                  'img.youtube.com/vi/' + props.ytThumbnailId + '/hqdefault.jpg'
              }}
              resizeMode={'cover'}
              height={120}
              width={120}
            />
            ```

[scarlac]

@AlphaJuliettOmega There needs to be a protocol prefixed to the URI. Try https://

Otherwise it looks like a file path.

[BenHurMartins]

Hi everyone, face this issue today, Xcode 12, and iOS 14.3, tried the patch. without success,

So in the end of the url, that was using 'http', I replaced for 'https' and it worked:

.replace('http','https')

In my case my urls are http.

[curchadw]

I might be in the wrong place, but I am using my android device and when I try to view the screen in my browser I can see the login screen with image file fine, but when I scan the qr code to my phone, the console is telling me that the image file does not exist. I am wondering if this is similar to this issues.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.