CODEWITHSUNDEEP
androidreactjsreact-nativewebview
krishnanspace
krishnanspace

Reputation: 423

Access Denied while referencing path in WebView of React-Native

So I am using React-native WebView for displaying local html files. I have my files located at /storage/emulated/0/Android/data/com.package/files/sample.html. I have used React-Native-fs to write the files at this location.

Now I have a webview declared as:

<WebView source={{uri : 'file:///storage/emulated/0/Android/data/com.package/files/sample.html'}}/>

So whenever I run this , the WebView shows me the page saying net::ERR_ACCESS_DENIED. If I use the React-Native-fs readfile to read the file from that path I can do it. Why am I not able to access the file path in the webView?

Upvotes: 1

Views: 2240

Answers (2)

M Barzel
M Barzel

Reputation: 827

There is a problem with react-native-webview:

react-native-webview: We don't load your local file until we're sure the correct permissions have been set on the WebView.

Read more about this

So, on your code you have to set the url for your local file, only after the webView was loaded, here is an example how to do it:

const [isWebViewFinishedLoad, setIsWebViewFinishedLoad] = useState(false);

return(
   <WebView
       source={isWebViewFinishedLoad ? {uri: YOUR_LOCAL_HTML_PATH} : undefined}
       onLoadStart={() => setIsWebViewFinishedLoad(true)}

       allowFileAccess={true}
       allowUniversalAccessFromFileURLs={true}           
   />)

If you have a functionality that close the webView and open in again, you should reset the flag when closing the webView:

setIsWebViewFinishedLoad(false)

Upvotes: 0

krishnanspace
krishnanspace

Reputation: 423

Finally fixed it. allowFileAccess is a prop for the WebView which is set to false by default. Setting it to true allows it to access .html files from anywhere

This is what the docs say Boolean that sets whether the WebView has access to the file system. The default value is false.

Upvotes: 2

Related Questions