React Native WebView Android iOS Installation Example Tutorial

After upgrading to react native 0.60 version the inbuilt react native webview component were removed from react native. Now they have made a complete new standalone component named as react-native-webview. By making the component stand alone developers can make it more flexible according to user requirements and increase its feature. So in this tutorial we would learn about React Native WebView Android iOS Installation Example Tutorial. In today’s tutorial first we would install the WebView NPM package in our existing react native project and then we’ll load custom URL in WebView. So let’s get started .

Contents in this project React Native WebView Android iOS Installation Example Tutorial:

1. The first step is to install the latest version of react-native-webview NPM component package in your react native project. So open your react native project Root directory folder in Command Prompt like I did in below screenshot and execute below command.

<br />
npm install –save react-native-webview

1	npm install —save react–native–webview

Screenshot of CMD:

Screenshot of CMD after executing above command:

2. Now the package is successfully installed, Next step is to Link the current package to your react native package index library using link command. So execute below command again in your react native project Root directory to link the WebView.

<br />
react-native link react-native-webview

1	react–native link react–native–webview

Screenshot of CMD :

3. Now we have to start coding for project. In today’s tutorial I am using minimum code to explain how WebView component works. I am loading my own react native website URL here.

4. Complete Source Code for App.js file:

<br />
import React from ‘react’;</p>
<p>import { WebView } from ‘react-native-webview’;</p>
<p>import { SafeAreaView } from ‘react-native’;</p>
<p>export default function App() {</p>
<p>  return (<br />
    <SafeAreaView style={{flex: 1}}></p>
<p>          <WebView<br />
            style={{flex: 1}}<br />
            originWhitelist={[‘*’]}<br />
            source={{uri: ‘https://reactnativecode.com’}}<br />
            javaScriptEnabled={true}<br />
            domStorageEnabled={true}<br />
          /></p>
<p>    </SafeAreaView><br />
  );<br />
}