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.

Answer 7

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

Answer 8

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

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

Answer 9

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

Answer 10

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

Answer 11

None of the previous answers worked for me.

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

So:

1. cd ios
2. rm -rf Pods
3. pod install