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
- Open the file from
node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
- 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