Image is not loading in iOS 14-React Native

Related issue: https://github.com/facebook/react-native/issues/29279

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

1. Open the file fromnode_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
2. Look for the following snippet in the RCTUIImageViewAnimated.m and replace 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 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 it 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 need 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