React Native Load Local HTML File Place Inside App in WebView

React Native’s WebView gives us an sparkling facility to Load Local HTML File with Style.CSS and JavaScript file inside WebView in Android and iOS applications. We can make a Mobile website in HTML language with CSS file and put that complete website inside our Application in a particular folder and call the specific HTML file in WebView. This would help us to create and Show Static website application for some special purpose. All the Tags in HTML file should work fine and this method also supports External CSS(Caching Style Sheet) and JavaScript + JQuery files attached to HTML file.

Contents in this project Load Local HTML File Place Inside App in WebView in Android iOS Example :

1. Create a folder inside your project folder named as Local_Website like i did in below screenshot.

2. Now Download Both SampleHtmlFile.html and Style.css file from below and copy inside Local_Website folder.

Download SampleHtmlFile.html File.

Download Style.css File.

Code For SampleHtmlFile.html file :

<br />
<HTML></p>
<p><HEAD> </p>
<p><link rel=”stylesheet” href=”styles.css”></p>
<p><TITLE> Sample Web Page </TITLE></p>
<p></HEAD></p>
<p><BODY></p>
<p><H1> THIS IS SAMPLE HEADING IN WEBPAGE. </H1></p>
<p><p> Sample Paragraph Tag Text in HTML File. </p></p>
<p></BODY></p>
<p></HTML>

<HTML>

<HEAD>

<TITLE> Sample Web Page </TITLE>

</HEAD>

<BODY>

<H1> THIS IS SAMPLE HEADING IN WEBPAGE. </H1>

<p> Sample Paragraph Tag Text in HTML File. </p>

</BODY>

</HTML>

Code for styles.css file :

<br />
body {<br />
    background-color: #00BCD4;<br />
}<br />
h1 {<br />
    color: #fff;<br />
}<br />
p {<br />
    color: #fff;<br />
}

body {

background–color: #00BCD4;

}

h1 {

color: #fff;

}

p {

color: #fff;

}

Now next step is to start coding your application.

3. Open your App.js file and Import StyleSheet, WebView and Platform component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, WebView, Platform} from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, WebView, Platform} from ‘react-native’;

4. Create a const variable named as LoacalWebURL and set the Web page URL using require format.

<br />
const LoacalWebURL = require(‘./Local_Website/SampleHtmlFile.html’);

1	const LoacalWebURL = require(‘./Local_Website/SampleHtmlFile.html’);

5. Create the WebView component inside render’s return block and set Source as LoacalWebURL . This would directly navigate the Source to local webpage.

<br />
render() {</p>
<p>       return (</p>
<p>         <WebView<br />
         style={styles.WebViewStyle}<br />
         source={LoacalWebURL}<br />
         javaScriptEnabled={true}<br />
         domStorageEnabled={true}  /></p>
<p>       );<br />
     }

render() {

return (

<WebView

style={styles.WebViewStyle}

source={LoacalWebURL}

javaScriptEnabled={true}

domStorageEnabled={true} />

);

}

6. Create Custom Style.

<br />
const styles = StyleSheet.create(<br />
{</p>
<p>WebViewStyle:<br />
{<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   flex:1,<br />
   marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
}<br />
});

const styles = StyleSheet.create(

{

WebViewStyle:

{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

marginTop: (Platform.OS) === ‘ios’ ? 20 : 0

}

});

7. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, WebView, Platform} from ‘react-native’;</p>
<p>const LoacalWebURL = require(‘./Local_Website/SampleHtmlFile.html’);</p>
<p>export default class MainActivity extends Component {</p>
<p>     render() {</p>
<p>       return (</p>
<p>         <WebView<br />
         style={styles.WebViewStyle}<br />
         source={LoacalWebURL}<br />
         javaScriptEnabled={true}<br />
         domStorageEnabled={true}  /></p>
<p>       );<br />
     }<br />
   }</p>
<p>const styles = StyleSheet.create(<br />
{</p>
<p>WebViewStyle:<br />
{<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   flex:1,<br />
   marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
}<br />
});