react-native-webview-comlink

react-native-webview-comlink brings addJavascriptInterface to react-native-webview, supports both Android and iOS. Its implemention is inspired by the Comlink project.

Install

• Install the package: npm i --save react-native-webview-comlink

Usage

Native

import{WebView}from'react-native-webview';import{withJavascriptInterface,Remote}from'react-native-webview-comlink';// it's not necessary but recommended to put the interface definition at some common// place to share it between native and web projects if you use TypeScriptimport{MyJSInterface}from'./common/types';// root api object for web side to callconstrootObj: MyJSInterface={someMethod(){console.warn('someMethod called');return42;},someMethodWithCallbackSupport(cb: Remote<(msg: string)=>void>){cb('invoke callback from native');// release the callback, so it can be garbage collected at the web side.// callbacks maintain reference count inside, each time we got a callback instance// from the method argument, there should be a corresponding release() call when it// is no longer needed.// this can be safely skipped if FinalizationRegistry and WeakRef is supported at// native Javascript runtime.// however, since GC timing is unpredictable, it's still recommended to handle the// release() manually to get a lower memory footprint at the web side. (and avoids// possible lagging if lots of proxied method being cleaned up during GC - which causes// the same amount of messages being sent to web side)cb.release();},};constWebViewComponent=withJavascriptInterface(rootObj,'MyJSInterface')(WebView);// render web page with the <WebViewComponent />

Web

import{JavascriptInterface}from'react-native-webview-comlink';import{MyJSInterface}from'./common/types';declare global {interfaceWindow{MyJSInterface: JavascriptInterface<MyJSInterface>;}}// call native side methodMyJSInterface.someMethod().then((result)=>{console.log(result);});// callbacks are supportedMyJSInterface.someMethodWithCallbackSupport((msg)=>{console.log(msg);});

Examples

There are example React Native project and Web project(React) in examples directory

API

Native

withJavascriptInterface(obj, name, options)(WebView)

Returns a higher-order React WebView component class that has obj exposed as name.

• [options] (Object): if specified, customized the behavior of the higher-order WebView component.
  • [whitelistURLs] (String or RegExp Array): white list urls where the JavascriptInterface enabled, default is null
  • [isEnabled] (Function): for gain more control on enable or disable status besides whitelistURLs, it gets called in sending and receiving each message, returns true to let the message pass, default is null
  • [forwardRef] (Boolean): forward ref to the wrapped WebView component, default is false
  • [log] (Boolean): print debug log to console, default is false

// you may add multiple javascript interface by nest the `withJavascriptInterface` call, e.g. following code adds both `MyAPI` and `MyAPI2` to web page
withJavascriptInterface(apiObj2, 'MyAPI2')(withJavascriptInterface(apiObj, 'MyAPI')(WebView))

Web

Just call JavascriptInterface methods on window.name.

Compatibility

• Android 5+
• iOS 10+