React-native: 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 https://github.com/SDWebImage/SDWebImage/pull/3043/commits/bb7b1914e6091a04feae858ad2fb85aa37ecd87d

[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

[DennisdeWitNL]

@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

I can confirm this worked! Thank you!

For those who don't know how this works:

npm i -g patch-package
Make a new folder called patches
Make a new file called react-native+0.63.0.patch
Add the source code above.
patch-package
enter

Edit: fixed a typo.

[abiespinal04]

npm i -g patch-package

where do you make the new folder?

[joewired]

I made a folder called patches at the root of the project and it worked.

However; with the patch, the images show up but they do not update (size, etc) - They are just stuck.

[DennisdeWitNL]

@abiespinal04 You make a new folder called ‘patches’ right in your React Native project folder.

@joewired This is strange. I applied the patch too, and I have multiple images with a width and height of 50 pixels, just as I programmed. And I also have a screen width filling Image Background, which is working fine too. I don’t have this problem.

[scarlac]

I can confirm that @DennisdeWitNL's fix https://github.com/facebook/react-native/issues/29215#issuecomment-657231577 also works for React Native 0.61.2, using Xcode 12 beta 3, iOS 14 simulator.

[shoopi12]

The solution fixed it for me, React Native 0.63.1.
is it a good idea to use this patch? any possible negative side effects?
How long are we expected to need this patch? do I need to manually delete it later when the issue is fixed?
Thanks.

[ryanpag3]

@DennisdeWitNL's solution worked for me, although I made a few small adjustments as I don't like global packages personally.

1. Install packages locally

yarn patch-package postinstall-postinstall

1. include new script in package.json that will run this after you invoke yarn install (or equivalent)

    "postinstall": "patch-package"

These steps were found in the patch-package README.

[maxbaldrighi]

My problem was with both local and uri images.

I was able to fix the issue by applying the suggested patch. I confirm that works well with previous RN versions:

• RN: 0.62.2
• Xcode: 12.0
• iOS simulator: 14

[dragonfire1119]

Same problem with local & remote not showing images.

The fix is the patch https://github.com/facebook/react-native/issues/29215#issuecomment-657231577

This patch does work on older RN versions.

Reach Native: 0.61.2
Xcode: 12.0
iOS Sim: 14

[andrewaarestad]

Worked for me with:

React Native: 0.61.5
Xcode: 12.0

I did the same as @ryanpag3 with one small tweak for step 1:

yarn add patch-package postinstall-postinstall

[keung7251]

Error: Patch file found for package react-native which is not present at node_modules/ react-native

[eowino]

I came across this same issue too yesterday after an OS update. Lost a few hours trying to figure out the problem. Updating to the latest version of react-native fixed it for me, it looks like it contains the fix.

[Dror-Bar]

@eowino you mean version 0.63.2?

[eowino]

@Dror-Bar Yes, 0.63.2.

[zhangyandong]

#import "RCTUIImageViewAnimated+WLAdd.h"
#import <objc/runtime.h>

@implementation RCTUIImageViewAnimated (WLAdd)

+(void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method fromMethod = class_getInstanceMethod([self class], @selector(displayLayer:));
    Method toMethod = class_getInstanceMethod([self class], @selector(wl_displayLayer:));
    method_exchangeImplementations(fromMethod, toMethod);
  });
}

- (void)wl_displayLayer:(CALayer *)layer {
  UIImage *currentFrame = [self valueForKey:@"currentFrame"];
  CGFloat animatedImageScale = [[self valueForKey:@"animatedImageScale"] floatValue];
  if (currentFrame) {
      layer.contentsScale = animatedImageScale;
      layer.contents = (__bridge id)currentFrame.CGImage;
    } else {
      [super displayLayer:layer];
    }
}

@end

[QueenTallicia69-cloud]

try and test...
🤷‍♀️🤷‍♀️🤷‍♀️

Op vr 18 sep. 2020 02:44 schreef shoopi12 [e-mail]:

is it a good idea to use this patch? any possible negative side effects?
How long are we expected to need this patch? do I need to manually delete
it later when the issue is fixed?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/29215#issuecomment-694578321,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AQE6HXBIZRK5TYDBR763ULDSGKUQVANCNFSM4OHK6ZLA
.

[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: https://github.com/DylanVann/react-native-fast-image/issues/702#issuecomment-653930858

[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

[sam-zed]

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.