React-Native iOS 14 local Images issue-Resolved

If you are facing issue related to local images not rendered on iOS 14 physical device/Simulator for release/debug build. Fixed and tested with react-native 0.61.
you have to follow these steps.

Go to project directly and run command in terminal

npm i -g patch-package

patch-package is used to solve the issues in node module dependency. It helps authors to make and keep fixes to npm dependencies.

While developing an application if we need to modify or customize any react native libraries we can modify those in node modules. But if we want to share those with our team members we have to zip the library file and share. Else while we are running npm install or yarn install all the libraries are updating, hence our changes may also be lost.

`patch-package` allows you to modify the code in the node_modules` directory, in the form of patches. The usage was quite simple too.

There are two options to create .patch file

Now it’s time to make changes to our react native code or, in other words patch the reactive native code

1. Open the file node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
2. Edit the source code as follow:

From:

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

To:

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

First Options:

In this option we will run a command and it will generate .patch in patches folder

npx patch-package react-native

Second Option:

This is manual option to create .patch if command did not created .patch in patches folder.
Make a new folder called “patches” in home/main directly of your project. You can create a new folder manually or with command (mkdir patches ) then Go to patches folder by running (cd patches)

create a new file here and name it (react-native+0.63.0.patch). You have to replace 0.63.0 with your project’s react-native version. Although file will be patched but you will get a warning.

Now copy below source code to file react-native+0.63.0.patch

Save this file go back to root of the project by (cd ..)

When .patch will be created, next we will add postinstall to script in package.json file

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

From now onwards, whenever you install new packages, it will patch from all your patch files.

Now run this final command

patch-package

That’s it. Close terminal, metro bundler. Clean you project from Xcode and build it again.
Congratulations. You have resolved your iOS 14 local images issue in react-native project.
Thank you for reading…