Merge pull request #150 from hmedney/master

IOS and Android updates and fixes for RN 0.33

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);
+    }
+}

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

@@ -2,98 +2,81 @@
 
 import android.webkit.WebView;
 
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.views.webview.ReactWebViewManager;
-import com.facebook.react.views.webview.WebViewConfig;
+import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.ArrayList;
 import java.util.Map;
 
 import javax.annotation.Nullable;
 
 public class WebViewBridgeManager extends ReactWebViewManager {
-  private static final String REACT_CLASS = "RCTWebViewBridge";
-
-  public static final int COMMAND_INJECT_BRIDGE_SCRIPT = 100;
-  public static final int COMMAND_SEND_TO_BRIDGE = 101;
-
-  private boolean initializedBridge;
-
-  public WebViewBridgeManager() {
-    super();
-    initializedBridge = false;
-  }
-
-  public WebViewBridgeManager(WebViewConfig webViewConfig) {
-    super(webViewConfig);
-    initializedBridge = false;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  public @Nullable Map<String, Integer> getCommandsMap() {
-    Map<String, Integer> commandsMap = super.getCommandsMap();
-
-    commandsMap.put("injectBridgeScript", COMMAND_INJECT_BRIDGE_SCRIPT);
-    commandsMap.put("sendToBridge", COMMAND_SEND_TO_BRIDGE);
-
-    return commandsMap;
-  }
-
-  @Override
-  public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray args) {
-    super.receiveCommand(root, commandId, args);
-
-    switch (commandId) {
-      case COMMAND_INJECT_BRIDGE_SCRIPT:
-        injectBridgeScript(root);
-        break;
-      case COMMAND_SEND_TO_BRIDGE:
-        sendToBridge(root, args.getString(0));
-        break;
-      default:
-        //do nothing!!!!
+    private static final String REACT_CLASS = "RCTWebViewBridge";
+
+    public static final int COMMAND_SEND_TO_BRIDGE = 101;
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    private ArrayList<Integer> webViewsWithBridgeScript = new ArrayList<Integer>();
+
+    @Override
+    public
+    @Nullable
+    Map<String, Integer> getCommandsMap() {
+        Map<String, Integer> commandsMap = super.getCommandsMap();
+
+        commandsMap.put("sendToBridge", COMMAND_SEND_TO_BRIDGE);
+
+        return commandsMap;
+    }
+
+    @Override
+    protected WebView createViewInstance(ThemedReactContext reactContext) {
+        WebView root = super.createViewInstance(reactContext);
+        root.addJavascriptInterface(new JavascriptBridge(root), "WebViewBridge");
+        return root;
+    }
+
+    @Override
+    public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray args) {
+        super.receiveCommand(root, commandId, args);
+        // if (true) return;
+
+        switch (commandId) {
+            case COMMAND_SEND_TO_BRIDGE:
+                sendToBridge(root, args.getString(0));
+                break;
+            default:
+                //do nothing!!!!
+        }
+    }
+
+    private void sendToBridge(WebView root, String message) {
+        //root.loadUrl("javascript:(function() {\n" + script + ";\n})();");
+        String script = "WebViewBridge.onMessage('" + message + "');";
+        WebViewBridgeManager.evaluateJavascript(root, script);
+    }
+
+    static private void evaluateJavascript(WebView root, String javascript) {
+        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
+            root.evaluateJavascript(javascript, null);
+        } else {
+            root.loadUrl("javascript:" + javascript);
+        }
     }
-  }
-
-  private void sendToBridge(WebView root, String message) {
-    //root.loadUrl("javascript:(function() {\n" + script + ";\n})();");
-    String script = "WebViewBridge.onMessage('" + message + "');";
-    WebViewBridgeManager.evaluateJavascript(root, script);
-  }
-
-  private void injectBridgeScript(WebView root) {
-    //this code needs to be called once per context
-    if (!initializedBridge) {
-      root.addJavascriptInterface(new JavascriptBridge((ReactContext) root.getContext()), "WebViewBridgeAndroid");
-      initializedBridge = true;
-      root.reload();
+
+    @ReactProp(name = "allowFileAccessFromFileURLs")
+    public void setAllowFileAccessFromFileURLs(WebView root, boolean allows) {
+        root.getSettings().setAllowFileAccessFromFileURLs(allows);
     }
 
-    // this code needs to be executed everytime a url changes.
-    WebViewBridgeManager.evaluateJavascript(root, ""
-            + "(function() {"
-            + "if (window.WebViewBridge) return;"
-            + "var customEvent = document.createEvent('Event');"
-            + "var WebViewBridge = {"
-              + "send: function(message) { WebViewBridgeAndroid.send(message); },"
-              + "onMessage: function() {}"
-            + "};"
-            + "window.WebViewBridge = WebViewBridge;"
-            + "customEvent.initEvent('WebViewBridge', true, true);"
-            + "document.dispatchEvent(customEvent);"
-            + "}());");
-  }
-
-  static private void evaluateJavascript(WebView root, String javascript) {
-    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
-      root.evaluateJavascript(javascript, null);
-    } else {
-      root.loadUrl("javascript:" + javascript);
+    @ReactProp(name = "allowUniversalAccessFromFileURLs")
+    public void setAllowUniversalAccessFromFileURLs(WebView root, boolean allows) {
+        root.getSettings().setAllowUniversalAccessFromFileURLs(allows);
     }
-  }
-}
+}

ios/RCTWebViewBridge.m

@@ -21,6 +21,7 @@
 #import "RCTUtils.h"
 #import "RCTView.h"
 #import "UIView+React.h"
+#import <objc/runtime.h>
 
 //This is a very elegent way of defining multiline string in objective-c.
 //source: http://stackoverflow.com/a/23387659/828487

webview-bridge/index.android.js

@@ -43,13 +43,15 @@ var WebViewBridgeState = keyMirror({
   ERROR: null,
 });
 
+var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge);
+
 /**
  * Renders a native WebView.
  */
 var WebViewBridge = React.createClass({
 
   propTypes: {
-    ...WebView.propTypes,
+    ...RCTWebViewBridge.propTypes,
 
     /**
      * Will be called once the message is being sent from webview
@@ -65,6 +67,7 @@ var WebViewBridge = React.createClass({
     };
   },
 
+  
   componentWillMount: function() {
     DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
       const { onBridgeMessage } = this.props;
@@ -117,12 +120,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 +138,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(),
@@ -165,14 +176,6 @@ var WebViewBridge = React.createClass({
     );
   },
 
-  injectBridgeScript: function () {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewBridgeHandle(),
-      UIManager.RCTWebViewBridge.Commands.injectBridgeScript,
-      null
-    );
-  },
-
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
@@ -188,7 +191,6 @@ var WebViewBridge = React.createClass({
   },
 
   onLoadingStart: function(event) {
-    this.injectBridgeScript();
     var onLoadStart = this.props.onLoadStart;
     onLoadStart && onLoadStart(event);
     this.updateNavigationState(event);
@@ -199,7 +201,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,
@@ -218,7 +219,6 @@ var WebViewBridge = React.createClass({
   },
 });
 
-var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge);
 
 var styles = StyleSheet.create({
   container: {
@@ -230,4 +230,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = WebViewBridge;
+module.exports = WebViewBridge;