From d9543cbc234e18e7a41b3b14eb2ea6192fc83fd1 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 10 Jan 2017 00:47:55 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/native-modules-ios.html | 52 ++++++++++++++++++---- 1 file changed, 44 insertions(+), 8 deletions(-) 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:

// CalendarManager.h +#import <React/RCTBridgeModule.h> +#import <React/RCTEventEmitter.h> + +@interface CalendarManager : RCTEventEmitter <RCTBridgeModule> + +@end
// CalendarManager.m +#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) ); ... // Don't forget to unsubscribe, typically in componentWillUnmount -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:

// CalendarManager.swift +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; +} + +// Will be called when this module's first listener is added. +-(void)startObserving { + hasListeners = YES; + // Set up any upstream listeners or background tasks as necessary +} + +// Will be called when this module's last listener is removed, or on dealloc. +-(void)stopObserving { + hasListeners = NO; + // Remove upstream listeners, stop unnecessary background tasks +} + +- (void)calendarEventReminderReceived:(NSNotification *)notification +{ + NSString *eventName = notification.userInfo[@"name"]; + if (hasListeners) { // Only send events if anyone is listening + [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:

// CalendarManager.swift @objc(CalendarManager) class CalendarManager: NSObject {