follow ui component event pattern to dispatch webview messages to RN

Author: hmedney

android/src/main/java/com/github/alinz/reactnativewebviewbridge/JavascriptBridge.java

@@ -1,24 +1,29 @@
 package com.github.alinz.reactnativewebviewbridge;
 
 import android.webkit.JavascriptInterface;
+import android.webkit.WebView;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 class JavascriptBridge {
-  private ReactContext context;
+    private WebView webView;
 
-  public JavascriptBridge(ReactContext context) {
-    this.context = context;
-  }
+    public JavascriptBridge(WebView webView) {
+        this.webView = webView;
+    }
 
-  @JavascriptInterface
-  public void send(String message) {
-    WritableMap params = Arguments.createMap();
-    params.putString("message", message);
-    context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-            .emit("webViewBridgeMessage", params);
-  }
-}
+    @JavascriptInterface
+    public void send(String message) {
+        WritableMap event = Arguments.createMap();
+        event.putString("message", message);
+        ReactContext reactContext = (ReactContext) this.webView.getContext();
+        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
+                this.webView.getId(),
+                "topChange",
+                event);
+    }
+}

webview-bridge/index.android.js

@@ -65,6 +65,7 @@ var WebViewBridge = React.createClass({
     };
   },
 
+  
   componentWillMount: function() {
     DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
       const { onBridgeMessage } = this.props;
@@ -117,12 +118,14 @@ var WebViewBridge = React.createClass({
       <RCTWebViewBridge
         ref={RCT_WEBVIEWBRIDGE_REF}
         key="webViewKey"
+ 				javaScriptEnabled={true}
         {...props}
         source={resolveAssetSource(source)}
         style={webViewStyles}
         onLoadingStart={this.onLoadingStart}
         onLoadingFinish={this.onLoadingFinish}
         onLoadingError={this.onLoadingError}
+        onChange={this.onMessage}
       />;
 
     return (
@@ -133,6 +136,12 @@ var WebViewBridge = React.createClass({
     );
   },
 
+  onMessage(event) {
+    if (this.props.onBridgeMessage != null && event.nativeEvent != null) {
+      this.props.onBridgeMessage(event.nativeEvent.message)
+    }
+  },
+
   goForward: function() {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewBridgeHandle(),
@@ -199,7 +208,6 @@ var WebViewBridge = React.createClass({
     var {onError, onLoadEnd} = this.props;
     onError && onError(event);
     onLoadEnd && onLoadEnd(event);
-    console.error('Encountered an error loading page', event.nativeEvent);
 
     this.setState({
       lastErrorEvent: event.nativeEvent,
@@ -230,4 +238,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = WebViewBridge;
+module.exports = WebViewBridge;