Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native WebView
2.1.
Props of WebView
3.
Types of WebView contents
3.1.
HTML code as String
3.2.
Display remote page
3.3.
Display remote page
4.
Frequently Asked Questions
4.1.
How can you style HTML content when you are displaying HTML code as a string?
4.2.
Why do we put the margin on top while displaying a remote page?
4.3.
What is the difference between the style content of the Webview and the style component of the HTML content?
5.
Conclusion 
Last Updated: Mar 27, 2024
Easy

React Native Webview

Author Pradeep Kumar
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into React Native WebView. React Native WebView is a native viewer for web content. It renders web content in native view. If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development, Hooks in React JS

React Native WebView

React Native WebView is a component for loading web pages. The WebView component comes from the react-native library's core. The WebView has been moved from the react-native-core library to the react-native-webview library. For example,

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

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{
          uri: 'https://www.codingninjas.com'
        }}
        style={{ marginTop: 30 }}
      />
    );
  }
}

Output:

                                                                                

Note: To use the react-native-webview library, you first need to install it. The installation can be done using the command expo install react-native-webview if you are running the program using expo-cli. In the case of npm, the installation command is: npm i react-native-webview.

Props of WebView

  • source: It contains the reference to the page that is to be displayed on the app. There are many ways to pass the source. The first method is to pass the HTML content as a text file, along with any authentication headers that may be required for image links or other purposes. The second option is to pass a URI, which can be either a local or a remote file.
  • injectedJavascript: We can supply any js code to run at the start of the script using this prop. Instead of using the WebView, we could use the js code to open all of the links in the browser.
  • onLoad: When the loading is complete, the method is invoked. The onLoadStart is invoked at the start of load, and the onLoadEnd method is called at the end of loading.
  • onMessage: This can be used to communicate between the web view's window objects and the React Native side.
  • injectJavascript: With a js code as an argument, this procedure can be invoked at any time. When called, this is immediately executed. This can be used to send information from the RN to the web view.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Types of WebView contents

Following are the type of web view contents supported by React Native.

HTML code as String

As the name suggests, you can display HTML code in string format as the webview content. The HTML string code is supplied to the source property's html prop. For example,

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

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{
          html: '<h1 style = "font-size: 200px">Welcome to Coding Ninjas</h1>'
        }}
        style={{ margin: 50}}
      />
    );
  }
}

Output:

                                                                

Display remote page

To display a remote page, you can use the uri tag in the source property. For example,                                                   

Display remote page

To display a remote page, you can use the uri tag in the source property. For example,

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

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{
          uri: 'https://www.codingninjas.com/courses/android-app-development'
        }}
        style={{ marginTop: 30 }}
      />

    );
  }
}

Output:

                                                                           

Frequently Asked Questions

How can you style HTML content when you are displaying HTML code as a string?

To style the HTML content, inline CSS can be used. And also, you can create a separate HTML file, style it normally and pass the reference of the file to the source tag; the file(internal web page) will be displayed on the app. 

Why do we put the margin on top while displaying a remote page?

The margin on top is put to separate the webpage from the device's status bar. If you don't put a margin on the top, the content of the webpage will overlap with the status bar.

What is the difference between the style content of the Webview and the style component of the HTML content?

The style component of the Webview styles the page, not the content of the page. To style the HTML content of the webpage, you can use inline CSS.

Conclusion 

In this article, we have extensively discussed React Native WebViewWe hope that this blog has helped you enhance your knowledge regarding React Native WebView, and to learn more, check out our other article on React Native Switch

And also, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. Happy Coding!

Previous article
React Native Switch
Next article
React Native Progress Bar
Live masterclass