React Native WebView

• 09 November 2022, 09:55
• Reactjs Frontend

React Native WebView is a components which is used to load web content or web page. The WebView component is imports form core react-native library. Now, the WebView is replaced from the built-in core react-native, and placed in react-native-webview library.

Note: The React Native WebView recommended to import react-native-webview or react-native-community library.

Props of WebView

source	injectJavaScript	injectedJavaScript	onError
onLoad	onLoadEnd	onLoadStart	onMessage
originWhitelist	renderError	style	userAgent
html	url	geolocationEnabled	scrollEnabled
contentInset	bounces	allowFileAccess	nativeConfig

Types of WebView contents:

Display HTML code as a string: The HTML string code is passed into html prop inside source property.

1. <WebView
2.     source={{html: 'Hello javaTpoint'}}  
3. />  

Display the internal web page: Create an internal web page inside a directory and pass its full path in source property.

1. <WebView
2.     source={require("./resources/index.html")}  
3. />  

Display the remote web page: A remote web page is loaded using uri tag with source property.

1. <WebView
2.     source = {{ uri:'https://www.javatpoint.com' }}  
3. />  

React Native WebView Example 1

in this example, we will load the web page by passing its URL in source prop of WebView component.

App.js

1. import React, { Component } from 'react'  
2. import {  
3.     View,WebView,StyleSheet,AppRegistry  
4. } from 'react-native'  
5.   
6. export default class ActivityIndicatorDemo extends Component {  
7.     render() {  
8.         return (  
9.           
10.             <WebView
11.                 source = {{ uri:'https://www.javatpoint.com' }}  
12.             />  
13.           
14.         )  
15.     }  
16. }  
17. const styles = StyleSheet.create({  
18.     container: {  
19.         flex: 1,  
20.     }  
21. })  
22.   
23. AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)  

React Native WebView Example 2

In this example, we will import WebView from react-native-webview.

App.js

1. import React, { Component } from 'react'  
2. import {  
3.     View,StyleSheet,AppRegistry  
4. } from 'react-native'  
5. import {WebView} from 'react-native-webview'  
6.   
7. export default class ActivityIndicatorDemo extends Component {  
8.     render() {  
9.         return (  
10.               
11.                 {/*<WebView
12.                     source={{html: 'Hello javaTpoint'}} 
13.                 />*/}  
14.              {/*   <WebView
15.                     source={require("./resources/index.html")} 
16.                 />*/}  
17.                 <WebView
18.                     source = {{ uri:'https://www.javatpoint.com' }}  
19.                 />  
20.               
21.         )  
22.     }  
23. }  
24. const styles = StyleSheet.create({  
25.     container: {  
26.         flex: 1,  
27.     }  
28. })  
29.   
30. AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)  

Note: if you got an error message of module react-native-webview does not exist in the module map react native. Then make sure you install the below libraries:

• npm install -g yarn
• yarn add react-native-webview 
• react-native link react-native-webview

Tagged in :