Images not loading in React Native on iOS 14 devices & Xcode 12

Recently while releasing an update for our iOS app we encountered a weird issue in which images rendered using < Image > component were not getting rendered at all on iOS devices. This was a shocker to us, as no major change was made in our app, then why this issue?

After searching about this issue we found out that this issue of images not rendering on iOS devices is specific to apps made with React Native 0.63.1 and iOS 14 devices.

The solution for this problem is quite straight forward, so lets try to solve this without wasting any more time.

Solution 1 – Upgrade React Native

Since this is a known issue, the react native team has fixed this issue. So, if you can then you should try upgrading the React Native package for your app.

Note: While upgrading the version of react-native, we ran into multiple issues. So, we dropped the plan. Cheers !!

Solution 2 – Manual Fixes

As solution 1 didn’t work out for us we tried providing a patch fix for this solution. This solution will help in loading images in your react native applications on iOS 14 devices.

1. Open file – node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m in your text editor.
2. Update the content of the file by replacing few lines with updated code.

# REPLACE THE BELOW CODE
#pragma mark - CALayerDelegate

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

# WITH THIS CODE
#pragma mark - CALayerDelegate

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

3. Once you have made the above change, run the command – npx patch-package react-native
4. Install patch-package by using the command – npm install -g patch-package
5. Modify the package.json file.

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

Once you have made all the changes, try running your app once again. This time hopefully it will work.