Get my new tutorials in your inbox every week

Using WebView in React Native

using WebView in React Native

A few days back, I had a small requirement of testing a responsive web application inside a WebView in a React Native application. When I first used WebView inside a React Native application a year ago, we had a core WebView component provided by React Native. But now things have changed and they recommend a third-party module. This article talks about all that and has code examples. Let’s get started.

What is a WebView?

When it comes to accessing internet content, we typically use a browser like Chrome, Firefox, Safari, Internet Explorer, and Edge. You are probably using one of those browsers right now to read this article!

A WebView is an embeddable browser that a native application can use to display web content. A Native application is an iOS and Android application. There are others as well like Windows Phone and other OS, but we are not talking about them at the moment.

A WebView is a subset of a regular web browser. It does not have the navigation bar or the status bar of a web browser. It has just the browser viewport to display HTML.

So WebView can display a web page or the content of a web URL. We will anyways find that out when we dive into our code sample.

Why do you want to use a WebView inside a React Native application?

Because sometimes you may need to display a web page inside your React Native application or show some HTML content. For example – a Privacy Policy Page which is already published on your website. You may just want to show the web page inside your React Native application rather than typing the whole thing again.

In fact, we have been using WebViews even before React Native. I hope you have heard about hybrid mobile applications. Technologies like Phonegap/Cordova uses a WebView to show the bundled web application. So you write your application using HTML, CSS and JavaScript. Then using Phonegap you would wrap into a native package. Internally Phonegap would launch a WebView and render the packaged web application.

what is a WebView?

Getting Started

Alright, enough talking. Let’s get up and running with some code.

Note: In case you have not set up React Native, please do it first. Follow the official docs which have all the instructions.

Create a new React Native project by running this command.

react-native init WebViewTest

Once the project has been created your terminal should look like this.

create a React Native project

Add some code to the project

Open /WebViewTest/App.js. We will modify the code and add a WebView.

Import the WebView component and define it inside the render() function. You can copy-paste the code below to your App.js file.

We specify the web page URL inside the uri property of the source attribute. Here we are trying to open the Google search home page.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  WebView
} from 'react-native';


class App extends React.Component {
  render() {
    return (
      <View style={styles.conatiner}>
        <WebView source={{ uri: 'https://www.google.com' }} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  conatiner: {
    flex: 1
  }
});

export default App;

Let’s run the app now. I am launching it on an iOS simulator. How to do that?

First, start the metro bundler. It’s a local server that will bundle and compile your JavaScript. (eg. Babel transpile…)

cd WebViewTest/
npm start

Now run the app from XCode.

Open /WebViewTest/ios/WebViewTest.xcworkspace and hit the Run button. 

What do you see? Probably an error like this below. That’s because React Native core has deprecated the WebView component. It instead recommends using the react-native-webview module/component from react-native-community

React Native core has deprecated the WebView component.

Let’s fix the error

Install react-native-webview component.

Using Yarn:

yarn add react-native-webview

If using NPM:

npm install --save react-native-webview

Link native dependencies:

react-native link react-native-webview

Install the necessary pods:

cd ios/
pod install

Now we are ready to use the component. Go back to App.js and modify it.

Import the new WebView component.

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

Copy-paste the full code if needed.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
} from 'react-native';

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


class App extends React.Component {
  render() {
    return (
      <View style={styles.conatiner}>
        <WebView source={{ uri: 'https://www.google.com' }} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  conatiner: {
    flex: 1
  }
});

export default App;

Start the metro bundler again from the root of the project:

npm start

Rebuild and relaunch the App from XCode. Hit the run button the same as before.

What do you see? – You should now see the WebView showing the Google page now. So our app is working now.

React Native WebView working example

How do I know that it is a WebView?

You can try changing the URL of the page. Change it to amazon.com and see what happens?

What other attributes/props it supports?

There are a lot of other useful properties for which you can refer to the official Github repo guide.

Give me a shout out in the comments section if you liked this tutorial. Also, do share it if you liked it.

Integrate iFrame with React Native project

I have a separate step by step tutorial for that.

  1. Umesh Kumar Maurya

    Hello
    I want to load HTML, a bunch of CSS and JS files inside native webview using React Native.
    I have tried using react-native-webview but it throws an error saying js, CSS *cannot be loaded as its extension is not registered in assetExts*.
    What I want to achieve is as below:
    1. Download Zip
    2. Unzip in iPad directory which creates a folder containing HTML, CSS, JS
    3. Now if I load this folder i.e. index.html in my native webview it should show a presentation in full-screen webview.
    Approach:
    1. To try out the react-native-webview library.
    2. To create a custom library in React Native for ios which I don’t know how to do(Need help if it is suitable).
    I do understand this may not be a helpful post for everyone but please like the post or comment so that everyone can have a look.
    This is really critical for me in my project.

Write a Comment

Your email address will not be published. Required fields are marked *