Javatpoint Logo
Javatpoint Logo

React Native WebView

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

Note: The React Native WebView recommended importing react-native-webview or react-native-community.

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.

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

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

React Native WebView Example 1

App.js

React Native WebView

React Native WebView Example 2

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

App.js

Output:

React Native WebView

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

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

Next Topic#




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA