Skip to content
Invoke functions between React Native and WebView directly
JavaScript HTML Objective-C Python Java
Branch: master
Clone or download
Latest commit 00eea16 Jun 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode update build tools Apr 13, 2019
dev fix example issues : bind functions and use static html Jun 6, 2019
dist fix android listener Jun 11, 2019
src fix android listener Jun 11, 2019
.gitignore add event bus to get sender Jan 13, 2017
.npmignore done Nov 25, 2016
LICENSE init build scripts Nov 24, 2016
README.md update readme May 16, 2019
browser.d.ts fix declare Jan 26, 2017
browser.js fix import error Apr 17, 2019
factory.d.ts update declear Apr 13, 2019
factory.js fix import error Apr 17, 2019
index.js add index Nov 30, 2016
native.d.ts fix declare Jan 25, 2017
native.js error Dec 13, 2016
package.json 0.5.1 Jun 11, 2019
rollup.config.js update build tools Apr 13, 2019

README.md

react-native-webview-invoke

中文文档

npm version

Invoke functions between React Native and WebView directly

react-native-webview-bridge Support

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)

rnwm

Installation

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

Requires:

  • React Native >= 0.37

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} />
You can’t perform that action at this time.