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 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

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 to copy the code.
3) Run the commands

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

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:

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

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

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