Unable to load local file on Android

When trying to open a local webpage from tyhe local file system (using file://) it works on iOS, but on Android we get an error:

Encountered an error loading page:
{
  canGoBack: false,
  canGoForward: false,
  code: -1,
  description: "net::ERR_ACCESS_DENIED",
  loading: false,
  target: 165,
  title: "Webpagina niet beschikbaar",
  url: "file:///data/user/0/com.twipepocv4/cache/data/36/Page-313.html",
}

This is my code:

      <WebView
        originWhitelist={['*']}
        allowFileAccess={true}
        source={{uri: "file:///data/user/0/<myapp>/cache/data/36/Page-319.html"}}
        domStorageEnabled={true}
        allowUniversalAccessFromFileURLs={true}
        allowFileAccessFromFileURLs={true}
      />

I believe this has something to do with AllowFileAccessFromFileURLs but I can’t get it to work. Should any other permission be set?

[hsource]

@tjensen is exactly right on the cause. Here’s a more detailed investigation and a workaround that we use. This only applies to Android 10.

Problem

react-native-webview on Android handles the allowFileAccess and allowUniversalAccessFromFileURLs by calling view.getSetings().setAllowFileAccess() in the Java code: https://github.com/react-native-community/react-native-webview/blob/47e9a0b/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java#L484

At the same time, setting source calls view.loadUrl(). This results in a race where if view.loadUrl() executes before the security settings are updated, the page-load will fail.

Workaround

We don’t load your local file until we’re sure the correct permissions have been set on the WebView.

On the component you have that renders <WebView source={...}>:

1. Create a state variable in the constructor or the class

this.state = { renderedOnce: false };

1. In componentDidMount, set that variable to be true

componentDidMount() {
  this.setState({ renderedOnce: true });
}

1. When rendering, render your file only when renderedOnce is true:

render() {
  return <WebView source={renderedOnce ? { uri: indexHtmlPath } : undefined} />;
}

[mayursarode4]

You guys are not doing properly, Proper ways is as follows: First install it using (If not installed), npm install --save react-native-webview // inside project root directory react-native link react-native-webview // it will link WebView with iOS and Android

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import {LocalHtml} from './project-root/html/demo.html'; // path of your file starts with "./"
_// as per above example replace it with above LocalHtml_
_//import {LocalHtmlText} from './data/user/0/com.twipepocv4/cache/data/36/Page-313.html';_

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: LocalHtml }} // here it will render your html content and load on webview.
        javaScriptEnabled={true}
        domStorageEnabled={true}
        useWebKit={true}
        startInLoadingState={true}

      />
    );
  }
}

I hope this will help you guys.