react-native-webview: Error with latest version on Android (Crypto package not exist for RN)

Try to move import at very top of the index.js file

I did https://github.com/react-native-community/react-native-webview/pull/1334 🙌

When I yarn add react-native-get-random-values, got a new problem, null is an object(evaluating ‘RNGetRandomValues.getRandomBase64’)

As @Sine99 said, back to v9.1.1, everything are fine.

Instead of using uuid package we probably should use something like this:

// uuid.js
export function uuid() {
	let d = new Date().getTime();

	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
		const r = (d + Math.random() * 16) % 16 | 0;
		d = Math.floor(d / 16);

		return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
	});
}

@dev20190101 you probably forgot to rebuild (react-native run-android) as your error indicates, that the native module (couterpart to the js part of react-native-get-random-values) is not available yet. If you already did that, try cd android && ./gradlew clean first.

I just wonder why the new version was released when it does not work at all?

I don’t think your comment helps

Thanks @artyorsh!

I just wonder why the new version was released when it does not work at all?

not working…can you tell me the solution detail? @sebinq i have installed the react-native-get-random-values in my proj , and add import 'react-native-get-random-values'; in my index.js file and react-native-webview index.js file ，someting wrong? my proj :

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-get-random-values';

AppRegistry.registerComponent(appName, () => App);

webview proj:

import WebView from './lib/WebView';
import 'react-native-get-random-values'

export { WebView };
export default WebView;

Reproduced on RN webview 9.1.3 and RN 0.62.2, on both debug and release builds.

And confirmed workaround with

import 'react-native-get-random-values'

I had the same problem when I use “react-native-webview”: “9.2.1”, but I change it to “react-native-webview”: “9.0.2” and it works fine.

Instead of using uuid package we probably should use something like this:

// uuid.js
export function uuid() {
	let d = new Date().getTime();

	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
		const r = (d + Math.random() * 16) % 16 | 0;
		d = Math.floor(d / 16);

		return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
	});
}

@dev20190101 you probably forgot to rebuild (react-native run-android) as your error indicates, that the native module (couterpart to the js part of react-native-get-random-values) is not available yet. If you already did that, try cd android && ./gradlew clean first.

This worked for me. I prefer creating a (hopefully temporary) patch over adding another module.

---

To expand a bit more.

1. Open the installed react-native-webview module.
2. Add a file named uuid.js.
3. Add the above code to it.
4. Modify the following line in WebView.android.js:

// import { v4 as uuid } from 'uuid'; // OLD
import { uuid } from './uuid';

1. Create a patch using patch-package.

If you have patch-package setup, the patch will be applied when you npm install.

I just wonder why the new version was released when it does not work at all?

Agreed. I’ve had to roll back to 9.1.1 which seems to be the last working version that doesn’t have this issue. If this package now requires a new package to be installed, it really should be explained in the setup instructions and the release notes.

Downgraded the react-native-webview version to 8.1.1 after that it is showing following error message:

<WebView source={{ uri: 'https://reactnative.dev/' }} />

reset cache, have a try.

Same issue here, I reverted back to v9.1.1 till this bug is fixed …Not facing any issue so far.

thanks!! it working now!

As mentioned above a temporary fix is to use patch-package. Thanks to @DomiR . Here is my patch that works fine: patches/react-native-webview+9.2.1.patch

diff --git a/node_modules/react-native-webview/lib/WebView.android.js b/node_modules/react-native-webview/lib/WebView.android.js
index 39a4e41..e452caf 100644
--- a/node_modules/react-native-webview/lib/WebView.android.js
+++ b/node_modules/react-native-webview/lib/WebView.android.js
@@ -59,12 +59,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { v4 as uuid } from 'uuid';
 import { Image, requireNativeComponent, UIManager as NotTypedUIManager, View, NativeModules, findNodeHandle, } from 'react-native';
 import BatchedBridge from 'react-native/Libraries/BatchedBridge/BatchedBridge';
 import invariant from 'invariant';
 import { defaultOriginWhitelist, createOnShouldStartLoadWithRequest, defaultRenderError, defaultRenderLoading, } from './WebViewShared';
 import styles from './WebView.styles';
+function uuid() {
+	let d = new Date().getTime();
+
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+		const r = (d + Math.random() * 16) % 16 | 0;
+		d = Math.floor(d / 16);
+
+		return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+	});
+}
 var UIManager = NotTypedUIManager;
 var RNCWebView = requireNativeComponent('RNCWebView');
 var resolveAssetSource = Image.resolveAssetSource;

Maybe I add tests to my app so I can avoid all non-tested dependencies.

add tests and this won’t happen anymore

For me it works when the import is in the first line of index.js and you rebuild everything:

rm -rf ~/.gradle/caches/ delete the Android build directory restart Metro

@ritesh-malav I had the same issue, when I didn’t install it by expo command. before expo: “react-native-webview”: “^9.2.1” after expo: “react-native-webview”: “8.1.1”

maybe try 8.1.1 version !

✅ If you are using Expo, please “expo install react-native-webview”

Doesn’t work for me. I tried adding react-native-get-random-values using npm install --save react-native-get-random-values and I still see the same issue.

When I yarn add react-native-get-random-values, got a new problem, null is an object(evaluating ‘RNGetRandomValues.getRandomBase64’)

As @Sine99 said, back to v9.1.1, everything are fine.

Same issue with the setup “react-native”: “0.62.2”, “react-native-get-random-values”: “1.3.1”, “react-native-webview”: “9.2.0”

Same thing for 9.1.4 and react-native 0.61.5