Showing posts with label XCode. Show all posts
Showing posts with label XCode. Show all posts

9/24/2020

Solved | React Native Images and assets won't load after updating XCode to version 12.0

This morning I was shocked while I was working on my react native project, my Xcode crashed and suddenly asked me to install some component updates.

After the installation, the Xcode version became 12.0, and all the simulators are now running on iOS 14 while my react native project is running on version 0.61.5.

All the images and icons no longer work after I run the app on the iOS 14 simulator. It turns out the issue happens mostly on react native projects running below version 0.63 so the solution was to patch my RN0.61.5 to RN0.63.0 without doing an upgrade.

Patch code:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 
 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Here are the steps:

1. run "npm i -g patch-package"
2. Make a new folder called patches in the root directory of your project.
3. Make a new file called react-native+0.63.0.patch inside that folder
4. Copy and Paste the source code above inside the react-native+0.63.0.patch file.
5. run "patch-package" on the root of the project

You'll see some warnings about the possible issues you might encounter but so far after I run the "patch-package" everything works again. Hope this helps.

Reference:


Note:

If you re-install the node modules, this will delete the RN0.63.0 patch you generated, so you have to run the "patch-package" again.