react-native-webview crashes application when invoked

Question

I am using react-native-webview library to load webpage, it works fine in debuging, but when I create release build. And click on the tab to load webview , application crashes. following is the error. I have attached error trace as well in the end.

I am using react-native: "0.62.0" react-native-webview : "^9.0.2",

this is the trace when I click on the button to load webview screen.

> 2020-04-10 11:39:44.812 2584-2646/com.trackplayer E/ReactNativeJS:
> Error: crypto.getRandomValues() not supported. See
> https://github.com/uuidjs/uuid#getrandomvalues-not-supported
>     
>     This error is located at:
>         in n
>         in RCTView
>         in y
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in S
>         in RCTView
>         in RCTView
>         in E
>         in RCTView
>         in c
>         in RCTView
>         in Unknown
>         in v
>         in Unknown
>         in w
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in RCTView
>         in RCTView
>         in RCTView
>         in k
>         in ForwardRef
>         in PanGestureHandler
>         in RCTView
>         in k
>         in ForwardRef
>         in RCTView
>         in D
>         in Unknown
>         in RCTView
>         in C
>         in RCTView
>         in H
>         in S
>         in h
>         in RNCSafeAreaView
>         in Unknown
>         in Unknown
>         in GestureHandlerRootView
>         in Unknown
>         in b
>         in Unknown
>         in O
>         in Unknown
>         in ForwardRef
>         in Unknown
>         in ForwardRef
>         in S
>         in RCTView
>         in RCTView
>         in E 2020-04-10 11:39:44.818 2584-2646/com.trackplayer E/ReactNativeJS: Error: crypto.getRandomValues() not supported. See
> https://github.com/uuidjs/uuid#getrandomvalues-not-supported
>     
>     This error is located at:
>         in n
>         in RCTView
>         in y
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in S
>         in RCTView
>         in RCTView
>         in E
>         in RCTView
>         in c
>         in RCTView
>         in Unknown
>         in v
>         in Unknown
>         in w
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in RCTView
>         in RCTView
>         in RCTView
>         in k
>         in ForwardRef
>         in PanGestureHandler
>         in RCTView
>         in k
>         in ForwardRef
>         in RCTView
>         in D
>         in Unknown
>         in RCTView
>         in C
>         in RCTView
>         in H
>         in S
>         in h
>         in RNCSafeAreaView
>         in Unknown
>         in Unknown
>         in GestureHandlerRootView
>         in Unknown
>         in b
>         in Unknown
>         in O
>         in Unknown
>         in ForwardRef
>         in Unknown
>         in ForwardRef
>         in S
>         in RCTView
>         in RCTView
>         in E 2020-04-10 11:39:44.822 2584-2647/com.trackplayer E/unknown:ReactNative: Error: crypto.getRandomValues() not supported.
> See https://github.com/uuidjs/uuid#getrandomvalues-not-supported
>     
>     This error is located at:
>         in n
>         in RCTView
>         in y
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in S
>         in RCTView
>         in RCTView
>         in E
>         in RCTView
>         in c
>         in RCTView
>         in Unknown
>         in v
>         in Unknown
>         in w
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in RCTView
>         in RCTView
>         in RCTView
>         in k
>         in ForwardRef
>         in PanGestureHandler
>         in RCTView
>         in k
>         in ForwardRef
>         in RCTView
>         in D
>         in Unknown
>         in RCTView
>         in C
>         in RCTView
>         in H
>         in S
>         in h
>         in RNCSafeAreaView
>         in Unknown
>         in Unknown
>         in GestureHandlerRootView
>         in Unknown
>         in b
>         in Unknown
>         in O
>         in Unknown
>         in ForwardRef
>         in Unknown
>         in ForwardRef
>         in S
>         in RCTView
>         in RCTView
>         in E, stack:
>     default@717:132
>     f@722:329
>     n@714:2621
>     Bn@92:31529
>     ui@92:49357
>     ja@92:72034
>     Oa@92:71959
>     Ia@92:69253
>     Ia@-1
>     <unknown>@92:25480
>     unstable_runWithPriority@183:3503
>     dn@92:25427
>     fn@92:25362
>     Pe@92:90879
>     Re@92:13478
>     Ie@92:13664
>     receiveTouches@92:14448
>     value@27:3544
>     <unknown>@27:840
>     value@27:2798
>     value@27:812
>     value@-1 2020-04-10 11:39:44.831 2584-2647/com.trackplayer E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
>     Process: com.trackplayer, PID: 2584
>     com.facebook.react.common.JavascriptException: Error: crypto.getRandomValues() not supported. See
> https://github.com/uuidjs/uuid#getrandomvalues-not-supported
>     
>     This error is located at:
>         in n
>         in RCTView
>         in y
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in S
>         in RCTView
>         in RCTView
>         in E
>         in RCTView
>         in c
>         in RCTView
>         in Unknown
>         in v
>         in Unknown
>         in w
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in RCTView
>         in RCTView
>         in RCTView
>         in k
>         in ForwardRef
>         in PanGestureHandler
>         in RCTView
>         in k
>         in ForwardRef
>         in RCTView
>         in D
>         in Unknown
>         in RCTView
>         in C
>         in RCTView
>         in H
>         in S
>         in h
>         in RNCSafeAreaView
>         in Unknown
>         in Unknown
>         in GestureHandlerRootView
>         in Unknown
>         in b
>         in Unknown
>         in O
>         in Unknown
>         in ForwardRef
>         in Unknown
>         in ForwardRef
>         in S
>         in RCTView
>         in RCTView
>         in E, stack:
>     default@717:132
>     f@722:329
>     n@714:2621
>     Bn@92:31529
>     ui@92:49357
>     ja@92:72034
>     Oa@92:71959
>     Ia@92:69253
>     Ia@-1
>     <unknown>@92:25480
>     unstable_runWithPriority@183:3503
>     dn@92:25427
>     fn@92:25362
>     Pe@92:90879
>     Re@92:13478
>     Ie@92:13664
>     receiveTouches@92:14448
>     value@27:3544
>     <unknown>@27:840
>     value@27:2798
>     value@27:812
>     value@-1
>     
>         at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:79)
>         at java.lang.reflect.Method.invoke(Native Method)
>         at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
>         at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
>         at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
>         at android.os.Handler.handleCallback(Handler.java:883)
>         at android.os.Handler.dispatchMessage(Handler.java:100)
>         at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
>         at android.os.Looper.loop(Looper.java:214)
>         at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
>         at java.lang.Thread.run(Thread.java:919) 2020-04-10 11:39:44.850 2584-2647/com.trackplayer I/Process: Sending signal. PID:
> 2584 SIG: 9

sajanthomas01 · Accepted Answer · 2020-04-10 09:04:17Z

10

Seems like a bug with the new version, but as per this doc ( https://github.com/react-native-community/react-native-webview/issues/1312 ) it can be solved as follows

first install react-native-get-random-values, then import it at the top of your file

import 'react-native-get-random-values';
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';

export default class MyWeb extends Component {
  render() {
    return (
      <View style={{ backgroundColor: 'blue',flex: 1 }}>
        <WebView
          source={{ uri: 'https://url.ngrok.io' }}
          style={{ marginTop: 20, }}
        />
      </View>
    );
  }
}

answered Apr 10, 2020 at 9:04

sajanthomas01

3675 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Samal · Accepted Answer · 2020-04-10 16:31:43Z

6

Install 'react-native-get-random-values' package.

Then add "import 'react-native-get-random-values'" at the entry file of your react native app as follows. Like index.js when the application created using React Native CLI

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

class MyWebComponent extends Component {
    render() {
        return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
    }
}

edited Apr 10, 2020 at 16:31

answered Apr 10, 2020 at 15:53

Pankaj Samal

4214 silver badges3 bronze badges

Comments

Wasif Mustahid · Accepted Answer · 2020-04-21 11:56:02Z

3

fixed the issue for me: `react-native-webview : "8.0.4",

edited Apr 21, 2020 at 11:56

answered Apr 15, 2020 at 8:16

Wasif Mustahid

2911 silver badge14 bronze badges

Comments

Eee1 · Accepted Answer · 2020-04-24 08:59:41Z

3

I've got the same error after upgrade of react-native-webview to version 9.1.3. After downgrade to 9.1.1 the error disapear. Version 9.1.2 is not checked.

Update on 2020.04.12. In version 9.1.4 the error exists also. With 'react-native-get-random-values' as described below all works. I'm using CLI version.

Update on 2020.04.24. In version 9.2.2 the error is corrected. I removed package 'react-native-get-random-values' and all works fine.

edited Apr 24, 2020 at 8:59

answered Apr 10, 2020 at 8:25

Eee1

1316 bronze badges

2 Comments

Muhammad Ehtesham Anwar Over a year ago

I have 9.0.2 installed. I donot know why npm installed this lower version, but I solved the error by following the answer below this.

Arvind Sedha Over a year ago

I can confirm that version 9.1.2 doesn't work and gives error but version 9.1.1 works fine.

Eldho Shaji · Accepted Answer · 2020-10-28 20:07:24Z

3

Add the property androidHardwareAccelerationDisabled={true} to the webview

<WebView
   source={{ uri: 'https://reatnative.com' }}
   androidHardwareAccelerationDisabled={true}
/>

answered Oct 28, 2020 at 20:07

Eldho Shaji

6376 silver badges8 bronze badges

1 Comment

Sebastiaan Over a year ago

This worked for me for this bug that seemed to occur in combination with using react-native-screens

learner · Accepted Answer · 2020-04-10 07:22:00Z

1

This worked for me. I just used it.

 expo install react-native-webview
 "react-native-webview": "8.1.1"

 import { WebView } from 'react-native-webview'
 <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20, height: 500 }} />

answered Apr 10, 2020 at 7:22

learner

2341 gold badge3 silver badges10 bronze badges

Comments

ahmedfeyzi · Accepted Answer · 2020-04-15 03:40:30Z

0

Install react-native-get-random-values package.. After, try to move import at very top of the file..

index.js

This way it worked for me..

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

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

answered Apr 15, 2020 at 3:40

ahmedfeyzi

513 bronze badges

Collectives™ on Stack Overflow

react-native-webview crashes application when invoked

7 Answers 7

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related