javac++objective-creact-nativereact-native-turbomodule

How to emit event in a Turbo Module on iOS


I'm following the guide here to create a Turbo Module in React Native. https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules

How do you emit events on iOS? The documentation only shows how to call a native function from React, but not how to emit an event from the Turbo Module.

For Android, you get a ReactApplicationContext object, which lets you create an emitter like this using the context object.

private val emitter = context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
emitter.emit(eventName, eventArray)

How do you do the same thing on iOS?


Solution

  • To emit events to RN from iOS you should make your own emitter class that is inherited from RCTEventEmitter and then init it on JS side with NativeEventEmitter and add listeners for needed events with addListener:

    EventEmitter.h

    #import <React/RCTEventEmitter.h>
    
    @interface EventEmitter : RCTEventEmitter
    
    + (instancetype)shared;
    
    @end
    

    EventEmitter.m

    #import "EventEmitter.h"
    
    // Events
    static NSString* onMyEvent = @"onMyEvent";
    
    // Variable to save the instance
    static EventEmitter* eventEmitter = nil;
    
    @implementation EventEmitter
    
    /// Exposing "EventEmitter" name to RN
    RCT_EXPORT_MODULE(EventEmitter);
    
    // Called from RN
    - (instancetype)init {
      if (self = [super init]) {
        eventEmitter = self;
      }
      return self;
    }
    
    + (BOOL)requiresMainQueueSetup {
        return NO;
    }
    
    + (instancetype)shared {
      return eventEmitter;
    }
    
    // List of supported events
    - (NSArray<NSString *> *)supportedEvents {
      return @[onMyEvent];
    }
    
    @end
    

    How to call:

    NSDictionary* body = @{@"message" : @"Hello Emitter!"};
    [EventEmitter.shared sendEventWithName:@"onMyEvent" body:body];
    

    RN/JS

    
    import {
      ...
      NativeEventEmitter,
      NativeModules,
    } from 'react-native';
    import type EmitterSubscription from 'react-native';
    
    class EventHandler extends React.Component {
      eventsSubscription: EmitterSubscription;
    
      componentDidMount() {
        const eventEmitter = new NativeEventEmitter(NativeModules.EventEmitter);
    
        this.eventsSubscription = eventEmitter.addListener('onMyEvent', event => {
          console.log(event.message); // Prints "Hello Emitter!"
        });
      }
    
      componentWillUnmount() {
        this.eventsSubscription.remove();
      }
    
      ...
    };