Passing Data from Swift to React Native Using Event Emitters

To share data between your Swift native code and React Native JavaScript, you’ll need to use the React Native event emitter system. This creates a communication bridge between the native and JavaScript layers. Let me walk you through the process step by step.

Setting Up the Native Module in Swift

First, you need to create a native module that will emit events to your React Native code:

// RCTEventEmitter.h must be imported
import Foundation

@objc(DataEmitter)
class DataEmitter: RCTEventEmitter {
  
  // Override this method to specify the events this module can emit
  override func supportedEvents() -> [String]! {
    return ["onDataReceived", "onDataProcessed"]
  }
  
  // Method to send data to React Native
  @objc func sendDataToReactNative(_ data: [String: Any]) {
    // Send the event with the data
    self.sendEvent(withName: "onDataReceived", body: data)
  }
  
  // Required override (even if empty) for RCTEventEmitter
  override func constantsToExport() -> [AnyHashable : Any]! {
    return [:]
  }
  
  // Required - informs if there are listeners for optimization
  override static func requiresMainQueueSetup() -> Bool {
    return false
  }
}

Creating the Native Module Bridge

Next, you need to register this module with React Native by creating a bridge file:

// DataEmitterBridge.m
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

@interface RCT_EXTERN_MODULE(DataEmitter, RCTEventEmitter)
// If you need methods callable from JS, define them here
RCT_EXTERN_METHOD(sendDataToReactNative:(NSDictionary *)data)
@end

Emitting Events from Your Swift Code

You can now emit events from anywhere in your Swift code by accessing the module:

// In your Swift code (e.g., AppDelegate or a view controller)
func sendSomeDataToReactNative() {
  // Get reference to the module
  let dataEmitter = RCTBridge.shared().moduleForClass(DataEmitter.self) as! DataEmitter
  
  // Prepare the data you want to send
  let dataToSend: [String: Any] = [
    "id": 123,
    "name": "Device Reading",
    "value": 98.6,
    "timestamp": Date().timeIntervalSince1970
  ]
  
  // Send the data via the emitter
  dataEmitter.sendDataToReactNative(dataToSend)
}

Listening for Events in React Native

Finally, in your React Native JavaScript code, you’ll need to set up listeners for these events:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { NativeEventEmitter, NativeModules } from 'react-native';

const App = () => {
  useEffect(() => {
    // Get reference to our native module
    const { DataEmitter } = NativeModules;
    
    // Create event emitter from the module
    const eventEmitter = new NativeEventEmitter(DataEmitter);
    
    // Set up the event listener
    const subscription = eventEmitter.addListener(
      'onDataReceived',
      (data) => {
        console.log('Received data from Swift:', data);
        // Process the data as needed
        // data.id, data.name, data.value, etc. are accessible here
      }
    );
    
    // Clean up the subscription when component unmounts
    return () => {
      subscription.remove();
    };
  }, []);
  
  return (
    <View>
      <Text>Listening for Swift data...</Text>
    </View>
  );
};

export default App;

Common Challenges and Solutions

1. Handling Complex Data Structures

When passing complex objects from Swift to React Native, remember that only JSON-serializable data can cross the bridge. This means:

• Basic types work well (String, Number, Boolean)
• Arrays and dictionaries of basic types work
• Custom objects need to be converted to dictionaries
• Dates need to be converted (usually to timestamps)

2. Performance Considerations

For high-frequency data updates (like sensor readings):

// Batch updates instead of sending each reading
var readings: [[String: Any]] = []

// After collecting multiple readings
func sendBatchedReadings() {
  dataEmitter.sendEvent(withName: "onDataBatch", body: ["readings": readings])
  readings = [] // Clear after sending
}

3. Debugging Emitter Communication

If you’re having trouble with the event emitter, add these debugging helpers:

// In your Swift emitter
@objc func getListenerCount(_ callback: RCTResponseSenderBlock) {
  let count = self.bridge?.eventDispatcher().observerCount(forEventType: "onDataReceived") ?? 0
  callback([count])
}

In your JavaScript:

// Check if listeners are registered properly
DataEmitter.getListenerCount((count) => {
  console.log(`Number of active listeners: ${count}`);
});

Testing Your Implementation

Create a simple test function in Swift that triggers data emission on a button press:

@objc func testEmitter() {
  let testData: [String: Any] = [
    "message": "Test from Swift",
    "timestamp": Date().timeIntervalSince1970
  ]
  
  self.sendEvent(withName: "onDataReceived", body: testData)
}

This comprehensive approach should enable reliable data communication from your Swift code to your React Native application. The key is understanding that the RCTEventEmitter creates a bridge that allows event-based communication across the JavaScript-native boundary.

Thanks for reading!