Invoke functions between React Native and WebView directly

react-native-webview-invoke

Invoke functions between React Native and WebView directly

Just like:

// Side A
const answer = await ask(question) 

// Side B
function ask(question) { return 'I don\'t know' }

Before using like that, you should firstly define the function you want to expose.

// Side A
const ask = invoke.bind('ask')

// Side B
invoke.define('ask', ask)

Installation

$ npm install react-native-webview-invoke --save

Requires：

• React Native >= 0.37

Note: add 'useWebKit' property for rn > 0.59

Basic Usage

There are two sides: native and web.

React Native Side

Import

import createInvoke from 'react-native-webview-invoke/native'

Create invoke

class SomePage extends React.Component {
    webview: WebView
    invoke = createInvoke(() => this.webview)
    render() {
        // Note: add 'useWebKit' property for rn > 0.59
        return <Webview useWebKit
            ref={webview => this.webview = webview}
            onMessage={this.invoke.listener}
            source={require('./index.html')}
            />
    }
}

Now, we can start to expose functions for Web, and get the function from Web. (See Start to use)

Web Side

Import

import invoke from 'react-native-webview-invoke/browser'

Or use <script> in .html

<script src="./node_modules/react-native-webview-invoke/dist/browser.umd.js"></script>
<script>
var invoke = window.WebViewInvoke
</script>

Start to use

For better illumination, we define two sides named A and B. each of them can be React Native or Web, and if A is React Native, then B is Web.

Assume that there are some functions in A side.

function whatIsTheNameOfA() {
    return 'A'
}

function tellAYouArea(someone: string, prefix: string) {
    return 'Hi, ' + prefix + someone + '!'
}

Expose them for B side.

invoke
    .define('whatIsTheNameOfA', whatIsTheNameOfA)
    .define('tellAYouArea', tellAYouArea)

---

OK, Go to the B side:

Firstly, bind some functions which exposed from A.

const whatIsTheNameOfA = invoke.bind('whatIsTheNameOfA')
const tellAYouArea = invoke.bind('tellAYouArea')

Now, we can use them.

await whatIsTheNameOfA()
// 'A'
await tellAYouArea('B', 'Mr.')
// 'Hi, Mr.B'

In addition, you can use them without definition too.

await invoke.fn.whatIsTheNameOfA()
// 'A'
await invoke.fn.tellAYouArea('B', 'Mr.')
// 'Hi, Mr.B'

API

createInvoke(getWebViewInstance)

(RN only) create invoke with the Webview instance.

Args:

• getWebViewInstance [() => React.WebView] getter for Webview instance

Return:

• invoke [invoke] invoke object

invoke.define(name, fn)

expose function to another side.

Args:

• name [string] function name
• fn [Function]

invoke.bind(name)

get function from another side

Args:

• name [string] function name

Return:

[(...args: any[]) => Promise<any>] function

invoke.fn

All functions that defined at the other side

Usage

// A side
invoke.define('test', test)

// B side
invoke.fn.test()

invoke.listener

(RN only) the handler for the onMessage property of WebView element.

Usage:

<WebView onMessage={invoke.listener} />

GitHub