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

Answer 1

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

1. OPEN THE FILE FROM :

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

2. 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];
  }
}

3. MAKE PATCH

npx patch-package react-native

4. MAKE PATCH FILES TRACKED FOR GIT

git add patches/*

5. ADD PACKAGE SCRIPT FOR AUTO APPLYING PATCHES

package.json

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.