Load Local HTML File or URL in React Native using react-native-webview

Load Local HTML File or URL in React Native using react-native-webview is the updated and combined post of our last 2 posts Open any Website in React Native WebView and React Native Load Local HTML File in WebView. This is because WebView extracted from the react-native core will be removed in the near future so to overcome this problem I have made this new and updated Post.

In this example, we will use the WebView component from react-native-webview. We will make a single page where we will have 3 buttons which will load the data in WebView from different resources.

Different tasks that you can see in this example are:

1. Loading of WebPage from URL

2. Load HTML Page from a variable with HTML String

3. Load a Local HTML File

Installation of Dependency

To use WebView you need to install react-native-webview dependency.
To install this dependency open the terminal and jump into your project

Run the following commands

This command will copy the dependency into your node_module directory. –save is optional, it is just to update dependencies in your package.json file.

Linking of Dependency

After installing the dependency you need to link it with your project using

After linking the dependency if you face Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

Project File Structure

If you want to load the HTML from the local HTML file into the WebView then you need to put them in the below-described directory.  You have to make 2 copies of the HTML file and have to put them on a different location for Android and IOS. If the directories are not there then please make the directory and then put the HTML file.

1. Android will load the external HTML from project>android>app>src>main>assets>index.html
2. IOS will load the external HTML from project>resources>index.html

Now open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

IOS

      

Android

      

This is how you can Load Local HTML File or URL in React Native using react-native-webview. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Show Progress bar While Loading WebView

This example is sort of extension of our previous post of Webview Example in which we have loaded the HTML page from URL. Here is the example of how to Show Progress bar While Loading WebView. As it is the import topic to cover so we decided to cover it separately.

WebView extracted from the react-native core will be removed in the near future (You can see the screenshot below) so I have made an updated post on How to Load Local HTML File or URL in React Native using react-native-webview. Please visit the updated post.

 

In this example, we will show the ActivityIndicator while the webpage is loading this will help the user to understand that application is doing some task. If we do not apply the progress bar and web page took some extra time to load then the user will be confused that the application is not working so we suggest you use Progress Bar if you are using WebView to load the webpage.

We have to add renderLoading prop in WebView in which we will return the view which we want to show while the page is loading. For this example, we will return the ActivityIndicator like

To Import WebView in code

Render WebView Using

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Now open App.js in any code editor and replace the code with the following code.

App.js

(Use if you want to show the loader once when opening a web URL)

App.js (Updates)

(Use if you want to show the loader every time whenever you click on links in Webview)

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

         

This is how you can show the progress bar while loading webview. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Load Local HTML File in WebView

Before the example React Native Load Local HTML File in WebView, we are hoping you have visited our Webview Example in which we have loaded the HTML page from URL. Here is the example of how to show a webpage from the locally available HTML file.

WebView extracted from the react-native core will be removed in the near future (You can see the screenshot below) so I have made an updated post on How to Load Local HTML File or URL in React Native using react-native-webview. Please visit the updated post.

 

We are using the same WebView component to load our local HTML file. We just have to use

in place of

To Import WebView in Code

Render WebView Using

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open the terminal again and jump into your project using.

Project File Structure

Now make a directory named resources and place an index.html file there.

For this Example, you can use the below index.html

index.html

Now open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

IOS

Android

This is how you can load local HTML file in Webview in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂