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.