A WebView is an embedded browser that can be used to display web pages inside your React Native applications. It can display anything starting from custom HTML elements to entire web applications inside React Native.

In React Native, we can use the Webview by using a third-party package called, react-native-webview. This is the official implementation of webview after it was removed from the React native core to keep the core as lean as possible.

In this post, we're going to implement a simple project to see how to work with Webview's on React Native and what are some of the good use cases it serves.

Create a React Native project

To get started we need to begin a new project with React Native CLI. You can do this with expo if you don't want to go through a tedious installation process.

npx react-native init ExperimentingWithWebview

With Expo:

If you're using Expo, you can jump straight to Implementing a Basic WebView after this.

expo install react-native-webview

Add dependencies

// For npm users
npm install react-native-webview

// If you're using yarn

yarn add react-native-webview

Link native dependencies

You'll only need this if you're not using Expo and using React Native CLI to start your project.

If you're using react-native ≥ 0.60 autolinking will take care of this step so feel free to skip, but don't forget to run pod install

react-native link react-native-webview

If you ever uninstall this package,

react-native unlink react-native-webview

For iOS and macOS

If using cocoapods, in ios/ or macos/ directory run,

pod install

For Android

If you're using react-native-webview < 6: Feel free to skip

If you're using react-native-webview ≥ 6.x.x

Make sure AndroidX is enabled in your project by editing android/gradle.properties

android.useAndroidX=true
android.enableJetifier=true

Chances are this is already done by React Native CLI automatically.

Implementing a basic WebView

It's time to get rid of the boilerplate code inside app.js and write our code for webview.

// App.js

import React from "react";
import { SafeAreaView, StatusBar } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <WebView source={{ uri: "https://medium.com/" }} />
      </SafeAreaView>
    </>
  );
};

export default App;

This is all you need to do inorder to display a website into your application.

originWhitelist prop

This is a list of origin strings that you are allowed to navigate inside the webview component. It takes an array of strings. By default it's values are, http:// and https://. If the user navigates to a new page that isn't in whitelisted origins, the URL will be handled by the OS.

<WebView
  source={{ uri: "https://www.educative.io/" }}
  originWhitelist={["https://*", "git://*"]}
/>

Loading local/inline HTML files

You can also load local or inline HTML files into a Webview and this is how you can achieve that.

const sourceHtml = require("./src/index.html"); // your html file here

export const App = () => <WebView source={{ html: sourceHtml }} />;

Or add some inline HTML.

export const App = () => {
  const htmlSource =
    '<h1 style="font-size:100px; padding: 50px; text-align: center;">Hello World 🌍</h1>';

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView source={{ html: htmlSource }} />
    </SafeAreaView>
  );
};

Injecting custom javascript to webview

You can also add your own javascript that can run inside the webview. You can use it to manipulate the behavior of the website you're loading as per your needs.

There are two ways to do this:

1. injectedJavascript prop
2. injectJavascript method

Their names can be confusing so shall understand them based on their purpose, it'll be clear to you in a few examples.

injectedJavascript prop

This is a prop to the Webview component which contains the scripts that'll run once the web page loads for this first time. It only runs once, even if the webpage is reloaded or navigated away.

For example

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  const scripts = `
      document.body.style.backgroundColor = 'hotpink';
      document.querySelector("h1").style.color = 'skyblue';
      document.querySelector("p").style.padding = '20px';
      true;
    `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: "https://www.example.com/" }}
        injectedJavaScript={scripts}
      />
    </View>
  );
};

export default App;

injectJavascript method

As we know the above injectedJavascript prop that we discussed only works on first load and there is no other way if we want to run scripts at multiple times or page navigations. That's why, Webview exposes this method injectJavascript on its reference.

Example

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const getRandomColor = () => {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

class App extends React.Component {
  render() {
    const scripts = () => {
      const color = getRandomColor();

      return `
      document.body.style.backgroundColor = '${color}';
      document.body.style.color = '${color}';
      document.body.querySelector("a").style.color = '${color}';
      true;
      `;
    };

    setInterval(() => {
      this.webref.injectJavaScript(scripts());
    }, 500);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
        />
      </View>
    );
  }
}

export default App;

While all these ways can help you manipulate the webview as per your needs, one more requirement of yours can be sending or receiving data from the webpage inside WebView. So now we'll discuss how you can communicate between your JS and React Native app.

Communicating between JS and React Native

This requires the use of two things:

1. window.ReactNativeWebView.postMessage function
2. onMessage prop

The window.ReactNativeWebView.postMessage is a function that's exposed to the injected scripts inside WebView. You can basically pass anything to it, provided they're properly serialized. It'll be clear in the below example.

Rest apart, whatever you pass inside postMessage can be accessed in React Native through the callback passed into onMessage prop. onMessage is a prop for the Webview which takes a callback and is triggered anytime a message is sent using postMessage.

Example

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const getRandomColor = () => {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

class App extends React.Component {
  render() {
    const scripts = () => {
      const color = getRandomColor();

      return `
      document.body.style.backgroundColor = '${color}';
      document.querySelector("h1").style.color = 'hotpink';    

      window.ReactNativeWebView.postMessage(document.body.style.backgroundColor);
      true;
      `;
    };

    setInterval(() => {
      this.webref.injectJavaScript(scripts());
    }, 500);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
          onMessage={event => console.log(event.nativeEvent.data)}
        />
      </View>
    );
  }
}

export default App;

This simply logs the background color of the webpage whenever it's changed. As you can see, we are passing the callback inside onMessage prop which gets triggered on postMessage.

The actual event object that's passed inside onMessage callback is this, [nativeEvent.data](http://nativeevent.data) is the argument we passed inside window.ReactNativeWebView.postMessage.

{
    "nativeEvent":
             {
                        "canGoBack": false,
                        "canGoForward": false,
                        "data": "rgb(247, 75, 142)",
                        "loading": false,
                        "target": 15,
                        "title": "Example Domain",
                        "url": "https://www.example.com/"
             }
}

Handling Navigation State Changes

Now we'll discuss how you can intercept whenever a user navigates inside the webview to a different webpage or clicks on any link. You can place a callback that'll happen anytime the route changes.

onNavigationStateChange prop

This takes a callback which is triggered whenever the user navigates inside the webview. It passes the current navigation state as an argument that can be accessed inside the callback.

Example

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

class App extends React.Component {
  handleNavigationStateChanged = navState => {
    const { url, title } = navState;
    console.log({ url, title });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
          onNavigationStateChange={this.handleNavigationStateChanged}
        />
      </View>
    );
  }
}

export default App;

Basic navState param structure passed into handleNavigationStateChanged:

{
    "canGoBack": false,
    "canGoForward": false,
    "loading": false,
    "target": 3,
    "title": "Example Domain",
    "url": "https://www.example.com/"
}

Just as a cool project you can play around with WebView and use many of its available methods such as goForward and goBack, stopLoading (or even add apple pay support) to replicate a browser-like feel for your users, just like we used injectJavascript method above.

References

You can refer to React Native WebView docs to have an overview of all that it offers or references page to grab a look at all the available props and methods. If you're down for the above project, you can go over this blog tutorial if you ever get stuck.

Feel free to reach out to me on Twitter (@thebuildguy) if you've any questions and for more tech content.