Updated April 9, 2023
Definition of React Native WebView
WebView is the react native component that gives us a way to represent the web in the app, for example, if we want to display www.xyz.com in the app then we can use the react native WebView Component. React Native is a very simple word we can say that it is a react library component which is used to load or display the web content or web page on the app(any html contents on the app), we can import WebView from community edition (react-native–webview) instead of react native because slowly react native is stopping the supports for its small features.
Syntax
In the below syntax we are showing the syntax for the WebView component, we can explain the syntax in the below steps.
- We have created a class with the name WebViewExample and this class is extending the react core component.
- Inside the render function, we are returning the WebView component along with the URL of https://www.example.com.
- On the execution of the above syntax block, it will display a website on the app.
Code:
import React, { Component } from 'react'
import {
View,WebView,StyleSheet,AppRegistry
} from 'react-native'
class WebViewExample extends Component {
render() {
return (
<View>
<WebView
source = {{ uri:'https://www.example.com' }}
/>
</View>
)
}
}How does it works?
The working principle of WebView can be defined in the below-given steps.
- This component is a browser engine (part of the browser engine)
- WebView components play a role like iframe which simply adjusts web site into the app.
- If we see clearly then we will see that WebView component in nothing but just visuals.
- When we pass any urls into the WebView component then simply it passes this url to the actual component library where designs are written.
React Native WebView Properties
React native WebView has many properties. Some of them are like attributes and some of them are like methods, they are given below.
- Source: This is the section where we are going to put our url to represent a web view on the app. It simply loads the html of the given url into the app.
- automaticallyAdjustContentInsets: It manages the content inset for web view which is placed behind a navigation bar or tab bar or toolbar. In case we do not define its value then it will be true.
- injectJavaScript: This function will take a string that will be passed to WebView and it will be executed immediately after loading Javascript.
- mediaPlaybackRequiresUserAction: It takes boolean as the value, with the help of this attribute it will decide if it should play audio and video before the user tabs them. In case we do not define its value it will be true.
- onError: In case WebView Component will not be able to load the url and its html content this function will be invoked.
- onLoad: This function will be invoked when loading the contents of the urls html completed. Many times after loading the contents it will be useful to perform a few tasks.
- onLoadEnd: This function will get invoked after loading the contents of for Web view either success or failure.
- onLoadStart: This function will be invoked at the time of loading the content of URL HTML for the web view.
- onMessage: It passes a string of data to the WbView component, it will take data as the argument in the onMessage.
Examples of React Native WebView
Following are the examples as given below:
Example #1
This is the very basic example for the react native WebView component, here we are simply displaying the contents of the www.educab.org (any website) in the app, we can explain the below example in the following steps,
- We created a class with the name WebViewExample and this class is extending the react core component.
- Here we have imported the WebView library from the community edition instead of react native which is react-native-webview. Because Facebook itself suggests using this from the community.
- And finally, we have passed the url of the Any website, it will simply load the contents of that website.
Please follow the below example along with a screen of output taken from the mobile view.
Code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class WebViewExample extends Component {
render() {
return (
<WebView source={{ uri: 'https://www.educba.com/' }} />
);
}
}Output:
Example #2
In this example, we are showing a Facebook web page on the react native app. Here we have added some style too. We can explain the below example in the following steps.
- We created a class with the name WebViewExample and this class is extending the react core component.
- Here we have imported the WebView library from the community edition instead of react native which is react-native-webview. Because Facebook itself suggests using this from the community. Facebook has already stopped supporting some of its features.
- And finally, we have passed the url of the Facebook website, it will simply load the contents of the Facebook websites.
- We have mentioned style with margin Top with value 200,it will create some space in the top and load Facebook page.
Please follow the below example along with a screen of output taken from the mobile view.
Code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class WebViewExample extends Component {
render() {
return (
<WebView source={{ uri: 'https://www.facebook.com/' }}
style={{marginTop: 200}}
/>
);
}
}Output:
Example #3
As we have said in react native WebView we can load any static HTML contents into the app, so below is the example for it. Please follow the below example along with the mobile output of the screen.
Code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class WebViewExample extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{html: '<h1>this is the html which will load as the WebView</h1>'}}
style={{marginTop: 200}}
/>
);
}
}Output:
Recommended Articles
This is a guide to React Native WebView. Here we discuss the introduction and how does react native webview works? along with different examples and its code implementation. You may also look at the following articles to learn more –
