React Native WebView Javascript Bridge

I have been testing and reading a lot of way to safely create a bridge between react-native and webview. I'm happy to announced that the wait is over and from React-Native 0.20 and above, the bridge is fully functional.

Installation

In order to use this extension, you have to do the following steps:

in your react-native project, run npm install react-native-webview-bridge

iOS

1. go to xcode's Project Navigator tab

2. right click on `Libraries` 3. select `Add Files to ...` option

4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder

5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`

6. expand `Link Binary With Libraries` and click `+` sign to add a new one. 7. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button.

8. clean compile to make sure your project can compile and build.

Android (Beta)

1. add the following import to MainActivity.java of your application

import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;

2. add the following code to add the package to MainActivity.java

mReactInstanceManager = ReactInstanceManager.builder()
        ...
        .addPackage(new WebViewBridgePackage())
        ...

3. add the following codes to your android/setting.gradle

you might have multiple 3rd party libraries, make sure that you don't create multiple include.

include ':app', ':react-native-webview-bridge'
project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')

4. edit android/app/build.gradle and add the following line inside dependencies

compile project(':react-native-webview-bridge')

5. run react-native run-android to see if everything is compilable.

Usage

just import the module with one of your choices way:

** CommonJS style **

var WebViewBridge = require('react-native-webview-bridge');

** ES6/ES2015 style **

import WebViewBridge from 'react-native-webview-bridge';

WebViewBridge is an extension of WebView. It injects special script into any pages once it loads. Also it extends the functionality of WebView by adding 1 new method and 1 new props.

sendToBridge(message)

the message must be in string. because this is the only way to send data back and forth between native and webview.

onBridgeMessage

this is a prop that needs to be a function. it will be called once a message is received from webview. The type of received message is also in string.

Bridge Script

bridge script is a special script which injects into all the webview. It automatically register a global variable called WebViewBridge. It has 2 optional methods to implement and one method to send message to native side.

send(message)

this method sends a message to native side. the message must be in string type or onError method will be called.

onMessage

this method needs to be implemented. it will be called once a message arrives from native side. The type of message is in string.

onError (iOS only)

this is an error reporting method. It will be called if there is an error happens during sending a message. It receives a error message in string type.

Notes

a special bridge script will be injected once the page is going to different URL. So you don't have to manage when it needs to be injected.

You can still pass your own javascript to be injected into webview. However, Bridge script will be injected first and then your custom script.

Simple Example

This example can be found in examples folder.

const injectScript = `
  function webViewBridgeReady(cb) {
    //checks whether WebViewBirdge exists in global scope.
    if (window.WebViewBridge) {
      cb(window.WebViewBridge);
      return;
    }

    function handler() {
      //remove the handler from listener since we don't need it anymore
      document.removeEventListener('WebViewBridge', handler, false);
      //pass the WebViewBridge object to the callback
      cb(window.WebViewBridge);
    }

    //if WebViewBridge doesn't exist in global scope attach itself to document
    //event system. Once the code is being injected by extension, the handler will
    //be called.
    document.addEventListener('WebViewBridge', handler, false);
  }

  webViewBridgeReady(function (webViewBridge) {
    webViewBridge.onMessage = function (message) {
      alert('got a message from Native: ' + message);

      webViewBridge.send("message from webview");
    };
  });
`;

var Sample2 = React.createClass({
  componentDidMount() {
    setTimeout(() => {
      this.refs.webviewbridge.sendToBridge("hahaha");
    }, 5000);
  },
  onBridgeMessage: function (message) {
    console.log(message);
  },
  render: function() {
    return (
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage}
        injectedJavaScript={injectScript}
        source={{uri: "http://google.com"}}/>
    );
  }
});