I have been using React Native for a mobile app project for over a year now. I have a native component to bridge the BLE stack to the React Native portion of the app. Recently I upgraded to version 9.1 of XCode and I cannot get the React-Native Bridge to work within the iOS version. The RCTBridge is always nil so I can never use the eventDispatcher(). Here is my setup:
I have a native Swift component which I integrate into the app via a bridgin header. The origanization looks like this:
BLEScanner.swift (This is the native component)
BluetoothModuleBridge.m
Module-Practive-Bridging-Header.h (The bridging header)
Relevant code snippets from each file:
BLEScanner.swift
import Foundation
#objc(BLEScanner)
class BLEScanner: NSObject {
//....
var bridge: RCTBridge! // THIS IS ALWAYS NIL
//....
#objc func requestBluetoothState() -> Void {
print("REQUEST BLE STATE")
let ret = [
"enabled" : true
]
//THIS LINE WILL FAIL BECAUSE bridge IS NIL
self.bridge.eventDispatcher().sendDeviceEvent(withName: "BluetoothStateEvent", body: ret)
}
}
BluetoothModuleBridge.m
#import <React/RCTBridgeModule.h>
#interface RCT_EXTERN_MODULE(BLEScanner, NSObject)
RCT_EXTERN_METHOD(requestBluetoothState)
#end
Module-Practive-Bridging-Header.h
// BluetoothModule-Bridging-Header.h
#import <React/RCTBridge.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTRootView.h>
#import <React/RCTUtils.h>
#import <React/RCTConvert.h>
#import "AppDelegate.h"
#import "BugsnagReactNative/BugsnagReactNative.h"
#import "nokeLockSDK.h"
#import "nokeServerSDK.h"
#import "TI_aes_128.h"
What I have Tried
Updated React Native from 0.36 to 0.50.3
Tried running on multiple devices
Tried on older version of XCode
Tried compiling on different machine
Compared to a similar app that works and uses this same design.
I am very confused as to why the RCTBridge is returning as nil. It seems odd to me that an XCode update would cause this, however, it is the only change made.
Can anyone point me in the right direction in debugging this issue?
I am using XCode 9.1 and React Native 0.50.3
You do not have to subclass RCTEventEmitter. Just add the #objc attribute. So the variable should be #objc var bridge: RCTBridge!
Do you have your own initial method? If so try remove it. After my test, it has no problem.
And it is recommended to Subclass RCTEventEmitter instead.
If you upgraded to 9.1 and also React Native to 50.x from 30.x at the same time, you could have wrong imports, as that is something that changed around version 40.
It should be
#import <React/RCTBridgeModule.h>
If you don't want to subclass RCTEventEmitter, implement protocol RCTBridgeModule in your BLEScanner.
That will solve the problem.
Related
My goal is to be able to upload images to firebase, but my project cant read the storage library from '#react-native-firebase/storage' I believe the issue is in my AppDelegate, because it won't configure FIREApp. I am using React Native and I know they changed how AppDelegate is written with React Native#0.68.0. All the stack overflow posts help solve this issue when AppDelegate is written in C but not C++. For instance, my AppDelegate has #if RCT_NEW_ARCH_ENABLED rather than FB_SONARKIT_ENABLED, which is used in the older React Native Version like React Native#0.68.0.
I believe this issue is relatively new because I don't think Firebase has compensated for the new way AppDelegate is written. Maybe I'm wrong and y'all know something I don't. I have checked the FireBase GitHub repo, but still, nothing helped. I haven't coded in C++ or C in a couple of years and I am relatively new to the world of App Development. If anyone could help that would be greatly appreciated.
Also I'm 99% sure I installed Firebase storage and app correctly.
https://rnfirebase.io/
AppDelegate.mm (C++)
...
#import <React/RCTAppSetupUtils.h>
#if RCT_NEW_ARCH_ENABLED
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTFabricSurfaceHostingProxyRootView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>
#import <react/config/ReactNativeConfig.h>
#import <Firebase.h>
static NSString *const kRNConcurrentRoot = #"concurrentRoot";
#interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
RCTTurboModuleManager *_turboModuleManager;
RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
facebook::react::ContextContainer::Shared _contextContainer;
}
#end
#endif
#implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[FIRApp configure]; ///ERROR: Use of undeclared identifier 'FIREAPP'
RCTAppSetupPrepareApp(application);
...
I switched to #react-native-firebase/app#14.11.1 and everything worked perfectly.
I am new to building modules in react native and trying to build a native module with react native module, for some reason I get. I have googled online and it says just add the imports to your bridging file to expose object-c code to swift but seems its not happening for me. not sure if i missed something or i am missing something.
cannot find type 'RCTPromiseRejectBlock' in scope
cannot find type 'RCTPromiseResolveBlock' in scope
I included <React/RCTBridgeModule.h> in my AppName-Bridging-Header.m file but still same result, i have removed all node_modules, podfile and rebuild and still same problem.
# App-Bridging-Header.m
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>
#import <React/RCTConvert.h>
ModuleFile.m
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTConvert.h>
#interface RCT_EXTERN_MODULE(Vgas, NSObject)
RCT_EXTERN_METHOD(multiply:(float)a withB:(float)b
withResolver:(RCTPromiseResolveBlock)resolve
withRejecter:(RCTPromiseRejectBlock)reject)
#end
#swift file
import Foundation
#objc(Vgas)
class Vgas: NSObject {
#objc(multiply:withB:withResolver:withRejecter:)
func multiply(a: Float, b: Float, resolve:RCTPromiseResolveBlock,reject:RCTPromiseRejectBlock) -> Void {
resolve(a*b)
}
}
I am developing a new feature for a react native module (https://github.com/blackuy/react-native-twilio-video-webrtc) the thing is it is developed in Objective-C and I need to import a new Swift class.
What I've done so far:
Importing it with the name of the package, in this case #import <RNTwilioVideoWebRTC/RNTwilioVideoWebRTC-Swift.h>
Ensuring that Precompile Bridging Header is set to Yes
Setting Objective-C Generated Interface Header Name as RNTwilioVideoWebRTC-Swift.h
The problem is then i try to run the example app inside the module, it prompts an error RNTwilioVideoWebRTC/RNTwilioVideoWebRTC-Swift.h file not found
What am I missing? Thanks!
There are a few things to make sure that:
Check whether the bridging file is available in your project or not. If available, make sure that you have imported YourProductName-Swift.h in your bridge file. And if not, please create a bridge file.
Mark the class & methods with #objc to make them accessible in your Objective C code.
You can follow this answer for reference.
Archiving will be successful already tested
How to call a swift function (that could be in a swift framework also) in objective c project or react native project
it will work for react-native also
follow these steps :
Open Build Settings and check these parameters:
Defines Module : YES
in AppDelegate.h
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#class KB;
#interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
#property (strong, nonatomic) KB *appkb;
#end
in AppDelegate.m
#import "AppDelegate.h"
#import "ProductModuleName-Swift.h"
#implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[self.appkb methodReceiveSwiftClass];
[self.appkb methodEvents:event prop:properties];
}
#end
KB.swift
import Foundation
// import framework if using a swift framework in objective c or react native native modules.
#objc public class KB:NSObject{
#objc public func methodReceiveSwiftClass(){
//write anything here....
}
#objc public func methodEvents(_ event: String, prop: String){
//write anything here
//func with params
}
}
ProjectModuleName-Bridging-Header.h
#import "React/RCTBridgeModule.h"
#import "AppDelegate.h"
In my react native project, I try to expose a swift function to the javascript code. It works well in debug mode, but when trying to archiving I get a Use of undeclared type RCTEventEmitter error on my swift file.
The RCTEventEmitter is imported in my RNUtils.m file, and in the bridging header.
So I guess somewhere in the archiving, something fail with the bridging header, but I have no idea where.
If I ask for a non existing import, it will tell me that it can't compile the bridging header, so the file is taken into account during the build.
// Utils.m
#import "React/RCTBridgeModule.h"
#import "React/RCTConvert.h"
#import "React/RCTEventEmitter.h"
#interface RCT_EXTERN_REMAP_MODULE(RNUtils, RNUtils, RCTEventEmitter)
#end
// Utils.swift
import Foundation
#objc(RNUtils)
class RNUtils: RCTEventEmitter {
// my native code emitting events
}
// MyApp-Bridging-header.h
#ifndef MyApp_Bridging_Header_h
#define MyApp_Bridging_Header_h
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#endif
react-native 0.61.5
xcode 11.5
Swift 5
It appears I needed to add ìmport React` in every swift file. It's archiving fine now.
I am trying to learn how to build a react-native module. I followed a tutorial and I am getting stuck on the splash screen. I also get this error when I try to run my app:
Thread 1: signal SIGABRT
I have not modified any of the code in index.ios.js but I have created and two files:
GifMaker.h
#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"
#interface GifMaker : NSObject
#end
GifMaker.m
#import "GifMaker.h"
#import "React/RCTLog.h"
#implementation GifMaker
// This RCT (React) "macro" exposes the current module to JavaScript
RCT_EXPORT_MODULE();
// We must explicitly expose methods otherwise JavaScript can't access anything
RCT_EXPORT_METHOD(get)
{
RCTLogInfo(#"Hello There!");
}
#end
I found a solution, I used react-native-create-library to create the .h and .m files and then just copied those into my project.