Merge branch 'release/v0.19.0'

Author: alinz

README.md

@@ -1,36 +1,73 @@
 # 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.16 and above**, the bridge is fully functional.
+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.19 and above**, the bridge is fully functional.
 
 
 
 ## Installation
 
 In order to use this extension, you have to do the following steps:
 
-1. in your react-native project, run `npm install react-native-webview-bridge`
-2. go to xcode's `Project Navigator` tab
+in your react-native project, run `npm install react-native-webview-bridge`
+
+### iOS
+
+1. go to xcode's `Project Navigator` tab
 <p align="center">
     <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/01.png" />
 </p>
-3. right click on `Libraries`
-4. select `Add Files to ...` option
+2. right click on `Libraries`
+3. select `Add Files to ...` option
 <p align="center">
     <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/02.png" />
 </p>
-5. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder
+4. navigate to `node_modules/react-native-webview-bridge/ios` and add `React-Native-Webview-Bridge.xcodeproj` folder
 <p align="center">
     <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/03.png" />
 </p>
-6. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`
+5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`
 <p align="center">
     <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/04.png" />
 </p>
-7. expand `Link Binary With Libraries` and click `+` sign to add a new one.
-8. select `libReact-Native-Webviwe-Bridge.a` and click `Add` button.
+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.
 <p align="center">
     <img src ="https://raw.githubusercontent.com/alinz/react-native-webview-bridge/master/doc/assets/05.png" />
 </p>
-9. clean compile to make sure your project can compile and build.
+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
+
+```java
+import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
+```
+
+2. add the following code to add the package to `MainActivity.java`
+
+```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
 
@@ -70,7 +107,7 @@ this method sends a message to native side. the message must be in string type o
 
 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
+#### 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.
 

android/build.gradle

@@ -0,0 +1,34 @@
+buildscript {
+    repositories {
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:1.1.3'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 23
+        versionCode 1
+        versionName "1.0"
+    }
+    lintOptions {
+        abortOnError false
+    }
+}
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    compile 'com.facebook.react:react-native:0.19.+'
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.github.alinz.reactnativewebviewbridge">
+
+</manifest>

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

@@ -0,0 +1,24 @@
+package com.github.alinz.reactnativewebviewbridge;
+
+import android.webkit.JavascriptInterface;
+
+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;
+
+class JavascriptBridge {
+  private ReactContext context;
+
+  public JavascriptBridge(ReactContext context) {
+    this.context = context;
+  }
+
+  @JavascriptInterface
+  public void send(String message) {
+    WritableMap params = Arguments.createMap();
+    params.putString("message", message);
+    context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+            .emit("webViewBridgeMessage", params);
+  }
+}

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

@@ -0,0 +1,91 @@
+package com.github.alinz.reactnativewebviewbridge;
+
+import javax.annotation.Nullable;
+import java.util.Map;
+
+import android.webkit.WebView;
+
+import com.facebook.react.views.webview.ReactWebViewManager;
+import com.facebook.react.views.webview.WebViewConfig;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.MapBuilder;
+
+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 void sendToBridge(WebView root, String message) {
+    //root.loadUrl("javascript:(function() {\n" + script + ";\n})();");
+    String script = "WebViewBridge.onMessage('" + message + "');";
+    root.evaluateJavascript(script, null);
+  }
+
+  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;
+    }
+
+    //this code needs to be executed everytime a url changes.
+    root.evaluateJavascript(""
+    + "(function() {"
+        + "if (window.WebViewBridge) return;"
+        + "var customEvent = document.createEvent('Event');"
+        + "WebViewBridge = {"
+            + "send: function(message) { WebViewBridgeAndroid.send(message); },"
+            + "onMessage: function() {}"
+        + "};"
+        + "window.WebViewBridge = WebViewBridge;"
+        + "customEvent.initEvent('WebViewBridge', true, true);"
+        + "document.dispatchEvent(customEvent);"
+    +"}())", null);
+  }
+}

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

@@ -0,0 +1,30 @@
+package com.github.alinz.reactnativewebviewbridge;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+public class WebViewBridgePackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
+        return new ArrayList<>();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
+        return Arrays.<ViewManager>asList(
+                new WebViewBridgeManager()
+        );
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Arrays.asList();
+    }
+}

examples/Sample2/android/app/build.gradle

@@ -75,4 +75,6 @@ dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:0.16.+"
+    //compile "com.github.alinz.reactnativewebviewbridge"
+    compile project(':react-native-webview-bridge')
 }

examples/Sample2/android/app/src/main/java/com/sample2/MainActivity.java

@@ -11,6 +11,8 @@
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 
+import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
+
 public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
 
     private ReactInstanceManager mReactInstanceManager;
@@ -26,6 +28,7 @@ protected void onCreate(Bundle savedInstanceState) {
                 .setBundleAssetName("index.android.bundle")
                 .setJSMainModuleName("index.android")
                 .addPackage(new MainReactPackage())
+                .addPackage(new WebViewBridgePackage())
                 .setUseDeveloperSupport(BuildConfig.DEBUG)
                 .setInitialLifecycleState(LifecycleState.RESUMED)
                 .build();

examples/Sample2/android/settings.gradle

@@ -1,3 +1,4 @@
 rootProject.name = 'Sample2'
 
-include ':app'
+include ':app', ':react-native-webview-bridge'
+project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')

examples/Sample2/app.js

@@ -0,0 +1,49 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+  WebView
+} = React;
+
+var WebViewBridge = require('react-native-webview-bridge');
+
+const injectScript = `
+  (function () {
+    if (WebViewBridge) {
+
+      WebViewBridge.onMessage = function (message) {
+        alert('got a message from Native: ' + message);
+
+        WebViewBridge.send("message from webview");
+      };
+
+    } else {
+      window.location.href = "yahoo.ca";
+    }
+  }());
+`;
+
+var Sample2 = React.createClass({
+  onBridgeMessage: function (message) {
+    console.log(message);
+  },
+  render: function() {
+    return (
+      <WebViewBridge
+        ref="webviewbridge"
+        onBridgeMessage={this.onBridgeMessage}
+        javaScriptEnabled={true}
+        injectedJavaScript={injectScript}
+        url={"https://google.com"}/>
+    );
+  }
+});
+
+module.exports = Sample2;