fix(Android): Resolve crypto error with uuid usage (react-native-webv…

…iew#1334)

* fix(Android): uuid generation issue

* chore: remove redundant types/uuid dependency

* refactor(Android): replace uuid function with unique instance counter

package.json

@@ -34,8 +34,7 @@
   },
   "dependencies": {
     "escape-string-regexp": "2.0.0",
-    "invariant": "2.2.4",
-    "uuid": "^7.0.3"
+    "invariant": "2.2.4"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",
@@ -48,7 +47,6 @@
     "@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,5 +1,4 @@
 import React from 'react';
-import { v4 as uuid } from 'uuid';
 
 import {
   Image,
@@ -42,6 +41,11 @@ const RNCWebView = requireNativeComponent(
 ) as typeof NativeWebViewAndroid;
 const { resolveAssetSource } = Image;
 
+/**
+ * A simple counter to uniquely identify WebView instances. Do not use this for anything else.
+ */
+let uniqueRef = 0;
+
 /**
  * Renders a native WebView.
  */
@@ -71,15 +75,14 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     lastErrorEvent: null,
   };
 
-  uniqueRef = uuid().replace(/-/g, '');
 
   webViewRef = React.createRef<NativeWebViewAndroid>();
 
-  componentDidMount = () => {
-    BatchedBridge.registerCallableModule(this.getMessagingModuleName(), this);
-  }
+  messagingModuleName = `WebViewMessageHandler${uniqueRef+=1}`;
 
-  getMessagingModuleName = () => `WebViewMessageHandler${this.uniqueRef}`;
+  componentDidMount = () => {
+    BatchedBridge.registerCallableModule(this.messagingModuleName, this);
+  };
 
   getCommands = () => UIManager.getViewManagerConfig('RNCWebView').Commands;
 
@@ -338,7 +341,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
         key="webViewKey"
         {...otherProps}
         messagingEnabled={typeof onMessage === 'function'}
-        messagingModuleName={this.getMessagingModuleName()}
+        messagingModuleName={this.messagingModuleName}
         onLoadingError={this.onLoadingError}
         onLoadingFinish={this.onLoadingFinish}
         onLoadingProgress={this.onLoadingProgress}