React native (expo) web view Error net::ERR_CACHE_MISS

Question

I am using react native(expo) and try to use web view package And i am getting this warning in console and didn't see anything on mobile screen.

"sdkVersion": "36.0.0",

"expo": "~36.0.0",

"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

"react-native-webview": "^8.0.2",

Error:

Encountered an error loading page, Object { "canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_CACHE_MISS", "loading": false, "target": 2665, "title": "", "url": "https://facebook.github.io/react-native/", } - node_modules\react-native\Libraries\YellowBox\YellowBox.js:71:8 in console.warn - node_modules\expo\build\environment\muteWarnings.fx.js:18:23 in warn * http://192.168.1.100:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:209150:21 in onLoadingError - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:555:30 in invokeGuardedCallbackAndCatchFirstError
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:722:42 in executeDispatch * http://192.168.1.100:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:209150:21 in onLoadingError - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:555:30 in invokeGuardedCallbackAndCatchFirstError - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:722:42 in executeDispatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:744:20 in executeDispatchesInOrder - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:907:29 in executeDispatchesAndRelease - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:889:12 in forEachAccumulated - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:932:21 in runEventsInBatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:1096:19 in runExtractedPluginEventsInBatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2796:6 in batchedUpdates$argument_0 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18791:14 in batchedUpdates$1 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2814:26 in receiveEvent - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0 - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0 * [native code]:null in callFunctionReturnFlushedQueue

Answer 1

I'm assuming this is happening for you on an older Android device? Newer Android devices shouldn't have this issue, there is a fix in the works from Expo, but no definitive timeframe on it for now. Best advice is to develop on iOS device, emulator, or build the APK and you should be able to load it on your older device with no issue.

"Looks like this was an upstream Android issue, which is solved in androidx.appcompat:appcompat:1.2.0, currently we still use 1.1.0

Since 1.2.0 is still in alpha, it might be a good idea to wait for it to be a stable release" https://github.com/expo/expo/issues/6665#issuecomment-571623759

It looks like as of April 16 1.2.0 was released but no word from Expo yet on when it's getting rolled in. https://github.com/expo/expo/issues/6665#issuecomment-614451492

Note: I experienced the same issue on a Samsung Galaxy Tab 4 running Android 5.1.1 Lollipop. This happened using Tunnel, LAN, or Local connection mode.

One user confirms "WebView Android version 5.0 doesn't work (Android version 8-10 don't have any problem)" https://forums.expo.io/t/webview-unable-to-load-url-got-error-err-cache-miss/40011/3

I will update this answer if either of those repos comes out with a fix for the issue.

As you can see in this demo, it does work on the Android emulator: https://snack.expo.io/@wodin/webview-example