How to use one WebView in react native

Introduction :

WebView is used to show one web component. We will provide one url and it will render that web page in a view. React native community provides one package to handle web view. This is a cross platform package and works with iOS, Android, MacOS and Windows. In this tutorial, I will show you how to use webview in react native with one example.

Installation of react-native-webview :

Move to your react native project using cd and run the below command to install :

npm i react-native-webview

Starting from react native 0.6, the linking of a package is done automatically. But we need to install it for iOS from cocoapods using pod install. For that, move to the iOS directory and run pod install :

cd ios && pod install

It will do the installation. For Android, we need to enable AndroidX. Open your android/gradle.properties file and check for the below two lines :

android.useAndroidX=true
android.enableJetifier=true

If you don’t have these lines, just add it.

How to use :

You can import the WebView component from react-native-webview and include it in a component :

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

export default function HomeScreen() {

  return (
      <WebView
        source={{ uri: 'https://google.com' }}
        style={{margin: 20 }}
      />
  );
}

Running on an iOS simulator will produce one result as like below :

And on Android emulator :