try it:
const PolicyHTML = require('./Policy.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
» npm install react-native-render-html
try it:
const PolicyHTML = require('./Policy.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
I come across this post searching for loading static html.
If your html code is retrieved using, for example, an API, you can render WebView in this way:
<WebView
originWhitelist={['*']}
source={{ html: html, baseUrl: '' }}
/>
Notice that originWhitelistis required as explained in the documentation:
Note that static html will require setting of originWhitelist for example to ["*"].
reactjs - how to import HTML file into React component and use it as a component? - Stack Overflow
How to Load local HTML and local js in react-native-webview in IOS?
Render local html file in React Native - Stack Overflow
react native webview load from device local file system - Stack Overflow
You can import or require the html file and use it in the src attribute,
var perf =require('./template.html');
class Index extends React.Component {
render(){
return (
<iframe src={perf }></iframe> /* like this */
);
}
}
export default Index;
Spent 2 hours on this.
Two ways to do the same below:
- Method1 -
iframe(part of page) goes to that html file (chap3.htm) - Method2 -
fetchthe contents ofchap3.htmand set to state, state is added withdangerouslySetInnerHTML
NOTE
- Html file is in
publicdirectory (myapp\public\chap3.htm). - May work from current directory too, but does not look like as a usual way to load static resource/html from current directory.
Method 1
import React from'react';
import'./App.css';
function App() {
return(
<div className="App">
<iframe src="chap3.htm"></iframe>
</div>
);
}
export default App;
Method 2
import React, { useEffect, useState }from'react';
import'./App.css';
function App() {
let[htmlFileString, setHtmlFileString] = useState();
async function fetchHtml() {
setHtmlFileString(await (await fetch(`chap3.htm`)).text());
}
useEffect(() => {
fetchHtml();
}, []);
return(
<div className="App">
<div dangerouslySetInnerHTML={{ __html: htmlFileString }}></div>
</div>
);
}
export default App;
I am trying to load a charting library in webview. I have tried many answers on StackOverflow and GitHub but I was only able to display it correctly on Android using {uri: 'file:///android_asset/www/index.html'} but on iOS when I do import HTML_FILE from "./resources/index.html"; ORconst HTML = require('./resources/index.html'); it doesn't work.
The app shows a blank screen, and the metro bundler throws resources/highcharts/highcharts.js' cannot be loaded as its extension is not registered in assetExts.
PS:I followed similar approach for iOS : https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
I have added simmilar question on StackOverflow as well : https://stackoverflow.com/questions/57726507/add-local-html-and-js-file-using-react-native-webview
PPS :"react-native": "0.60.5","react-native-webview": "^7.0.1"
I do not use EXPO
You have to use this module for rendering html.
https://github.com/archriss/react-native-render-html
Edit: Instead of using HTML file store your HTML into a .js file and export like this
export const MyHTML =
`<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
and then pass MyHTML to yoru HTML renderer.
If you are using react-native CLI, you have to place the local HTML file in specific folders native to ios and android. Meaning you will have two indez.html file: see - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
For Expo, I used this method:
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import React from "react";
const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
const Screen = () => {
return (
<WebView
originWhitelist={["*"]}
source={{
html: MyHtmlFile,
}}
/>
);
};
export default Screen;
const styles = StyleSheet.create({});
In react native it is now possible to require an HTML file and use it as the source for the web view like this (the path is relative to the react-native file you use it in):
const webapp = require('./webapp/index.html');
and the use it in the WebView like this:
<WebView source={webapp} />
Unfortunately this does not load CSS and JavaScript files, that are referenced in the HTML. A solution could be, to write all the CSS and JS inline (e.g. by using a build process).
I was able to include html5/javascript into project by using { html: , baseUrl: } as source. But to be frank, it's more like a lucky shot.
<WebView source={{ html: HTML, baseUrl: 'web/' }} />I have index.html, which require pano2vr_player.js and pano.xml to make this code work.
const HTML = `
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript" src="pano2vr_player.js">
</script>
<div id="container" style="width:100%;height:100%;">
<br>Loading...<br><br>
This content requires HTML5 with CSS3 3D Transforms or WebGL.
</div>
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml");
});
</script>
</body>
</html>`;
class PanoView extends Component {
render() {
return (
<View>
<WebView
style={{ flex: 1, width: 1024, height: 768 }}
source={{ html: HTML, baseUrl: 'web/' }}
javaScriptEnabledAndroid={true} />
</View>
);
}
}And finally add files/folder ('/web' same as baseUrl) to XCode project
And it works! But I'm not sure how...
so iam new to react i tried it with the create-react-app thing
it works well
i can modify but the thing is how react know what html file goes too
in index.html there are no script tags
there is this in index.js
**ReactDOM.render(<App />, document.getElementById('root'));**
but how it know which file there no file imports or script tags to that file
Get html with fetch() and parse with react-native-html-parser, process and display with WebView.
import DOMParser from 'react-native-html-parser';
fetch('http://www.google.com').then((response) => {
const html = response.text();
const parser = new DOMParser.DOMParser();
const parsed = parser.parseFromString(html, 'text/html');
parsed.getElementsByAttribute('class', 'b');
});
P.S. fast-html-parser from other answers didn't work for me. I got multiple errors while installing it with react-native 0.54.
Just download HTML with fetch(), parse it using fast-html-parser, write result to state and render that state with WebView