react-native-webview-comlink Node.js CI

Install

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 TypeScript
import { MyJSInterface } from './common/types';
// root api object for web side to call
const rootObj: MyJSInterface = {
 someMethod() {
 console.warn('someMethod called');
 return 42;
 },
 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();
 },
};
const WebViewComponent = 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 {
 interface Window {
 MyJSInterface: JavascriptInterface<MyJSInterface>;
 }
}
// call native side method
MyJSInterface.someMethod().then((result) => {
 console.log(result);
});
// callbacks are supported
MyJSInterface.someMethodWithCallbackSupport((msg) => {
 console.log(msg);
});

Examples

API

Native

withJavascriptInterface(obj, name, options)(WebView)

// 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

Compatibility