React Native WebView "xml file does not appear to have any style information" Error

Expo SDK
1

I’m trying to include an HTML file in a React Native WebView. The GitHub repo containing the full project is located here: https://github.com/reggie3/webview-inline-javascript-test. To summarize, the WebView shows the correct file using the XDE’s “Share” functionality. However, it displays the following error when published: “This XML file does not appear to have any style information associated with it”

The project works when “Shared” via the Expo XDE and renders the HTML file correctly as shown below:
Screenshot_20180317-060155-640x480

However, when the project is published via the XDE’s “Publish” button, I get the following ““xml file does not appear to have any style information”” error shown below:
Screenshot_20180317-061537

I have the following lines in my app.json file to ensure that the HTML file the WebView is trying to access is included in the published bundle. Note that I specifically included the HTML file to ensure it was included. I received :

"packagerOpts": {
      "assetExts": ["html"]
    },
    "assetBundlePatterns": [
      "./assets/**",
      "./assets/dist/test.html"
    ],

The HTML file is just a simple attempt to render some text:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body style="
    margin: 0 !important;
    padding: 0 !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    ">
        <h2>JavaScript in Body 123</h2>
        <div id="p1">test area</div>
    </body>
</html>

The HTML file is included in the application by via a require statement:
const INDEX_FILE = require("./assets/dist/test.html");

Finally, the WebView component looks like this:

<WebView
	style={{
		...StyleSheet.absoluteFillObject,
		backgroundColor: '#ffebba',
		padding: 10
	}}
	ref={this.createWebViewRef}
	source={INDEX_FILE}
	onLoadEnd={this.webViewLoaded}
	onMessage={this.handleMessage}
	startInLoadingState={true}
	renderLoading={this.showLoadingIndicator}
	renderError={this.renderError}
	onError={this.onError}
	scalesPageToFit={false}
	javaScriptEnabled={true}
/>

This project is an attempt to create a simple proof of concept project to diagnose and solve issues mentioned in a previous Expo Forum post: here

2

@reggie3 I also have the same issue with webview :frowning: Did you find a solution to your problem?

3

@maks171293 Nope, not yet. I’m still looking though, and will post if I find anything.

As an information point. I was ale to confirm that iOS reports a similar “AccessDeniedAccess” error followed by a long hash code.

4

@maks171293 I finally figured it out :grin:
Expo was looking for the file in the wrong location. If you use the XDE you can see that Expo is looking for the index file in the wrong location. In my case it was looking for the file in an “assets/assets” path.
This is what was displayed by the XDE:


5:54:56 PM
::ffff:192.168.1.50 - - [24/Mar/2018:21:54:53 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://192.168.1.48:19001/assets/assets/dist/index.html?platform=android&hash=5cc3fef72d2603a771d1527de1b7474f" "Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F27M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/65.0.3325.109 Mobile Safari/537.36"
5:55:37 PM
Building JavaScript bundle: finished in 548001ms.
5:55:37 PM
Unable to resolve ./dist/index.html" from "./C:\\Users\\regin\\Dropbox\\Expo Projects\\react-native-webview-leaflet\\WebViewLeaflet.js`: The module `./dist/index.html` could not be found"

This was with the following in my app.json file

"packagerOpts": {
      "assetExts": ["html"]
    },
    "assetBundlePatterns": [
      "assets/**"
    ],

I’m now able to successfully access the index.html file and run its inlined JavaScript by creating a directory called “assets” in the already existing “assets” directory, and saving index.html in there.

5

Continuing to update in case anybody else comes across this.
Attempting to use an NPM package containing a component that uses the above method results in an even more problematic path that the WebView is attempts to load its HTML file from as shown below:

::ffff:192.168.1.50 - - [25/Mar/2018:16:11:44 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://192.168.1.48:19001/assets/node_modules/react-native-webview-quilljs/assets/assets/dist/reactQuillEditor-index.html?platform=android&hash=d7e954844ad50cabd392d9fdf6f1d139" "Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F27M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/65.0.3325.109 Mobile Safari/537.36"

I think I could get it to work if there was a way to remove that first “assets” from the HTTP address. It has popped up whenever I attempt to provide a source for the WebView. The problem appears to be that something is designed to expect content from the assets directory and that’s automatically where Expo looks for it.

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.