fix(Android): Ensure each mounted WebView binds their personal onMessage handler (#1301)

* Ensure each mounted WebView binds their personal onMessage handler

* Changed unique ref generation to uuid

Uses `uuid` npm package.
Dashes are removed from the ref for sanity.

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -398,6 +398,11 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
   public void setMessagingEnabled(WebView view, boolean enabled) {
     ((RNCWebView) view).setMessagingEnabled(enabled);
   }
+
+  @ReactProp(name = "messagingModuleName")
+  public void setMessagingModuleName(WebView view, String moduleName) {
+    ((RNCWebView) view).setMessagingModuleName(moduleName);
+  }
    
   @ReactProp(name = "incognito")
   public void setIncognito(WebView view, boolean enabled) {
@@ -975,6 +980,8 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
     String injectedJS;
     protected boolean messagingEnabled = false;
     protected @Nullable
+    String messagingModuleName;
+    protected @Nullable
     RNCWebViewClient mRNCWebViewClient;
     protected @Nullable
     CatalystInstance mCatalystInstance;
@@ -1076,6 +1083,10 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
       }
     }
 
+    public void setMessagingModuleName(String moduleName) {
+      messagingModuleName = moduleName;
+    }
+
     protected void evaluateJavascriptWithFallback(String script) {
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
         evaluateJavascript(script, null);
@@ -1139,7 +1150,7 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
       WritableNativeArray params = new WritableNativeArray();
       params.pushMap(event);
 
-      mCatalystInstance.callFunction("WebViewMessageHandler", "onMessage", params);
+      mCatalystInstance.callFunction(messagingModuleName, "onMessage", params);
     }
 
     protected void onScrollChanged(int x, int y, int oldX, int oldY) {

package.json

@@ -35,7 +35,8 @@
   "dependencies": {
     "escape-string-regexp": "2.0.0",
     "invariant": "2.2.4",
-    "rnpm-plugin-windows": "^0.5.1-0"
+    "rnpm-plugin-windows": "^0.5.1-0",
+    "uuid": "^7.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",
@@ -48,6 +49,7 @@
     "@types/jest": "24.0.18",
     "@types/react": "16.8.8",
     "@types/react-native": "0.60.11",
+    "@types/uuid": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "2.1.0",
     "@typescript-eslint/parser": "2.1.0",
     "babel-eslint": "10.0.3",

src/WebView.android.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { v4 as uuid } from 'uuid';
 
 import {
   Image,
@@ -70,12 +71,16 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     lastErrorEvent: null,
   };
 
+  uniqueRef = uuid().replace(/-/g, '');
+
   webViewRef = React.createRef<NativeWebViewAndroid>();
 
   componentDidMount = () => {
-    BatchedBridge.registerCallableModule('WebViewMessageHandler', this);
+    BatchedBridge.registerCallableModule(this.getMessagingModuleName(), this);
   }
 
+  getMessagingModuleName = () => `WebViewMessageHandler${this.uniqueRef}`;
+
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
 
   goForward = () => {
@@ -333,6 +338,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
         key="webViewKey"
         {...otherProps}
         messagingEnabled={typeof onMessage === 'function'}
+        messagingModuleName={this.getMessagingModuleName()}
         onLoadingError={this.onLoadingError}
         onLoadingFinish={this.onLoadingFinish}
         onLoadingProgress={this.onLoadingProgress}

src/WebViewTypes.ts

@@ -272,6 +272,7 @@ export interface AndroidNativeWebViewProps extends CommonNativeWebViewProps {
   saveFormDataDisabled?: boolean;
   textZoom?: number;
   thirdPartyCookiesEnabled?: boolean;
+  messagingModuleName?: string;
   readonly urlPrefixesForDefaultIntent?: string[];
 }
 

yarn.lock

@@ -1502,6 +1502,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/uuid@^7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-7.0.2.tgz#d680a9c596ef84abf5c4c07a32ffd66d582526f8"
+  integrity sha512-8Ly3zIPTnT0/8RCU6Kg/G3uTICf9sRwYOpUzSIM3503tLIKcnJPRuinHhXngJUy2MntrEf6dlpOHXJju90Qh5w==
+
 "@types/yargs-parser@*":
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.0.0.tgz#453743c5bbf9f1bed61d959baab5b06be029b2d0"
@@ -10154,6 +10159,11 @@ uuid@^3.3.2, uuid@^3.3.3:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"