Jacob Patenaude Jacob Patenaude - 1 year ago 176
iOS Question

Listening for events in react native ios

I cannot for the life of me get an event to properly send from iOS native across the bridge to the react native JS context. On the Objective-C side I want to have a module to easily send events across the bridge. I have called this class EventEmitter and its definition is as follows:

// EventEmitter.h

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"

@interface EventEmitter : NSObject<RCTBridgeModule>

- (void)emitEvent:(NSString *) eventName withData:(id) eventData;


and the implementation:

// EventEmitter.m

#import "EventEmitter.h"

@implementation EventEmitter


@synthesize bridge = _bridge;

- (void)emitEvent:(NSString *) eventName withData:(id) eventData
NSLog( @"emitting %@ with data %@", eventName, [eventData description] );
[[_bridge eventDispatcher] sendDeviceEventWithName:eventName body:eventData];
[[_bridge eventDispatcher] sendAppEventWithName:eventName body:eventData];


I'm using both sendDeviceEvent and sendAppEvent because I can't get either to work.

On the JS side of things I register to receive these events in the global namespace of one of my modules (so that I know the event subscription will happen before the event is emitted). I register like this:

console.log( 'ADDING EVENT LISTENERS' );
NativeAppEventEmitter.addListener( 'blah', test => console.log( 'TEST1', test ) );
DeviceEventEmitter.addListener( 'blah', test => console.log( 'TEST2', test ) );

In my log statements I get the following:

2016-03-19 12:26:42.501 [trace][tid:com.facebook.React.JavaScript] ADDING EVENT LISTENERS
2016-03-19 12:26:43.613 [name redacted][348:38737] emitting blah with data [data redacted]

So I can tell that I am sending both an app event and a device event with the tag blah and I have registered to listen for the blah event with both the DeviceEventEmitter and NativeAppEventEmitters but I'm not getting called back in the listeners.

What am I doing wrong?? Thanks for reading!

Answer Source

I've tried dispatching events and it seems bridge is not initialised when you create new EventEmitter instances manually by using [EventEmitter alloc] init]

You should let react-native create instances. I checked native components and they're using -(void)setBridge:(RCTBridge *)bridge method to do initialisation work. Please check out RCTLinkingManager to see an example. It's using NSNotificationCenter to handle events.

// registering for RCTOpenURLNotification evet when the module is initialised with a bridge
- (void)setBridge:(RCTBridge *)bridge
  _bridge = bridge;

  [[NSNotificationCenter defaultCenter] addObserver:self

// emitting openURL event to javascript
- (void)handleOpenURLNotification:(NSNotification *)notification
  [_bridge.eventDispatcher sendDeviceEventWithName:@"openURL"

// creating RCTOpenURLNotification event to invoke handleOpenURLNotification method
+ (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)URL
  sourceApplication:(NSString *)sourceApplication
  NSDictionary<NSString *, id> *payload = @{@"url": URL.absoluteString};
  [[NSNotificationCenter defaultCenter] postNotificationName:RCTOpenURLNotification
  return YES;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download