react-native image is not loaded in iOS 14 upgrade

Question

After upgrading the version of iOS 14, the React Native failed to build. switched the XCode build settings to "Legacy Build Settings" and succeed to build.

But the new build doesn't load images and the original section of images are now white screen

<Image
  source={require('./images/home.png')}
/>

System specs

Environment:
Xcode Version 12.0
Simulator: IPhone X - 2nd generation - 14.0
"react": "16.11.0",
"react-native": "0.62.2"

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

I have the same issue on React Native version "0.63.0". When I update the Xcode to the version 12.0 (12A7209) and then the project is not built on Simulator iPhone 11 (iOS 14).

Solutions (these are not steps, every one of them could be a solution):

• Use Simulator with iOS earlier than version 14
• Use Legacy Build Settings in the setting of Xcode

NOTE: The correct solution should come from apple or the React Native and the above solutions are temporary.

Answer 3

I have facing same issue on React native version 0.62. When I update the Xcode version 12.0.1 Catalina MacOs version 10.15.7 initially local and remote url not loading after that I added patch file in version 0.62 that time local and remote url image showing in my simulator but not working in TestFlight build and iPhone device iOS 14 and above. But not working in TestFlight build and App Store. After trying some solution issue is fixed when I upgrade react-native version 0.62 to 0.63.4. Without any patches. And following changes in ios Podfile.

# pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon" //commented
pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker" //Add this line

After adding pod file update pod and run and following command.

        1.     npm install --save react-native-fix-image.                      
        2.     npx react-native-fix-image
        3.    add pod install command in ios dierectory

After completing all steps application run in iOS 14 and above device support also run in TestFlight build and Appstore Build Save my Life. Good Luck !!