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.
App.js
React Native WebView Example 2
In this example, we will import WebView from react-native-webview.
App.js
Output:
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