Menu

React Native WebView

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
1019
Search

Ads