React Native WebView Load Local HTML File From Assets Folder

In new react native WebView component there are so much opportunity with new features. One of them is loading local HTML(Hyper text markup language) file in WebView component. This feature allow us to hold some of HTML pages inside our application directory so when they needed in app, there are no need to use internet connection to access them. It increases our app responding time. So in this tutorial we would learn about New React Native WebView Load Local HTML File From Assets Folder in Android iOS App.

Contents in this project New React Native WebView Load Local HTML File From Assets Folder Android iOS App:

1. Before getting started the app coding we have to follow 2 most important steps. The first step is to install the react-native-webview NPM package in our current react native application. So open your react native project root directory in Command Prompt or Terminal and execute below command to install react-native-webview.

<br />
npm install –save react-native-webview

1	npm install —save react–native–webview

Screenshot of CMD:

Screenshot of CMD after done installation:

2. Now we have to run the
react–native link react–native–webview command to link the newly installed package to our react native index library.

3. Create a HTML file named as index.html with some random HTML. Below is my file you copy or download it from below.

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>Welcome Friends</title></p>
<p><style><br />
body {<br />
  background-color: LightGray;<br />
}<br />
</style></p>
<p></head></p>
<p><body></p>
<p><h1 style=”text-align: center;”><br />
<strong>Welcome Guys</strong></h1><br />
<p style=”text-align: center;”>In This Tutorial we would learn about How to show Static HTML File in WebView in React Native.</p><br />
<p style=”text-align: center;”><strong>ReactNativeCode.com</strong></p>’,</p>
<p></body><br />
</html>

<!DOCTYPE html>

<html>

<head>

<title>Welcome Friends</title>

<style>

body {

background-color: LightGray;

}

</style>

</head>

<body>

<strong>Welcome Guys</strong></h1>

<p style=“text-align: center;”>In This Tutorial we would learn about How to show Static HTML File in WebView in React Native.</p>

<p style=“text-align: center;”><strong>ReactNativeCode.com</strong></p>‘,

</body>

</html>

4. For Android put the file inside React_Native_Project -> android -> app -> src -> main -> assets -> index.html . You have to manually make the assets folder.

5. For iOS put the file inside Your_React_Native_Project -> resources -> index.html .

6. Now open your project’s main App.js file and import React, WebView and SafeAreaView component in your project.

<br />
import React from ‘react’;</p>
<p>import { WebView } from ‘react-native-webview’;</p>
<p>import { SafeAreaView } from ‘react-native’;

import React from ‘react’;

import { WebView } from ‘react-native-webview’;

import { SafeAreaView } from ‘react-native’;

7. Creating our main export default App function. This is our Root View component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

8. Creating return block and here we would first make the SafeAreaView component and put the WebView component inside it.

<br />
  return (<br />
    <SafeAreaView style={{flex: 1}}></p>
<p>      <WebView<br />
        style={{flex: 1}}<br />
        originWhitelist={[‘*’]}<br />
        source={{uri:’file:///android_asset/index.html’}}<br />
        style={{ marginTop: 20 }}<br />
        javaScriptEnabled={true}<br />
        domStorageEnabled={true}<br />
      /></p>
<p>    </SafeAreaView><br />
  );

return (

<WebView

style={{flex: 1}}

originWhitelist={[‘*’]}

source={{uri:‘file:///android_asset/index.html’}}

style={{ marginTop: 20 }}

javaScriptEnabled={true}

domStorageEnabled={true}

</SafeAreaView>

);

9. Complete Source Code for App.js file:

<br />
import React from ‘react’;</p>
<p>import { WebView } from ‘react-native-webview’;</p>
<p>import { SafeAreaView } from ‘react-native’;</p>
<p>export default function App() {</p>
<p>  return (<br />
    <SafeAreaView style={{flex: 1}}></p>
<p>      <WebView<br />
        style={{flex: 1}}<br />
        originWhitelist={[‘*’]}<br />
        source={{uri:’file:///android_asset/index.html’}}<br />
        style={{ marginTop: 20 }}<br />
        javaScriptEnabled={true}<br />
        domStorageEnabled={true}<br />
      /></p>
<p>    </SafeAreaView><br />
  );<br />
}