Image is not loading in iOS 14-React Native 🧐

This issue is fixed and merged to the react-native latest version. But if you want to fix your project now or you are using under 0.63 versions, here is the solution I found across the web and from the people who has some more expertise on React Native

What else we can think of and do we have any Band-aid fox for that? Yes, we do have. If someone hasn’t heard about patch-package and install the package in your project using your flavour(yarn or npm)

if you are using NPM

npm i patch-package

if you are using yarn

yarn add patch-package

Time to Patch React Native Code

Open the file from

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

Look for the following snippet in the RCTUIImageViewAnimated.m and replace it with the one I suggested below. Search for It

if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }

Replace with

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

Once this is done, try running the following command

npx patch-package react-native or yarn patch-package react-native

First, it will look for the changes from the react-native library, if changes found it will create a patch file with your package name including the version otherwise it will not create any patches.

For me, it created a folder named patches and placed react-native+0.61.5.patch

Don’t forget to add that to your git, those need to be tracked git add patches/*

One more thing, you need to create a post-install script, It will patch all patch files whenever you install packages.

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

What if I had already one, here is the gist

"scripts": {
  ...
  "postinstall": "first-one && second-one && patch-package",
}

One More Thing: We can do the same for any package, let’s same if you have something to add in react-native-x package, just make the changes and create a patch

For example, I made some changes in react-native-fastimage and it needs to be reflected? just follow the same procedure replacing react-native with react-native-fastimage. That’s all PS: feel free to comment, in case if you find any mistakes or any follow-ups

Related issue: See this