WebviewJavascriptBridge for React Native

WebviewJavascriptBridge implemented on react-native-webview

The code logic comes from the WebviewJavascriptBridge. It is fully implemented by JS. In theory, it supports the platform supported by react-native-webview.

iOS (Tested)
Android (Tested)
MacOS (Tested)
Windows (Not tested)

Usage reference

https://github.com/marcuswestin/WebViewJavascriptBridge#usage

Install

In the React Native project：

npm i react-native-webviewjavascriptbridge

in the Web project：

npm i webview-javascript-bridge-promised

Or add code to a Web project：

function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
  if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'https://__bridge_loaded__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

Method registration and call

In React Native：

  import WebViewJavascriptBridge from 'react-native-webviewjavascriptbridge';
  
  render() {
    return (
      <WebViewJavascriptBridge ref="bridge"/>
    )
  }
  
  //register
  registerRNApi() {
    this.refs.bridge.registerHandler('rn_method_1',(params, responseCallback) => {
      console.log('call rn_method_1 from web',params);
      responseCallback('success');
    });
  }
  
  //call
  callWebApi() {
    this.refs.bridge.callHandler('web_method_1',{'key':'value'},(res) => {
      console.log('call web_method_1 resp:',res);
    });
  }

In Web：

Using webview-javascript-bridge-promised：

var bridge = require('webview-javascript-bridge-promised')

//register
bridge.registerHandler('web_method_1',(params, responseCallback) => {
    console.log('call web_method_1 from RN',params);
    responseCallback('success');
});

//call
  bridge.callHandler('rn_method_1',{'key':'value'},(res) => {
      console.log('call rn_method_1 resp:',res);
  });

Using add code setupWebViewJavascriptBridge(callback):

setupWebViewJavascriptBridge(function(bridge) {

  /* Initialize your app here */

  bridge.registerHandler('web_method_1', function(data, responseCallback) {
    console.log("JS Echo called with:", data)
    responseCallback(data)
  })
  bridge.callHandler('rn_method_1', {'key':'value'}, function responseCallback(responseData) {
    console.log("JS received response:", responseData)
  })
})

Props

protocolScheme

Message transfer protocol Scheme

Default:wvjbscheme Invalid on Android when using https or http

Compatible with WebViewJavaScriptBridge project. It can be customized and needs to be modified synchronously with the web.
bridgeName

Bridge Name

Default:WebViewJavascriptBridge

Compatible with WebViewJavaScriptBridge project. It can be customized and needs to be modified synchronously with the web.

callbacksName

callbacks Name

Default:WVJBCallbacks

Compatible with WebViewJavaScriptBridge project. It can be customized and needs to be modified synchronously with the web.

Example：

  //RN
  render() {
    return (
      <WebViewJavascriptBridge ref="bridge" 
                               protocolScheme="rnapi" 
                               bridgeName="rnbridge" 
                               callbacksName="rncallbacks"
      />
    )
  } 

  //Web,set before require('webview-javascript-bridge-promised')
  window.WebViewJavascriptProtocolScheme = "rnapi"
  window.WebViewJavascriptBridgeName = "rnbridge"
  window.WebViewJavascriptCallbacksName = "rncallbacks"

supportReactNativeApis

Default : true

React Native API has been implemented:
- Alert
- Appearance
- AppState
- DevSettings
- Dimensions
- Keyboard
- Linking
- PixelRatio
- Share
- Vibration
Compoment:
- StatusBar Constants & Static Method
In addition:
- Platform
- DeviceEventEmitter
When calling RN API in Web, it is the same as RN calling, RN API is window.ReactNativeWebView Called in this global variable.
```
  window.ReactNativeWebView.Alert.alert("title","message",[{
      text : "OK",
      onPress : () => {
        console.log('OK');
      }
    },{
      text : "Cancel",
      style : "cancel",
      onPress : () => {
        console.log('cancel');
      }
    }],{});
```
Warning

Calling RN API in Web needs to called after the page is loaded, Example:

(~~Occasionally, there will be uninitialized situations on Android, which need to be solved. It is recommended to call RN API with the promised safely method.~~)
```
useEffect(() => {
  window.ReactNativeWebView.Alert.alert()
});

componentDidMount() {
  window.ReactNativeWebView.Alert.alert()
}
```
If you want to call the RN API safely anywhere, use:
```
var bridge = require('webview-javascript-bridge-promised')
bridge.promised().then(() => {
  window.ReactNativeWebView.Alert.alert()
})
```

zeasy / react-native-WebViewJavascriptBridge