From dee5d0f3be46ddb7196ddf525734f3cb6a4d8fca Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Sun, 8 Jan 2017 02:21:21 +0000 Subject: [PATCH] Updated docs for next --- .../next/docs/native-modules-android.html | 4 ++- releases/next/docs/native-modules-ios.html | 14 ++++---- releases/next/docs/webview.html | 35 ++++++++++++++++++- 3 files changed, 44 insertions(+), 9 deletions(-) diff --git a/releases/next/docs/native-modules-android.html b/releases/next/docs/native-modules-android.html index 46f3d306384..b0c7b4f9d0e 100644 --- a/releases/next/docs/native-modules-android.html +++ b/releases/next/docs/native-modules-android.html @@ -57,7 +57,9 @@ ReadableArray - modules.add(new ToastModule(reactContext)); return modules; - }

The package needs to be provided in the getPackages method of the MainApplication.java file. This file exists under the android folder in your react-native application directory. The path to this file is: android/app/src/main/java/com/your-app-name/MainApplication.java.

protected List<ReactPackage> getPackages() { + } + +}

The package needs to be provided in the getPackages method of the MainApplication.java file. This file exists under the android folder in your react-native application directory. The path to this file is: android/app/src/main/java/com/your-app-name/MainApplication.java.

protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new AnExampleReactPackage()); // <-- Add this line with your package name. diff --git a/releases/next/docs/native-modules-ios.html b/releases/next/docs/native-modules-ios.html index 9b10d8a4b1e..9586c910223 100644 --- a/releases/next/docs/native-modules-ios.html +++ b/releases/next/docs/native-modules-ios.html @@ -1,5 +1,5 @@ Native Modules
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Native Modules #

Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).

iOS Calendar Module Example #

This guide will use the iOS Calendar API example. Let's say we would like to be able to access the iOS calendar from JavaScript.

A native module is just an Objective-C class that implements the RCTBridgeModule protocol. If you are wondering, RCT is an abbreviation of ReaCT.

// CalendarManager.h -#import "RCTBridgeModule.h" +#import <React/RCTBridgeModule.h> @interface CalendarManager : NSObject <RCTBridgeModule> @end

In addition to implementing the RCTBridgeModule protocol, your class must also include the RCT_EXPORT_MODULE() macro. This takes an optional argument that specifies the name that the module will be accessible as in your JavaScript code (more on this later). If you do not specify a name, the JavaScript module name will match the Objective-C class name.

// CalendarManager.m @@ -8,7 +8,7 @@ RCT_EXPORT_MODULE(); @end

React Native will not expose any methods of CalendarManager to JavaScript unless explicitly told to. This is done using the RCT_EXPORT_METHOD() macro:

#import "CalendarManager.h" -#import "RCTLog.h" +#import <React/RCTLog.h> @implementation CalendarManager @@ -28,7 +28,7 @@ CalendarManager.}

But by using the automatic type conversion feature, we can skip the manual conversion step completely, and just write:

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSDate *)date) { // Date is ready to use! -}

You would then call this from JavaScript by using either:

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime()); // passing date as number of seconds since Unix epoch

or

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.toISOString()); // passing date as ISO-8601 string

And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.

As CalendarManager.addEvent method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:

#import "RCTConvert.h" +}

You would then call this from JavaScript by using either:

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime()); // passing date as number of seconds since Unix epoch

or

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.toISOString()); // passing date as ISO-8601 string

And both values would get converted correctly to the native NSDate. A bad value, like an Array, would generate a helpful "RedBox" error message.

As CalendarManager.addEvent method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:

#import <React/RCTConvert.h> RCT_EXPORT_METHOD(addEvent:(NSString *)name details:(NSDictionary *)details) { @@ -111,8 +111,8 @@ 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 "RCTBridge.h" -#import "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 easiest way to do this is to use eventDispatcher:

#import <React/RCTBridge.h> +#import <React/RCTEventDispatcher.h> @implementation CalendarManager @@ -144,14 +144,14 @@ class CalendarManager} }

NOTE: It is important to use the @objc modifiers to ensure the class and functions are exported properly to the Objective-C runtime.

Then create a private implementation file that will register the required information with the React Native bridge:

// CalendarManagerBridge.m -#import "RCTBridgeModule.h" +#import <React/RCTBridgeModule.h> @interface RCT_EXTERN_MODULE(CalendarManager, NSObject) RCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)date) @end

For those of you new to Swift and Objective-C, whenever you mix the two languages in an iOS project, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode File>New File menu option. You will need to import RCTBridgeModule.h in this header file.

// CalendarManager-Bridging-Header.h -#import "RCTBridgeModule.h"

You can also use RCT_EXTERN_REMAP_MODULE and RCT_EXTERN_REMAP_METHOD to alter the JavaScript name of the module or methods you are exporting. For more information see RCTBridgeModule.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!