Table of contents

Introduction

React Native WebView

2.1.

Props of WebView

Types of WebView contents

3.1.

HTML code as String

3.2.

Display remote page

3.3.

Display remote page

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?

Conclusion

Last Updated: Mar 27, 2024

Easy

React Native Webview

Author Pradeep Kumar

Do you think IIT Guwahati certified course can help you in your career?

Yes

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.

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 WebView. We 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 Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow. Happy Coding!