To send data from native iOS Swift to React Native, you can use event emitters. Here’s how to set it up:
- First, create a native module in Swift that will emit events:
import Foundation
@objc(EventEmitterModule)
class EventEmitterModule: RCTEventEmitter {
// Required override to specify supported events
@objc override func supportedEvents() -> [String] {
return ["onDataReceived"]
}
// Method that sends data to React Native
@objc func sendDataToReactNative(_ data: [String: Any]) {
self.sendEvent(withName: "onDataReceived", body: data)
}
// Required override (you can leave empty if not using timers)
@objc override func constantsToExport() -> [AnyHashable : Any]! {
return [:]
}
// Required if using timers
@objc override static func requiresMainQueueSetup() -> Bool {
return false
}
}
- Create a bridge file to expose the module to React Native:
import Foundation
@objc(EventEmitterModule)
class EventEmitterModuleBridge: NSObject {
@objc
static func moduleName() -> String! {
return "EventEmitterModule"
}
@objc
static func requiresMainQueueSetup() -> Bool {
return false
}
}
- Register the module in an Objective-C implementation file:
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
@interface RCT_EXTERN_MODULE(EventEmitterModule, RCTEventEmitter)
// Expose any methods that you want to call from JavaScript
RCT_EXTERN_METHOD(supportedEvents)
@end
- In your React Native JavaScript code, set up a listener:
import { NativeModules, NativeEventEmitter } from 'react-native';
// Set up the event emitter
const eventEmitter = new NativeEventEmitter(NativeModules.EventEmitterModule);
// Add a listener for the event
const subscription = eventEmitter.addListener('onDataReceived', (data) => {
console.log('Received data from native code:', data);
// Process your data here
});
// Don't forget to remove the listener when component unmounts
// subscription.remove();
- To send data from anywhere in your Swift code:
// Get reference to the module
guard let eventEmitterModule = RCTBridge.shared().moduleForClass(EventEmitterModule.self) as? EventEmitterModule else {
return
}
// Send data
let dataToSend: [String: Any] = [
"message": "Hello from Swift!",
"timestamp": Date().timeIntervalSince1970,
"value": 42
]
eventEmitterModule.sendDataToReactNative(dataToSend)
This setup allows you to push data from native Swift code to your React Native application whenever needed, which is useful for handling native events, callbacks from APIs, or any asynchronous operations.