Image cannot show image in iOS 14

[caofeng]

Image cannot show image in iOS 14, but can show location, like: <Image source={ require('./images/add_scan_images.png') } />

Environment: Xcode Version 12.0 beta (12A6159) Simulator: IPhone SE - 2nd generation - 14.0 "react": "16.11.0", "react-native": "0.62.2"

[nigharsh]

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

Any ideas?

[BogdanRad]

Thank you xcode..

[fabiocberg]

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.

[Justin9606]

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

[virgial]

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

[Rohithzr]

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

[bhavishya2107]

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.

[sobanarshad85]

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

[caiomendes23]

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

[mateodaza]

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

[todor-droxic]

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

[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

[petermason]

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

[lock9]

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

[d0xi5]

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

[hanomain99]

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.

[matiasmir]

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

[gt-codes]

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.

[safaiyeh]

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.

[enriccamacho]

Are they not planning to fix this?

[imhuy]

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

[safaiyeh]

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

[rjtubera]

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

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

[rjtubera]

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

[kierandesmond]

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

[tbanj]

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

[kierandesmond]

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.

[Anzormumladze]

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

[lissau]

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!

[Doha26]

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

Worked for me too. 👍

[alexanderkho]

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

[ghasemikasra39]

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

[RutsSantos]

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.

[JordanRosas]

@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

[xtealer]

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

This worked for me.

[basarburak]

This worked for me. Thanks @JordanRosas

[jkz27]

@JordanRosas Worked for me wonderfully too, thank you

[Anzormumladze]

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

[hugoh59]

0.62.3 does not exists:

[hugoh59]

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

[Anzormumladze]

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

[cristianoccazinsp]

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.

[ReemaVinodGangdev]

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!

[haseebeqx]

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.

[adithyaBellary]

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')

[TechMaagal]

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!

[DanGDroid]

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

[joshhogg]

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?

[PhoenixLeeSin]

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

[douglasjunior]

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