Fix Images Not loading In iOS 14 — React Native

Quick guide to patch React Native without upgrading

Photo by Silas Baisch on Unsplash

Today I decided to finally upgrade Xcode to version 12.0.1 which means the simulators were also upgraded to iOS version 14. The project I’m currently working on is on React Native version 0.61.5. I usually put off updating Xcode for a few weeks or until I have the spare time to deal with the side effects of this update.

The latest one is rather dramatic and prevents the Image component from displaying any images on iOS 14. Here is the related issue on Github and a screenshot for reference.

Image cannot show image in iOS 14 · Issue #29279 · facebook/react-native

The background image is missing on the login screen and so are all of other images throughout the app.

The issue is fixed and merged in React Native’s latest version 0.63 but if you are not ready to update your project to the latest React Native version read below.

We need to make a patch. We will be using the patch-package from npm to make the patch, apply it, to keep track of it and automatically reapply it when necessary.

The authors of this package describe its use as the following.

“patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.”

To patch React Native core follow these steps.

• Install patch-package

$ npm install patch-package

• Open RCTUIImageViewAnimated.m with your favorite editor

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

• Edit the RCTUIImageViewAnimated.m

Original

Updated

#pragma mark - CALayerDelegate

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

• Make the patch

$ npx patch-package react-native

• Track it with Git

$ git add patches/*

• Auto apply the patch every time npm install runs, add the following to scripts in package.json

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

Now restart your app and it all be fixed.

Like always don’t hesitate to react out on Twitter if you have any questions, concerns, or just connect.

Best.