DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Because the DevOps movement has redefined engineering responsibilities, SREs now have to become stewards of observability strategy.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Related

  • Cross-Platform Mobile Application Development: Evaluating Flutter, React Native, HTML5, Xamarin, and Other Frameworks
  • React, Angular, and Vue.js: What’s the Technical Difference?
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • How to Build a React Native Chat App for Android

Trending

  • Apple and Anthropic Partner on AI-Powered Vibe-Coding Tool – Public Release TBD
  • Agile’s Quarter-Century Crisis
  • Creating a Web Project: Caching for Performance Optimization
  • Modern Test Automation With AI (LLM) and Playwright MCP
  1. DZone
  2. Coding
  3. JavaScript
  4. React Native WebView — Loading HTML in React Native

React Native WebView — Loading HTML in React Native

In this article, see a tutorial on how to load HTML in React Native.

By 
Krissanawat Kaewsanmuang user avatar
Krissanawat Kaewsanmuang
·
Jun. 17, 20 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
15.1K Views

Join the DZone community and get the full member experience.

Join For Free

In React Native, WebViews enable access to any web portal in the mobile app itself. In other words, a web view allows us to open the web URLs inside the app interface. While React Native provides us with a built-it web view component, but we are going to use react-native-webview plugin in this tutorial, since it is more powerful. React Native WebView is a modern, well-supported, and cross-platform WebView for React Native.

The built-in Webview from React Native is to be deprecated pretty soon based on this document. Hence, this plugin serves as the replacement for the built-in web view. This plugin is a third-party plugin supported by the react-native community.

Requirements

The requirements to follow this tutorial are:

  • Nodejs >=8.x.x with npm or yarn installed as a package manager.
  • watchman a file watching service.
  • react-native-cli.

Getting Started With React Native WebView

In order to get started with web view configuration, we need to install the actual plugin first. Here, we are using yarn to install the plugin but we can use NPM (Node Package Manager) as well. Hence, in order to install the plugin, we need to run the following command in the command prompt of our project folder:

  1. yarn add react-native-webview

If the react-native version is equal or greater than 0.60 then, the installation also takes care of auto-linking the plugin to native configurations. But, in the case of earlier versions, we may need to run:

  1. react-native link react-native-webview

iOS

In the case of iOS, we also need to run the following command:

  1. pod install

Android

In the case of Android, this module does not require any extra step after running the link command. But for the react-native-webview version >=6.X.X, we need to make sure AndroidX is enabled in our project. This can be done by editing android/gradle.properties and adding the following lines:

  1. android.useAndroidX=true
  2. android.enableJetifier=true

This completes our installation steps. We can now use the plugin in our react native project.

Loading Inline HTML Using React Native WebView

First, we are going to load a simple HTML content into our app interface. For that, we need to add the following imports in our App.js file:

JavaScript
 




x


 
1
import React, { Component } from 'react';
2
import { WebView } from 'react-native-webview';



Here, we have imported the WebView component from the react-native-webview plugin. Now, we can make use of this component in order to load the HTML content as shown in the code snippet below:

JavaScript
 




xxxxxxxxxx
1
12


 
1
import React, { Component } from 'react';
2
import { WebView } from 'react-native-webview';
3
class MyInlineWeb extends Component {
4
  render() {
5
    return (
6
      <WebView
7
        originWhitelist={['*']}
8
        source={{ html: '<h1>This is a static HTML source!</h1>' }}
9
      />
10
    );
11
  }
12
}



Here, we have defined the MyInlineWeb class component. This class component has a render() function that renders the WebView component. The WebView component has the HTML content configured to its source prop. As a result, we can see the HTML content is rendered in the app interface as shown in the emulator screenshot below:

Loading Remote URL

Now, instead of simple HTML content, we are going to load the entire website content from the remote URL. For that, we need to provide the uri option to the source prop of WebView component as shown in the code snippet below:

JavaScript
 




xxxxxxxxxx
1


 
1
import React, { Component } from 'react';
2
import { WebView } from 'react-native-webview';
3

          
4
class MyWeb extends Component {
5
  render() {
6
    return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
7
  }
8
}



Hence, we will get the entire webpage of the website opened in the app’s web view itself as shown in the screenshot below:

Adding a Loading Spinner to React Native Webview

While accessing the URL from the WebView component, it may take some time for entire HTML content on the website to load. So, in order to represent the delay, we are going to display a loading indicator until the website loads. For this, we need to import the ActivityIndicator component from the react-native package as shown in the code snippet below:

JavaScript
 




xxxxxxxxxx
1


 
1
import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';



Now, we need to make use of the ActiviIndicator component in our project. For that, we are going to create a function called LoadingIndicatorView() which will return the ActivityIndicator as shown in the code snippet below:

JavaScript
 




xxxxxxxxxx
1
18


 
1
import * as React from 'react';
2
import { Text, View, StyleSheet,ActivityIndicator } from 'react-native';
3
import { WebView } from 'react-native-webview';
4
5
import { Card } from 'react-native-paper';
6
 function LoadingIndicatorView() {
7
    return <ActivityIndicator color='#009b88' size='large' />
8
  }
9
export default function App() {
10
  return (
11
   <WebView
12
        originWhitelist={['*']}
13
        source={{ uri: 'https://instamobile.io/blog' }}  
14
        renderLoading={this.LoadingIndicatorView}
15
        startInLoadingState={true}
16
      />
17
  );
18
}



Here, we have used the AcitivityIndicator with color and size props. Then, we have invoked the LoadingIndicatorView function onto the renderLoading prop of the WebView component. This allows us to display the loading indicator until the website fully loads. We can see that startInLoadingState prop is also used here. This boolean value forces the WebView to show the loading view on the first load. This prop must be set to true in order for the renderLoading prop to work.
As a result, we get the following result in our emulator simulation:

Conclusion

In this tutorial, we learned about the web view property of React Native. Since the in-built web-view feature of React Native is to be deprecated, we learned how to make use of the third party web view plugin named react-native-webview. First, we learned how to render the simple HTML content using the WebView component. Then, we got a detailed explanation of how to use the WebView component and its props to render the entire HTML content from the URL along with the loading indicator. In case you want to learn more, you can go-ahead to the main repository for discussion regarding this web view plugin.

HTML React Native React (JavaScript library)

Published at DZone with permission of Krissanawat Kaewsanmuang. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Cross-Platform Mobile Application Development: Evaluating Flutter, React Native, HTML5, Xamarin, and Other Frameworks
  • React, Angular, and Vue.js: What’s the Technical Difference?
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • How to Build a React Native Chat App for Android

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!