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.

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.

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.

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

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

9. Complete Source Code for App.js file:

Screenshot:

React Native WebView Load Local HTML File From Assets Folder

Leave a Reply

Your email address will not be published. Required fields are marked *