react-native: Image component does not load image from specific URI on iOS

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)

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

@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

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

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

All images not loading for me on iOS 14 beta

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.

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

#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

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!

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

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.

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

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

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

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.

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