React Native WebView Component

In this article, We are going to see how to create a WebView in react-native. WebView is used to display web content in an application. For this, we are going to use WebView Component.

Syntax :

<WebView
    source={}
/>

Props of WebView :

source: It basically loads the URL in the web view.
automaticallyAdjustContentInsets: It controls the content inset for web views. It’s default value is true.
injectJavaScript: It injects JavaScript into the web view.
injectedJavaScript: It also injects JavaScript into the web view, but it runs immediately as the view loaded, and it runs once only.
mediaPlaybackRequiresUserAction: It determines whether the HTML5 audio and video require the user to tap them before they start playing. By default, it is true.
nativeConfig: It overrides the native component which is used to render the web view.
onError: It is a function that is invoked when web view load fails.
onLoad: It is a function that is invoked when the web view is loaded.
onLoadEnd: It is a function that is invoked when the web view load is ended.
onLoadStart: It is a function that is invoked when the web view starts loading.
onMessage : It is a function that is invoked when the WebView calls ‘window.postMessage‘.
onNavigationStateChange: It is a function that is invoked when the WebView loading starts or ends.
originWhitelist: It is a list of origin strings to allow being navigated to. The default origin lists are “http://*” and “https://*”.
renderError: It is a function that returns a view to show if there’s an error.
renderLoading: It is a function that returns a loading indicator.
scalesPageToFit: It controls whether the content is scaled to fit the view or not. It’s default value is true.
onShouldStartLoadWithRequest: It is a function that allows custom handling of any web view request.
startInLoadingState: It basically forces the WebView to show the loading view on the first load.
decelerationRate: It is a floating-point number that determines how quickly the scroll view decelerates. You can also use the shortcut i.e. normal and fast.
domStorageEnabled: It controls whether the DOM storage is enabled or not. It is only for the android platform.
javaScriptEnabled: It controls whether the JavaScript is enabled or not. It is only for the android platform and by default its value is true.
mixedContentMode: It basically specifies the mixed content model. Its possible values are never, always, and compatible.
thirdPartyCookiesEnabled: It enables the third-party cookies if true. Its default value is true.
userAgent: It sets the user agent for the web view.
allowsInlineMediaPlayback: It determines whether HTML5 videos play inline or use the native full-screen controller. It’s default value is false.
bounces: It determines whether the web view bounces when it reaches the edge of the content. Its default value is true.
contentInset: It is the amount by which the web view content is inset from the edges of the scroll view.
dataDetectorTypes: It determines the types of data converted to clickable URLs in the web view’s content. It’s possible values are phoneNumber, link, address, calendar event, none and all.
scrollEnabled: It determines whether the scrolling is enabled or not. By default, it is true.
geolocationEnabled: It determines whether the geolocation enables or not in web view. By default, it is false.
allowUniversalAccessFromFileURLs: It determines whether JavaScript running in the context of a file scheme URL should be allowed to access content from any origin. Its default value is false.
allowFileAccess: It determines whether web view has system files access or not. By default, it is false.
useWebKit: It is a deprecated prop. Use the source prop instead.
html: It is also a deprecated prop. Use the source prop instead.

Methods in WebView :

goForward(): It takes you one page forward in the web view.
goBack(): It takes you one page back in the web view.
reload(): It reloads the current page in the web view.
stopLoading() : It stops loading in web view.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.
```
npm install -g expo-cli
```
Step 2: Now create a project by the following command.
```
expo init myapp
```
Step 3: Now go into your project folder i.e. myapp
```
cd myapp
```
Step 4: For WebView we have WebView component in react-native which helps us to display the web content in an application, but that component is now deprecated, So in substitute for this we are going to use an external package called react-native-webview. Install that package by using the following command.
```
npm install react-native-webview
```

Project Structure :

Example: Now let’s implement the WebView. Here we are going to render the GeeksforGeeks website in our webview.

App.js

import React from 'react'; 

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

export default function App() { 

  return ( 

    <WebView source={{ uri: 'https://geeksforgeeks.org/' }} /> 

  ); 
}

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Article Tags :

Web Technologies

React-Native