How to make your React Native 0.62 project compatible with iOS 14 and Xcode 12.5
Tags: reactnative
Published: 2021-10-07 20:12:11

# Overview
This guide is for the React Native developers that needs to work on a lower version React Native project (0.62 specifically). I haven't encountered any problems with Android so far so this blog is specifically for iOS fixes only. 

# The Guide
This is broken into specific guides but I recommend going through them in order before running a build on Xcode. 

## Fix the missing Images for iOS 14 devices and above
This directly refers to this [issue](https://github.com/facebook/react-native/issues/29279) when iOS 14 just came out and the React Native framework still wasn't able to address breaking changes/bugs. To resolve the issue do this
1) In the root project folder create a folder called **patches**
2) Create a new file called **react-native+0.63.0.patch** and paste the following code
``` bash
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
```
Note: You can also refer to this [gist](https://gist.github.com/roycechua23/8376e099d83a50351d56b1789c94979c) to copy the code.
3) Run the commands
``` bash
yarn install
npx patch-package
```
This should automatically resolve the issue with the unrendered images. 

## Fix for No matching function for call to 'RCTBridgeModuleNameForClass' error 
This error will come up because of a newer version of Xcode. The error looks like the following image below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awz6rsuh3qx7fefojyv7.png)
To resolve this, you need to remove the following:
1) Go to the **Podfile** in the ios folder and add the following to your target:
``` swift
def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
```
Note: This is actually just a function that will search and replace the existing code in node_modules causing the error.

2) In the **post_install** script, add the following function calls using the newly added find_and_replace() function
``` swift
post_install do |installer|
    flipper_post_install(installer)

    ## Fix for XCode 12.5
    find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm",
    "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
    find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm",
    "RCTBridgeModuleNameForClass(strongModule))", "RCTBridgeModuleNameForClass(Class(strongModule)))")
end
```
Note: the flipper_post_install(installer) function call should be present by default just add the codes under Fix for Xcode 12.5 

## Fix for errors related to flipper
In some instances, you may encounter a build problem on Xcode or RN related to flipper. You can do the following to resolve the issue
1) Update flipper version on the Podfile to 0.91 and platform :ios, from '9.0' to '10.0'. **First parts of the Podfile** is shown for reference 
``` swift 
platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

def add_flipper_pods!
  version = '~> 0.91.1'
  pod 'FlipperKit', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', version, :configuration => 'Debug'
end
```
Note: If you can't afford to change the deployment platform to '10.0'. You can try to find a lower stable version of Flipper that's compatible with Xcode 12.5. 
2) Run pod install

# Finally
You should now be able to run the iOS project without any issues. Just comment any issues you encounter and hopefully either I or friends here at dev.to can help.

# Ending Notes
The fixes are actually based on Github issues and Stackoverflow sites and I compiled all of them for everyone's convenience.

If ever I encounter problems with the initial Android run, I will add an Android section. Feel free to comment if ever you encounter problems running Android in the initial launch using the React Native version 0.62 template.

I hope this article helped you in some way.

If this article/blog/tutorial helped you and you would like to keep supporting this my work, I would appreciate it if you would buy me a coffee here: https://www.buymeacoffee.com/royce.chua