Im facing the same issues

System:
    OS: macOS 10.16
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 493.38 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.4.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.5.1 => 4.5.1 
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

however im on Xcode-beta and iOS 14

i have the same issue!

same issue...

same issue...

Ok so I've found that the issue with Images only happens when the build is made with Xcode 12 Beta. When I make a build using Xcode 11.5 using iOS 14.0 Beta Device Support gotten from here, Images work fine.

This is a duplicate issue -- https://github.com/facebook/react-native/issues/29215

Use 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

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Worked great thanks.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

Think it’s the best to use a fork or apply a patch-package for now.

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

Adding a clarification (for other newbies to patch-package like me) the folder "patches" has to go at the project root level.

Using the patch library just for this seems like overkill. Would it be too hard to add it as a minor patch to 0.62.2 (perhaps make it 0.62.3?). It's really 3 lines of code.

As it is now, 0.63.x has some major bugs and looks like they won't be addressed anytime soon (0.64.x is around the corner), so we are stuck with 0.62 for the foreseeable future.

Using the patch library just for this seems like overkill.

Don't user patch package...

You don't want to use a patch package, you don't want to update your app to the latest version, but why "force" devs to ignore an entire roadmap?
Why don't you want to do something, but want to make people do what you want?

The patch worked perfectly here. 0.62.2

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

hey man, just add this to your patches folder under react-native+0.62.2.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

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

and run npx patch-package

This is the patch for 0.61.5

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..24c1075 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -267,8 +267,10 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 - (void)displayLayer:(CALayer *)layer
 {
   if (_currentFrame) {
-    layer.contentsScale = self.animatedImageScale;
-    layer.contents = (__bridge id)_currentFrame.CGImage;
+      layer.contentsScale = self.animatedImageScale;
+      layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+      [super displayLayer:layer];
   }
 }

You could always replace your Image components with FastImage. That way you don't have to patch anything. Images load better too.

To anyone who is using the patch-package fix and has CI/CD setup remember to add "postinstall": "patch-package" in your package.json

You could always replace your Image components with FastImage. That way you don't have to patch anything. Images load better too.

FastImage is not a maintained library with many bugs.

Why do you think it is better?

FastImage is working You can use it

@johnlim5847 where to add "postinstall": "patch-package" this line in package.json?

Getting this error when Run: npx patch-package
Applying patches...
Error: Patch file found for package react-native which is not present at node_modules/ react-native

@shrimallamanoj you should go to https://github.com/ds300/patch-package first

Yeah... thank you i have followed step and patch was successfully applied & not coming issue when run npx but seems like solution not working for me.. bad... any other solution?

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

Guys, this patch works on React native 0.61.5 too. I use the same workaround.

1.- run "yarn add patch-package"
2.- Make a new folder called patches on the root of the project.
3.- Make a new file called react-native+0.61.5.patch inside that folder
4.- Add the source code above.
5.- run "yarn patch-package" on the root of the project or put this on a post-install script

I follow this link to fix the problem about images in IOS14.

• clean build in Xcode (CMD + Shift + K)
• reset cache with npx react-native start --reset-cache
• Building with XCode, and everythings works fine again
  I'm using React native 0.62.2
  GL to everyone.

not a fix but an observation, if you keep inside its showing the image.

I see the same bug, but only during the development process. These happened after I updated my phone and the xcode program. (ios14, xcode12) The strange thing is that when I download my application from the market, I cannot see the static pictures. I can see the pictures when I try from a different phone. my development environment was completely ruined after the update.

Manually editing the file RCTUIImageViewAnimated.m as @tomcheung suggests above fixes the issue on version 0.61.5. Thank you!

Suggestions: Do not upgrade to 0.63just patch. I tried upgrading, build failed due to firebase, code-push.

Still experiencing this issue, can anyone advise whether the patch is currently the best solution to the problem?

Is there a patch for 0.61.2?

Is there a patch for 0.61.2?

For me. It's resolved.

0.62.2 it's resolved. but the actual device failed....
is there a solution?

https://github.com/huylvdev/react-native-fix-image it works for me

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}

in : /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

it works for me, thank you

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

the solution that worked for me just temporarily fix because u have to fix it inside node modules, is there any other way for preventing this to happen in the future?

For react-native version < 0.63
Please use react-native-fast-image instead of ReactNative Image
To react-native-fast-image work, please disable fallback of react-native-fast-image
It's work on IOS 14 !

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

@EmmanueleVilla apply this patch https://github.com/facebook/react-native/issues/29279#issuecomment-658244428 and then use patch-package to keep it :)

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

Guys, this patch works on React native 0.61.5 too. I use the same workaround.

1.- run "yarn add patch-package"
2.- Make a new folder called patches on the root of the project.
3.- Make a new file called react-native+0.61.5.patch inside that folder
4.- Add the source code above.
5.- run "yarn patch-package" on the root of the project or put this on a post-install script

I'm also running 61.5, this worked for me! I'm guessing if you have a version other than 61.5, just rename the patch file to use your version, and when you run yarn patch-package it will apply the patch since it detects that your react-native version matches.

e.g. for version 61.2, name your patch file react-native+0.61.2.patch

#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

This works for me on v0.61.4 although there is a much simpler way to generate the patch file.

tl;dr Follow the instructions on the https://github.com/ds300/patch-package itself.

Here are the detailed instructions:
This is the fix that was made on React Native source code v0.63.2: https://github.com/facebook/react-native/commit/123423c2a9258c9af25ca9bffe1f10c42a176bf3

# make the change in `node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m` file
if (_currentFrame) {
  layer.contentsScale = self.animatedImageScale;
  layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
  [super displayLayer:layer];
}

# run patch-package to create a .patch file
npx patch-package react-native

# this will generate the patch file in the patches folder
# patches/react-native+0.61.4.patch

# then add to postinstall script
"scripts": {
  "postinstall": "patch-package"
 }

Hope this helps!

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

I got this problem while using RN v0.61.2 but this still worked for me. Thanks

For react-native version < 0.63
Please use react-native-fast-image instead of ReactNative Image
To react-native-fast-image work, please disable fallback of react-native-fast-image
It's work on IOS 14 !

It's worked for me !

yarn patch-package

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

@EmmanueleVilla apply this patch #29279 (comment) and then use patch-package to keep it :)

Youre the man @jkim430 Thanks

Tried all the solutions on 0.61.4, the remote images are loading fine but the local assets won't just show.

Any ideas?

Thank you xcode..

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It worked for me. Thanks! Additionally, you can use npx patch-package (more info here) to keep this change and don't need to keep fixing all-time node_modules is reinstalled.

These are the kind of bugs that makes me want to open any other business and stop being a programmer.

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

I can confirm that this patch can also be applied to version 0.63.2. Rename the file to (react-native+0.62.2.patch).

Please Re open this issue,
This is still not solving the problem.

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

Hey, I tried using react-native-fix-image it worked when I am doing
npx react-native-fix-image but when I am removing the node_modules and reinstalling them.
The app does not load the images.
Did you face any such issue and do we have to run the npx command every time to render the images.

here you go
https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

Thats work for me! Thks!!

It's not working for me on release mode, any idea?

@tomcheung thank you a lot!
I hit my head 2 days to find out what the problem is...

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

Images not showing on release version. (ejected expo 39 project) RN 0.63.3
update: updating metro.config.js fixed my issue => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

Is this going to be officially fixed on any RN release? Afaik, the problem is still there.

Is this going to be officially fixed on any RN release? Afaik, the problem is still there.

+1. Every once in a while Im on an old project and I have to patch it..

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
  
  

Thanks! This worked for me on my all old RN projects.
Just replace the React Native version of your old project instead of 0.63 before creating the file of react-native+0.63.0.patch.

I created a video and I hope this would help someone.

@AsbarAli's fix worked for me, RN Version: 0.61.5.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil
if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.
https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It worked for me. Thanks! Additionally, you can use npx patch-package (more info here) to keep this change and don't need to keep fixing all-time node_modules is reinstalled.

These are the kind of bugs that makes me want to open any other business and stop being a programmer.

It's important that you run npx patch-package react-native for the patch to be applied.

Hey all could someone confirm this was merged to core?

While patch-package is a solution it shouldn't be a permanent one.

I will keep this open until I can investigate.

Are they not planning to fix this?

https://www.npmjs.com/package/react-native-fix-image
working for me

It looks like it is fixed. Just won't be back ported to previous versions. I believe the fix is in 63.3

@AsbarAli's fix worked for me, RN Version: 0.61.5.

How did you do it? i'm using RN 61.2

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!
1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

I got this problem while using RN v0.61.2 but this still worked for me. Thanks

Hi can you help me? I also have RN 61.2 but it doesn't work at all. May bottom navigation images are not showing

Hey @rjtubera, the patch is supposed to work with 0.63 though reportedly works also with 0.61.5 version of React Native. Perhaps if you try upgrading from React Native 0.61.2 to 0.61.5, and re-apply the steps you have quoted, it may work.

If that doesn't work, try upgrading to 0.63 and do the same. Though becareful as some of your components might break. You should test every component after the upgrade to make sure everything still works well (on iOS and Android).

I encounter this issue, i fixed it by following steps at this link
https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

Thanks Alabi, I sorted the issue too by patching React Native. Working well now so far 😊

From: Alabi Temitope Wahab notifications@github.com
Reply to: facebook/react-native reply@reply.github.com
Date: Tuesday 13 October 2020 at 03:56
To: facebook/react-native react-native@noreply.github.com
Cc: Kieran Desmond kieran@sweep.ie, Comment comment@noreply.github.com
Subject: Re: [facebook/react-native] Image cannot show image in iOS 14 (#29279)

I encounter this issue, i fixed it by following steps at this link

29420 (comment)https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/facebook/react-native/issues/29279#issuecomment-707436028, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA.

i upgraded to 0.63 version of react native, but i am facing same issue,anyone can help me ?

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)

Works perfectly.

Version 8.3.2 of react-native-fast-image even includes the upgraded version of SDWebImage, so no need to pod update!

https://www.npmjs.com/package/react-native-fix-image
working for me

Worked for me too. 👍

Upgrading from React-Native 0.63.1 to 0.63.2 worked for us.

I am facing the same issue on RN 0.62.2 on Xcode 12.0.1. and ios 14. Any solution?

I am facing the same issue on RN 0.62.2 on Xcode 12.0.1. and ios 14. Any solution?

@ghasemikasra39 I was facing the same issue with your same versions. Installing react-native-fix-image worked for me.

@RutsSantos right on this also worked for me!

1) npm install --save react-native-fix-image
2) npx react-native-fix-image
3) rebuild project

Upgrading from React-Native 0.63.1 to 0.63.2 worked for us.

This worked for me.

This worked for me. Thanks @JordanRosas

@JordanRosas Worked for me wonderfully too, thank you

upgrade react native version from 0.62.2 to 0.63.3 no need to patch or install npm modules anymore

0.62.3 does not exists:

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

corrected

Some of us can't upgrade until this critical RN bug is resolved: https://github.com/facebook/react-native/issues/29451

So we are either stuck with monkey patching 0.62.x or a bugged 0.63.x version.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It works. Thank you!

If you don't want to install any packages or directly edit node_modules you can try adding a preinstall stage hook in podfile as in https://stackoverflow.com/a/64495360/7477198 this worked for me. This is more git friendly.

For me, even on RN 63.3, images are not showing up on a physical device. As a workaround, I encoded the images in base 64 here: https://www.base64-image.de/ and then used that as the source for the Image component instead of require('imagePath')

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Your are a genius man, you saved my life!

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Thanx
worked for me fine on RN 0.61.5
i added a patch file called react-native+0.61.5.patch

also a fix for DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

Use 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

@legion-zver Thanks for the fix! Is the RCT_METRO_PORT required here, or something specific for your project?

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

3 solutions:

1. Fix the problem manually within node_modules
2. Use this fix library https://www.npmjs.com/package/react-native-fix-image
3. Update to React Native 0.63.3

I can confirm this still exists in --configuration=Release, even on "react-native": "0.63.3". Works well in --configuration=Debug however.

https://www.npmjs.com/package/react-native-fix-image does not help but breaks the build in
release configuration with this error:

.../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:278:5: error: expected expression
  } else {
    ^

Also users of my app experience no image load (from url) on iOS but it doesn't occur to everyone only to some people. Please fix this. I'm using React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- link to image showing this issue

@douglasjunior works well ! thanks very much!

@RutsSantos right on this also worked for me!

1. npm install --save react-native-fix-image
2. npx react-native-fix-image
3. rebuild project

worked for me 🎉🎉🎉🎉🎉

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

3 solutions:

1. Fix the problem manually within node_modules
2. Use this fix library https://www.npmjs.com/package/react-native-fix-image
3. Update to React Native 0.63.3

another Q, i use .1 manually within node_modules ， it works well in show image from network , but i can not show local image ,

Also users of my app experience no image load (from url) on iOS but it doesn't occur to everyone only to some people. Please fix this. I'm using React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- link to image showing this issue

I find issue which occurred to me. WebP was not supported in iOS 13 so I needed to install react-native-fast-image with SDWebImageWebPCoder pod.

i dont suppose anybody has a Microsoft App Center build script to fix this as well?

FYI, I was also able to overcome this using FastImage which had that fixed after upgrading SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 (I cannot upgrade to 0.63 right now as it breaks other work, I'll eventually move to the latest version)

In my case I had Animated images from plain RN, but I was able to use FastImage for those as well using

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

<AnimatedImage source={require('....')} />

Alternatively the fix image package should do, if it doesn't work on Appcenter (@krisbaum74) you should be able to do the same by creating appcenter-pre-build.sh in the root of the repo and adding the script w/ the fix there

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

I already upgraded to 0.63.3 and this library does not solve the issue( Images load on simulator but not on physical device.

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

I already upgraded to 0.63.3 and this library does not solve the issue( Images load on simulator but not on physical device.

My issue was related to copying the assets for the production build, there was a bad linking as explained in here then regenerate the bundle and try again

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Thank you so much!!!! You literally saved my day 🙏 ❤️

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Worked for me !!! 👍

We also upgraded to 0.63.3, and are facing this issue on iOS 14.
We download files (images among them) using RN-fetch-blob package, and load these local images using the Image component.

@krisbaum74

i dont suppose anybody has a Microsoft App Center build script to fix this as well?

Use 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

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Just follow the above fix and make a file react-native+0.63.0.patch

after that, In your appcenter-pre-build.sh add

npm i -g patch-package
patch-package

This will add the above fix in your AppCenter build.

I had this on iOS and used npx react-native-fix-image which worked great. Now I am dismayed to find the problem persists on Android!

No mention of Android here - am I the only one?

I'm rocking "react-native": "0.61.5"

_const Image = Animatable.createAnimatableComponent(FastImage);_
Is not working Properly!

animation={'bounceIn'} is not working

"react-native": "0.63.3"
"react-native-fast-image": "^8.3.4"
"react-native-animatable": "^1.3.3"

I know this is considered a patch for 0.63, but I can confirm this also works on 0.62. 👍

It still doesn't work on IOS 14.2, Xcode 12.2, react-native 0.63.4
Any suggested fix doesn't help
Update
0.63.4 - shows remote images without problems and without any patch, but local images don't work with or without patch

I have a project with react-native 0.63.3, the patch doesn't work for me. Before applying the patch I verified the class RCTUIImageViewAnimated and it contains already the patch code, this is expected as #29420 is already merged in the 0.63.3 as per change 0.63.2 CHANGELOG https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632. So the patch won't fix it, I think it was valid in 0.62.2 but I'm afraid that changes in 0.63.3 broke the _local_ images loading again. That explains why some dev downgrade to <0.63.2 and apply the patch and the images got visible again. I would rather just get the 0.63.2 that contains the fix. In any case, I'm hesitating to downgrade, yes even for one version back as I don't want to get stuck in the past ;-). I created a workaround that is working on my end.

Basing on the fact that for _me_ images are loading when using an _external_ URL (RN 0.63.3).
My workaround,

• I follow the Hybrid assets pattern, you can get the reference here https://reactnative.dev/docs/images#images-from-hybrid-apps-resources
• Add the images to the iOS/Android asset library. This can be done either manually, by script, XCode,...
• Reference the image by its _local_ URI instead of the _react native convenience file system reference_, iOS example below

<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>

• Created a utility function to get iOS or Android reference asset URI depending on the Platform. Please read the documentation(https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) and take note of the differences in URI formatting.
• Images started to show up on the iOS 14.2 app!! I tested with the app distributed from App Store and Ad Hoc installation

It's working(for me) but, downsides,

• React Native way of references is too convenient to put it just aside, I'm hoping that this issue gets resolved and I can get back to normal.
• Keeping potentially three assets folder in sync... yeap it's by the script but developers will easily forget and in a few months from now someone will spend 2 days figuring out why images don't appear to discover that scripts are out of date or anything that you can think of.
• Images are missing from my simulator, I'll be looking to add a conditional to load the images from the react-native assets' folder if running from a simulator. This lib can help https://github.com/react-native-device-info/react-native-device-info (I haven't tried yet).
  I'm hoping that someone can benefit from this workaround.

@RutsSantos right on this also worked for me!

1. npm install --save react-native-fix-image
2. npx react-native-fix-image
3. rebuild project

worked for me 🎉🎉🎉🎉🎉

Did not work for RN 0.61

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

https://www.npmjs.com/package/react-native-fix-image

thư viện này của mình, thấy nó vẫn hoạt động tốt với RN 0.61

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

https://www.npmjs.com/package/react-native-fix-image

thư viện này của mình, thấy nó vẫn hoạt động tốt với RN 0.61

Hi Huy, Mình đã thử step by step như guide ở trên, đã hiển thị fix image Done. Nhưng ảnh vẫn ko hiển thị trên ios 14. Những version ios khác vẫn hiển thị ảnh bình thường.
Mình sử dụng RN 0.61 và ios 14.