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…

--

--

--

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Optionals and Unwrapping optionals in swift

iOS App in 30 mins! — Part 1

SwiftUI Tutorial: Working with Alerts

Create a Web View | Xcode 12, Swift 5.3

An iPhone displaying a web page.

PRISM v1.1.2 — Major Improvements

Apple Signing SwiftUI

Update: The APPICS iOS Testnet is now available again for everyone!

How to Call a Serverless Function Or Web API Periodically With iOS Shortcuts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imdad Hussain

Imdad Hussain

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/

More from Medium

Expert: Courier App MVVM Jetpack (HMS Location and Map Kit) in Android using Kotlin- Part-5

How to integrate Juspay In React-Native App

Benchmarking cryptography in React Native and iOS

Hybrid vs Native mobile application development