WebView
WebView
WebView
renders web content in a native view.
import React, { Component } from 'react'; import { WebView } from 'react-native'; class MyWeb extends Component { render() { return ( <WebView source={{uri: 'https://github.com/facebook/react-native'}} style={{marginTop: 20}} /> ); } }
You can use this component to navigate back and forth in the web view's history and configure various properties for the web content.
Props
ViewPropTypes props...
automaticallyAdjustContentInsets?: PropTypes.bool
Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is true
.
contentInset?: {top: number, left: number, bottom: number, right: number}
The amount by which the web view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
html?: string
Use the source
prop instead.
injectJavaScript?: PropTypes.func
Function that accepts a string that will be passed to the WebView and executed immediately as JavaScript.
injectedJavaScript?: PropTypes.string
Set this to provide JavaScript that will be injected into the web page when the view loads.
mediaPlaybackRequiresUserAction?: PropTypes.bool
Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing. The default value is true
.
onError?: PropTypes.func
Function that is invoked when the WebView
load fails.
onLoad?: PropTypes.func
Function that is invoked when the WebView
has finished loading.
onLoadEnd?: PropTypes.func
Function that is invoked when the WebView
load succeeds or fails.
onLoadStart?: PropTypes.func
Function that is invoked when the WebView
starts loading.
onMessage?: PropTypes.func
A function that is invoked when the webview calls window.postMessage
. Setting this property will inject a postMessage
global into your webview, but will still call pre-existing values of postMessage
.
window.postMessage
accepts one argument, data
, which will be available on the event object, event.nativeEvent.data
. data
must be a string.
onNavigationStateChange?: PropTypes.func
Function that is invoked when the WebView
loading starts or ends.
renderError?: PropTypes.func
Function that returns a view to show if there's an error.
renderLoading?: PropTypes.func
Function that returns a loading indicator.
scalesPageToFit?: PropTypes.bool
Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is true
.
source?: PropTypes.oneOfType([ PropTypes.shape({ /* * The URI to load in the `WebView`. Can be a local or remote file. */ uri: PropTypes.string, /* * The HTTP Method to use. Defaults to GET if not specified. * NOTE: On Android, only GET and POST are supported. */ method: PropTypes.string, /* * Additional HTTP headers to send with the request. * NOTE: On Android, this can only be used with GET requests. */ headers: PropTypes.object, /* * The HTTP body to send with the request. This must be a valid * UTF-8 string, and will be sent exactly as specified, with no * additional encoding (e.g. URL-escaping or base64) applied. * NOTE: On Android, this can only be used with POST requests. */ body: PropTypes.string, }), PropTypes.shape({ /* * A static HTML page to display in the WebView. */ html: PropTypes.string, /* * The base URL to be used for any relative links in the HTML. */ baseUrl: PropTypes.string, }), /* * Used internally by packager. */ PropTypes.number, ])
Loads static html or a uri (with optional headers) in the WebView.
startInLoadingState?: PropTypes.bool
Boolean value that forces the WebView
to show the loading view on the first load.
style?: ViewPropTypes.style
The style to apply to the WebView
.
url?: string
Use the source
prop instead.
androiddomStorageEnabled?: PropTypes.bool
Boolean value to control whether DOM Storage is enabled. Used only in Android.
androidjavaScriptEnabled?: PropTypes.bool
Boolean value to enable JavaScript in the WebView
. Used on Android only as JavaScript is enabled by default on iOS. The default value is true
.
androidmixedContentMode?: PropTypes.oneOf([ 'never', 'always', 'compatibility' ])
Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
Possible values for mixedContentMode
are:
-
'never'
(default) - WebView will not allow a secure origin to load content from an insecure origin. -
'always'
- WebView will allow a secure origin to load content from any other origin, even if that origin is insecure. -
'compatibility'
- WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
androiduserAgent?: PropTypes.string
Sets the user-agent for the WebView
.
iosallowsInlineMediaPlayback?: PropTypes.bool
Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is false
.
NOTE : In order for video to play inline, not only does this property need to be set to true
, but the video element in the HTML document must also include the webkit-playsinline
attribute.
iosbounces?: PropTypes.bool
Boolean value that determines whether the web view bounces when it reaches the edge of the content. The default value is true
.
iosdataDetectorTypes?: PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ])
Determines the types of data converted to clickable URLs in the web view’s content. By default only phone numbers are detected.
You can provide one type or an array of many types.
Possible values for dataDetectorTypes
are:
'phoneNumber'
'link'
'address'
'calendarEvent'
'none'
'all'
iosdecelerationRate?: ScrollView.propTypes.decelerationRate
A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts "normal"
and "fast"
which match the underlying iOS settings for UIScrollViewDecelerationRateNormal
and UIScrollViewDecelerationRateFast
respectively:
- normal: 0.998
- fast: 0.99 (the default for iOS web view)
iosonShouldStartLoadWithRequest?: PropTypes.func
Function that allows custom handling of any web view requests. Return true
from the function to continue loading the request and false
to stop loading.
iosscrollEnabled?: PropTypes.bool
Boolean value that determines whether scrolling is enabled in the WebView
. The default value is true
.
© 2015–2017 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://facebook.github.io/react-native/docs/webview.html