WebView (react-native-webview) getting error code -1 in Expo SDK36

Question

My Expo App's WebViewScreen Code:

import React from 'react';
import { WebView } from 'react-native-webview';

export default WebViewScreen = () => (
    <WebView
        originWhitelist={['*']}
        source={{ uri: 'https://www.google.com' }}
    />
);

but when i run it, i get following error:

Encountered an error loading page, Object {
  "canGoBack": false,
  "canGoForward": false,
  "code": -1,
  "description": "net::ERR_CACHE_MISS",
  "loading": false,
  "target": 3,
  "title": "Web page not available",
  "url": "https://www.google.com/",
}

NOTE:
My Android phone is connected to wifi, and I am able to consume backend-server APIs almost on every screen in my Expo app, which confirms that internet is reachable and my app has the permission to use internet .

My Environment:
Android Samsung phone (Android version 5.1.1),
EXPO SDK version is 36,
react-native-webview version 8.0.6,
Expo client app version 2.14.0

PS:
For react-native-webview ,
I did NOT do npm install --save react-native-webview ,
instead, i did expo install react-native-webview with expo-cli version 3.11.7

PPS: I tried running the expo snack of webview from here (official?) on my phone via QR code scan, yet got the same error ( "code": -1 ) .

Can someone guide how to get rid of this error and get the webview up and running?

Answer 1

Did you set the right permission in your manifest?

<uses-permission android:name="android.permission.INTERNET"/>

In your case it should be the App.json file

Answer 2

Did you try the temporary fix posted here ?

They say that there could be a problem with the websites service workers (due to a bug in Chrome 75).

The solution involves injecting this JS script to the WebView , to unregister the stalled service workers:

navigator.serviceWorker.getRegistrations().then(function(registrations) {
    for (let registration of registrations) {
        registration.unregister();
    }
});