diff --git a/releases/next/docs/native-modules-ios.html b/releases/next/docs/native-modules-ios.html
index 9586c910223..bc2be48686e 100644
--- a/releases/next/docs/native-modules-ios.html
+++ b/releases/next/docs/native-modules-ios.html
@@ -111,29 +111,65 @@ RCTRootView *rootView };
RCT_EXPORT_METHOD(updateStatusBarAnimation:(UIStatusBarAnimation)animation
- completion:(RCTResponseSenderBlock)callback)Your enum will then be automatically unwrapped using the selector provided (integerValue in the above example) before being passed to your exported method.
Sending Events to JavaScript #
The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use eventDispatcher:
#import <React/RCTBridge.h>
-#import <React/RCTEventDispatcher.h>
+ completion:(RCTResponseSenderBlock)callback)
Your enum will then be automatically unwrapped using the selector provided (integerValue in the above example) before being passed to your exported method.
Sending Events to JavaScript #
The native module can signal events to JavaScript without being invoked directly. The preferred way to do this is to subclass RCTEventEmitter, implement suppportEvents and call self sendEventWithName:
#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+@interface CalendarManager : RCTEventEmitter <RCTBridgeModule>
+
+@end
#import "CalendarManager.h"
@implementation CalendarManager
-@synthesize bridge = _bridge;
+RCT_EXPORT_MODULE();
+
+- (NSArray<NSString *> *)supportedEvents
+{
+ return @[@"EventReminder"];
+}
- (void)calendarEventReminderReceived:(NSNotification *)notification
{
NSString *eventName = notification.userInfo[@"name"];
- [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
- body:@{@"name": eventName}];
+ [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}
-@end
JavaScript code can subscribe to these events:
import { NativeAppEventEmitter } from 'react-native';
+@end
JavaScript code can subscribe to these events by creating a new NativeEventEmitter instance around your module.
import { NativeEventEmitter, NativeModules } from 'react-native';
+const { CalendarManager } = NativeModules;
-var subscription = NativeAppEventEmitter.addListener(
+const calendarManagerEmitter = new NativeEventEmitter(CalendarManager);
+
+const subscription = calendarManagerEmitter.addListener(
'EventReminder',
(reminder) => console.log(reminder.name)
);
...subscription.remove();
For more examples of sending events to JavaScript, see RCTLocationObserver.
Exporting Swift #
Swift doesn't have support for macros so exposing it to React Native requires a bit more setup but works relatively the same.
Let's say we have the same CalendarManager but as a Swift class:
subscription.remove();
For more examples of sending events to JavaScript, see RCTLocationObserver.
Optimizing for zero listeners #
You will receive a warning if you expend resources unnecessarily by emitting an event while there are no listeners. To avoid this, and to optimize your module's workload (e.g. by unsubscribing from upstream notifications or pausing background tasks), you can override startObserving and stopObserving in your RCTEventEmitter subclass.
@implementation CalendarManager
+{
+ bool hasListeners;
+}
+-(void)startObserving {
+ hasListeners = YES;
+ }
+-(void)stopObserving {
+ hasListeners = NO;
+ }
+
+- (void)calendarEventReminderReceived:(NSNotification *)notification
+{
+ NSString *eventName = notification.userInfo[@"name"];
+ if (hasListeners) { [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
+ }
+}
Exporting Swift #
Swift doesn't have support for macros so exposing it to React Native requires a bit more setup but works relatively the same.
Let's say we have the same CalendarManager but as a Swift class:
@objc(CalendarManager)
class CalendarManager: NSObject {