I am currently migrating an iOS app written in Swift to a new React Native project. I successfully integrated a React Native component into my iOS app by first generating a main.jsbundle
with the following command:
react-native bundle --dev false --entry-file index.js --bundle-output ios/myApp/main.jsbundle --platform ios --assets-dest iOS
In Swift, I integrated the React Native component using this code:
private func showRNComponent() {
let rootView = RCTRootView(
bundleURL: Bundle.main.url(forResource: "main", withExtension: "jsbundle")!,
moduleName: "DemoPage",
initialProperties: nil,
launchOptions: nil
)
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)
}
This method works fine with the main.jsbundle
. However, I attempted to use Metro as a development server for better debugging capabilities and updated the method to fetch the bundle from the development server:
private func showRNComponent() {
guard let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios") else {
NSLog("Invalid URL")
return
}
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "DemoPage",
initialProperties: nil,
launchOptions: nil
)
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)
}
After starting Metro and running the development server, when trying to trigger the function, I received the following errors in the XCode console:
Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'DevSettings' could not be found. Verify that a module by this name is registered in the native binary. Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","Timing","AppState","SourceCode","BlobModule","WebSocketModule","SettingsManager"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","LogBox","DevSettings"]}, js engine: hermes
TypeError: Cannot read property 'render' of undefined, js engine: hermes
I suspect this issue might relate to the XCode build target settings, which should be set to Debug mode to load development settings. Even though I have ensured my build settings and preprocessor macros (preprocessor macros: debug=1
) are applied across all build configurations, the problem persists.
Here are excerpts from my Podfile
and package.json
, detailing the libraries and settings I'm using:
//Poddile
source 'https://github.com/CocoaPods/Specs.git'
require Pod::Executable.execute_command('node', ['-p',
'require.resolve(
"react-native/scripts/react_native_pods.rb",
{paths: [process.argv[1]]},
)', __dir__]).strip
platform :ios, '14.0'
# min_supported_versions = { :ios => "13.0"}
prepare_react_native_project!
target 'MyApp' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
:flipper_configuration => FlipperConfiguration.disabled,
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
# Pods for MyApp
pod 'RxSwift'
pod 'RxCocoa'
pod 'SDWebImage'
pod 'Alamofire'
pod 'MBProgressHUD'
pod 'SwiftyJSON'
pod 'SwiftyUserDefaults'
pod 'ObjectMapper'
pod 'Firebase/Crashlytics', '9.2.0'
pod 'Firebase/Analytics', '9.2.0'
pod 'Firebase/Messaging', '9.2.0'
pod 'SwipeCellKit'
pod 'Kingfisher'
pod 'WeScan'
pod 'RxDataSources', '~> 4.0'
pod 'ChameleonFramework'
# pod 'FlexLayout'
pod 'SwiftSoup'
pod 'IQKeyboardManagerSwift'
pod 'GoogleMLKit/BarcodeScanning', '2.6.0'
pod 'MJRefresh'
pod 'DGCharts'
target 'MyAppTests' do
inherit! :search_paths
# Pods for testing
end
target 'MyAppUITests' do
inherit! :search_paths
# Pods for testing
end
# post install
post_install do |installer|
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false
)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
end
end
# fix xcode 15 DT_TOOLCHAIN_DIR - remove after fix oficially - https://github.com/CocoaPods/CocoaPods/issues/12065
installer.aggregate_targets.each do |target|
target.xcconfigs.each do |variant, xcconfig|
xcconfig_path = target.client_root + target.xcconfig_relative_path(variant)
IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
end
end
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
if config.base_configuration_reference.is_a? Xcodeproj::Project::Object::PBXFileReference
xcconfig_path = config.base_configuration_reference.real_path
IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
end
end
end
end
end
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"doctor": "react-native doctor",
"upgrade": "react-native upgrade",
"config": "react-native config",
"android": "react-native run-android",
"ios": "react-native run-ios --mode \"ETE-t1-Debug\" --scheme=\"MyApp-ETE(t1)\"",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"start": "react-native start",
"bundle:ios": "react-native bundle --dev false --entry-file index.js --bundle-output ios/MyApp/main.jsbundle --platform ios --assets-dest ios",
"bundle:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"clean": "npx react-native-clean-project"
},
"dependencies": {
"@react-native-async-storage/async-storage": "1.23.1",
"axios": "^1.6.8",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-progress": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.73.21",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.5",
"@react-native/typescript-config": "0.73.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"prettier": "2.8.8",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
Any suggestions on how to resolve these errors or further steps to debug this issue would be highly appreciated!
My problem is solved with adding the custom build config's to the podfile, because my project was using custom build configs.
Sample code is from https://github.com/CocoaPods/CocoaPods/issues/10015
Thank you @Dustin