crypto.getRandomValues() not supported

Question

I'm getting this error with npm [email protected] when I try to generate a QR code with react-native-qrcode-generator

I'm using react-native with an expo managed workflow. And the thing is it works on iOS, and i only get the error on Android

I searched for a solution myself and I tried installing react-native-get-random-values but that also didn't work.

Any thoughts?

Answer 1

Install react-native-get-random-values Import it before uuid:

import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

Answer 2

I just had the same issue on android. Works fine on iOS.

I solved it with:

1. Uninstall the existing one npm uninstall react-native-webview
2. Use expo install react-native-webview instead.

Answer 3

1. Install react-native-get-random-values using this command-

   npm install react-native-get-random-values
   

2. Import react-native-get-random-values before uuid like this-

   import "react-native-get-random-values";
   import { v4 as uuidv4 } from "uuid";
   

It worked for me. I hope it will work for you as well.

Answer 4

Here is what worked for me

1. Install react-native-get-random-values

   npm install --save react-native-get-random-values
   

2. Import react-native-get-random-values before webview import (VERY IMPORTANT)

   import 'react-native-get-random-values';
   import {WebView} from 'react-native-webview';
   

For more information, please read this issue.

Answer 5

I spent 2 days to solve the issue, I have inlineRequires: false, in metro config and changing it breaks the app.

I installed yarn add react-native-get-random-values.

Then imported react-native-get-random-values before crypto-js but it didn't work.

After hours of debugging, I found it's Babel's compiling order issue. crypto-js is always compiled earlier than react-native-get-random-values. In another word crypto-js looks for global.crypto before react-native-get-random-values assigns it. imports compile with higher priority than the rest of codes.

My file was:

import 'react-native-get-random-values'
import crypto from 'crypto-js`

The fix was lowering the compile order of crypto-js to make sure it compiles after global.crypto is assigned:

import 'react-native-get-random-values'
const crypto = require('crypto-js')

Answer 6

I made a snack with Expo SDK 37 and the exact versions you mention:

{
  "dependencies": {
    "react-native-webview": "9.0.1",
    "react-native-qrcode-generator": "1.2.1"
  }
}

It works just fine on my Android phone. The issue must be somewhere else in your implementation.

If you've changed versions recently, try to delete your node_modules and install packages again. Double-check my example and let me know if you do something different?

Answer 7

Try to use : npm install --save react-native-webview
It's works for me.

Answer 8

They fixed it in the webview tag 9.2.2, as shown in the changelog https://github.com/react-native-community/react-native-webview/releases/tag/v9.2.2