All Image/Fast Image in React Native app not working on iOS 14 beta and Xcode 12 beta

Question

I've upgraded my iPhone device to iOS 14 beta and Xcode 12 beta. Then all Image/Fast Image on my React Native project can not show (which work well on previous iOS 13 and Xcode 11.5).

It maybe cause by the build system or something wrong when bundle resource. My others app which run on release mode still show the image, but sometimes app crash when i try to open screen that have image. — EmBeCoRau, Jun 29 '20 at 06:32
Ohh okay, I am actually running on the simulator and none of the images are showing. — Umang Loriya, Jun 29 '20 at 07:31
Don't know why but today I just build app again and the issue has gone, LOL... — EmBeCoRau, Jul 03 '20 at 16:01
@EmBeCoRau you probably updated Pods and it automatically upgraded `SDWebImage` — t3chn0b0y, Jul 05 '20 at 20:01

score 29 · Answer 1 · answered Oct 01 '20 at 09:39

This is a problem with react-native <= 0.63.1 and iOS 14

This issue is fixed and merged to react native latest version. But if you want to fix your project now or you are using under 0.63.2 versions, there is a solution. (Thanks to https://bityl.co/3ksz)

FIRST SOLUTION : If you can update React Native

Update react-native to v0.63.2 or superior

Its was fixed in this release : https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632

SECOND SOLUTION : If you can't update React Native

OPEN THE FILE FROM :

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

EDIT SOURCE

From

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

To

#pragma mark - CALayerDelegate

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

MAKE PATCH

npx patch-package react-native

MAKE PATCH FILES TRACKED FOR GIT

git add patches/*

ADD PACKAGE SCRIPT FOR AUTO APPLYING PATCHES

package.json

"scripts": {
  ...
  "postinstall": "patch-package",
}

It will patch from all patch files whenever you install packages.

Hmmm. I don't see that file in my node_modules folder. 0.59.10 here. — Sunwoo Yang, Oct 17 '20 at 14:35

score 2 · Answer 2 · edited Aug 08 '20 at 15:32

Try using react-native+0.63.0.patch as suggested here https://github.com/facebook/react-native/issues/29279#issuecomment-657201709

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

To use the patch
run npm i -g patch-package
Make a new folder called patches
Make a new file called react-native+0.63.0.patch inside that folder
Add the source code above
run patch-package on the root of the project

score 2 · Answer 3 · answered Aug 11 '20 at 06:07

2

Update to React Native 0.63.2. Fixed in https://github.com/facebook/react-native/commit/b6ded7261544c703e82e8dbfa442dad4b201d428

answered Aug 11 '20 at 06:07

Dimitar Nestorov

2,411
24
29

score 1 · Answer 4 · answered Jul 05 '20 at 19:57

1

This is related to https://github.com/SDWebImage/SDWebImage/issues/3040.
Simply update SDWebImage in your Podfile or remove Podfile.lock and re-install.

answered Jul 05 '20 at 19:57

t3chn0b0y

554
1
7
11

score 1 · Answer 5 · answered Sep 20 '20 at 19:28

1

if you are not running latest react-native version ( > 0.63.2) or not planning to upgrade to latest version of react-native. Then you can be your temp fix, try changing node_modules as below

Xcode 12 fix for IOS

answered Sep 20 '20 at 19:28

gyan deep

1,880
1
13
9

score 1 · Answer 6 · answered Oct 02 '20 at 17:17

1

I am using React Native v0.60.6 with React Native Fast Image v8.1.5.

Upgrading SDWebImage with pod update SDWebImage worked for me.

More specifically, I went from SDWebImage v5.8.1 to v5.9.2.

answered Oct 02 '20 at 17:17

Brian Redd

414
1
5
12

I also needed to run "pod repo remove trunk" before pod update, which was written in one of the previous answers. Otherwise it was giving an error which I can't find right now :/ – Yasin Kilicdere Feb 24 '21 at 22:18

score 1 · Answer 7 · answered Nov 25 '20 at 14:25

Xcode 12 builds seems to have issue, to fix i go to

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m

And search for if (_currentFrame)

add else block to the if block as seen below code

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

score 1 · Answer 8 · answered Dec 03 '20 at 18:38

1

I wouldn't recommend modifying node_modules. Following worked for me:

npm install --save react-native-fix-image
npx react-native-fix-image
rebuild project

answered Dec 03 '20 at 18:38

Mahendra Liya

12,912
14
88
114

SenKe · Answer 9 · 2021-01-21T01:44:03.327

My version information is as follows,

"react-native": "0.61.5",
"react-native-fast-image": "^7.0.2"

This worked for the pictures I show using FastImage.

pod repo remove trunk
pod update SDWebImage

For using the Image component that comes with react-native, you need to modify the source code. In the file node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m, modify the - (void)displayLayer:(CALayer *)layer method It can be as follows:

-(void)displayLayer:(CALayer *)layer
{
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
   } else {// Fix the bug that react-native 0.61.5 does not show pictures on xcode12
     [super displayLayer:layer];
   }
}

Here is the discussion for FastImage in github

Here is the discussion for react-native in github

score 0 · Answer 10 · answered Jul 05 '21 at 14:01

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.

//path

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m

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

score 0 · Answer 11 · answered Apr 05 '22 at 14:49

0

None of the previous answers worked for me.

I solved it by removing ios/Pods directory, then running pod install.

So:

cd ios
rm -rf Pods
pod install

answered Apr 05 '22 at 14:49

Aviran Katz

741
2
8
26

All Image/Fast Image in React Native app not working on iOS 14 beta and Xcode 12 beta

11 Answers11

Linked

Related