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 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.

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

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


React Native WebView

React Native WebView Example 2

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



React Native WebView

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

Next TopicProgressBarAndroid

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA