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
Top comments (0)