Using WebView in React Native

Learn how to use WebView in React Native and display HTML content in your React Native app.

In this article, you will be provided with a step-by-step guide on using WebView in React Native.

Next post ↑
Sending Emails in React Native
Previous post ↓
How to Add a Splash Screen in React Native

WebView is a web browser integrated into a native app to display web content. It allows app users to use the web browser and access its content within the app, instead of opening or switching to a separate browser on a different interface.

This saves space and memory usage on smart devices. A good example is the Android System WebView for Android app developers.

React Native, a JavaScript-based mobile app framework for building cross-platform native apps exclusively supports the use of WebView. A third-party package – react-native-webview is available for react native app developers to use for the implementation of WebView in apps.

Note: You should have prior knowledge of React Native for a better understanding of this tutorial.

How to use WebView in React Native?

You should already have a react native project initialized to follow this tutorial. You can create or initialize a new react project with the react native CLI or using Expo.

For CLI;

react-native init NewProject

For Expo;

expo init NewProject

Change the NewProject to the desired name of the project.

Here’s a step-by-step tutorial on using WebView in React Native;

Install the React Native WebView package

To use WebView in React Native, you have to install the third-party package in your project directory.

If you are using npm package manager:

npm install react-native-webview

If you are using yarn package manager:

yarn add react-native-webview

Or, if you’re using Expo, run the following command;

expo install react-native-webview

Lastly, we have to link the native packages:

npx pod-install

In React Native 0.60+ the CLI autolink feature links the module while building the app.

Usage

Now that you have successfully installed the React Native WebView package, you have to import the Webview component from the react-native-webview in the App.js file.

In this example, when the WebView component is rendered, the source URL content is displayed.

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

export default function Example() {
	return (
		<WebView
			source={{ uri: 'https://withfra.me'}}
			style={{ flex: 1 }}
		/>
	)
}

Apart from using URL as the source for the WebView component, you can use inline HTML.

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

export default function Example() {
  const htmlContent = `
		<html>
			<head>
				<title>Example</title>
			</head>
			<body>
				<h1>Hello</h1>
				<p>This is an Inline HTML example displayed in WebView.</p>
			</body>
		</html>
	`;


  return (
    <WebView
      originWhitelist={['*']}
      source={{ html: htmlContent }}
      style={{ flex: 1 }}
    />
  );
}

In the above example, the htmlContent variable serves as the source for the WebView component. The inline HTML will be displayed when the WebView component is rendered. The originWhitelist is to ensure the loading of the inline HTML.

You can add some inline CSS styling to your inline HTML to style it. You can also integrate JavaScript for dynamic features.

Adding custom CSS styling

React Native WebView component displaying HTML with custom CSS stylings

To add custom CSS styling, just follow the normal way of adding inline CSS to an HTML script. Like this;

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

const MyWebView = () => {
  const htmlContent = `
    <html>
      <head>
        <title>Example</title>
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #2E3440;
            padding: 120px 24px;
          }
          h1 {
            color: #fff;
            font-size: 60px;
          }
          p {
            color: #8f8f8f;
            font-size: 36px;
          }
        </style>
      </head>
      <body>
        <h1>Hello</h1>
        <p>This is inline HTML content displayed in a WebView.</p>
      </body>
    </html>
  `;

  return (
    <WebView
      originWhitelist={['*']}
      source={{ html: htmlContent, baseUrl: 'web/' }}
      style={{ flex: 1 }}
    />
  );
}

export default MyWebView;

In the example above, a custom CSS styling is added to style the webpage when rendered.

Adding JavaScript

Adding JavaScript to the webpage introduces dynamic features. JavaScript can be added in two ways;

Using the injectedJavascipt property

React Native WebView component displaying HTML with custom JavaScript

This prop only runs once when the user loads the page for the first time.

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

export default function Example() {
  const htmlContent = `
    <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello</h1>
        <p>This is inline HTML content displayed in a WebView.</p>
      </body>
    </html>
  `;

  const injectedJavaScript = `
    document.body.style.backgroundColor = 'red';
    setTimeout(function() { window.alert('Hello from WebView') }, 2000);
    true; // this is required
  `;

  return (
    <WebView
      originWhitelist={['*']}
      source={{ html: htmlContent, baseUrl: 'web/' }}
      injectedJavaScript={injectedJavaScript}
      style={{ flex: 1 }}
      onMessage={() => {}} // this is required
    />
  );
}

The injectedJavaScript prop is used to set the background color of the webpage to red. This only works on the first load.

Note: injectedJavaScript has to return true; in order to prevent silent failures. onMessage is also required for the same reason.

Using the injectJavascript method

React Native WebView component displaying HTML with custom JavaScript method

This method addresses the limitation of the injectedJavaScript prop. The injectJavaScript method allows execution of code more than once.

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

export default function Example() {
  const webViewRef = useRef(null);
  
  const htmlContent = `
    <html>
      <head>
        <title>Example</title>
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #2E3440;
            padding: 120px 24px;
          }
          h1 {
            color: #fff;
            font-size: 60px;
          }
          p {
            color: #8f8f8f;
            font-size: 36px;
          }
          button {
            font-size: 36px;
          }
        </style>
      </head>
      <body>
        <h1>Hello</h1>
        <p>This is inline HTML content displayed in a WebView.</p>
        <button id="myButton">Click me!</button>
      </body>
    </html>
  `;
  
  const customScript = `
    document.getElementById('myButton').addEventListener('click', function() {
      alert('Button clicked!');
    });
  `;
  
  const handleWebViewLoad = () => {
    webViewRef.current.injectJavaScript(customScript);
  };
  
  return (
    <WebView
      ref={webViewRef}
      originWhitelist={['*']}
      source={{ html: htmlContent }}
      javaScriptEnabled={true}
      onLoad={handleWebViewLoad}
      style={{ flex: 1 }}
    />
  );
}

In the example above, the WebView component is first referenced using the useRef. A custom script is created for the JavaScript code. Then the injectJavaScript method is used to inject the JavaScript code into the web page.

In this article, you have learned the basic ways of using the WebView component in React Native. You can refer to the React Native WebView documentation for more information.