From 4fdcd05e14bb4befd445d713f9667ecb324cd60e Mon Sep 17 00:00:00 2001 From: Christine Abernathy Date: Thu, 23 Jun 2016 11:24:54 -0700 Subject: [PATCH 1/2] Update webview doc --- Libraries/Components/WebView/WebView.ios.js | 114 ++++++++++++++------ 1 file changed, 82 insertions(+), 32 deletions(-) diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index 778f4ef8b1767c..28627a464064a9 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -82,7 +82,26 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( ); /** - * Renders a native 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 ( + * + * ); + * } + * } + *``` + * + * You can use this component to navigate back and forth in the web view's + * history and configure various properties for the web content. */ var WebView = React.createClass({ statics: { @@ -109,7 +128,7 @@ var WebView = React.createClass({ source: PropTypes.oneOfType([ PropTypes.shape({ /* - * The URI to load in the WebView. Can be a local or remote file. + * The URI to load in the web view. Can be a local or remote file. */ uri: PropTypes.string, /* @@ -155,96 +174,124 @@ var WebView = React.createClass({ */ renderLoading: PropTypes.func, /** - * Invoked when load finish + * Function that is invoked when the web view has finished loading. */ onLoad: PropTypes.func, /** - * Invoked when load either succeeds or fails + * Function that is invoked when the web view load succeeds or fails. */ onLoadEnd: PropTypes.func, /** - * Invoked on load start + * Function that is invoked when the web view starts loading. */ onLoadStart: PropTypes.func, /** - * Invoked when load fails + * Function that is invoked when the web view load fails. */ onError: PropTypes.func, /** + * Boolean value that determines whether the web view bounces + * when it reaches the edge of the content. The default value is `true`. * @platform ios */ bounces: PropTypes.bool, /** * A floating-point number that determines how quickly the scroll view - * decelerates after the user lifts their finger. You may also use string - * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings - * for `UIScrollViewDecelerationRateNormal` and - * `UIScrollViewDecelerationRateFast` respectively. + * 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 WebView) + * - fast: 0.99 (the default for iOS web view) * @platform ios */ decelerationRate: ScrollView.propTypes.decelerationRate, /** + * Boolean value that determines whether scrolling is enabled in the + * web view. The default value is `true`. * @platform ios */ scrollEnabled: 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`. + */ automaticallyAdjustContentInsets: PropTypes.bool, + /** + * 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}. + */ contentInset: EdgeInsetsPropType, + /** + * Function that is invoked when the web view loading starts or ends. + */ onNavigationStateChange: PropTypes.func, - startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load + /** + * Boolean value that forces the web view to show the loading view + * on the first load. + */ + startInLoadingState: PropTypes.bool, + /** + * The style to apply to the web view. + */ style: View.propTypes.style, /** - * Used on Android only, JS is enabled by default for WebView on iOS - * @platform android + * Boolean value to enable JavaScript in the web view. Used on Android only + * as JavaScript is enabled by default on iOS. The default value is `true`. */ javaScriptEnabled: PropTypes.bool, /** - * Used on Android only, controls whether DOM Storage is enabled or not + * Boolean value to control whether DOM Storage is enabled. Used only in + * Android. * @platform android */ domStorageEnabled: PropTypes.bool, /** - * Sets the JS to be injected when the webpage loads. + * Set this to provide JavaScript that will be injected into the web page + * when the view loads. */ injectedJavaScript: PropTypes.string, /** - * Sets the user-agent for this WebView. The user-agent can also be set in native using - * WebViewConfig. This prop will overwrite that config. + * Sets the user-agent for the web view. * @platform android */ userAgent: PropTypes.string, /** - * Sets whether the webpage scales to fit the view and the user can change the scale. + * 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`. */ scalesPageToFit: PropTypes.bool, /** - * Allows custom handling of any webview requests by a JS handler. Return true - * or false from this method to continue loading the request. + * 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. * @platform ios */ onShouldStartLoadWithRequest: PropTypes.func, /** - * Determines whether HTML5 videos play inline or use the native full-screen - * controller. - * default value `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." + * 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. * @platform ios */ allowsInlineMediaPlayback: PropTypes.bool, /** - * Determines whether HTML5 audio & videos require the user to tap before they can - * start playing. The default value is `false`. + * Boolean that determines whether HTML5 audio and video requires the user + * to tap them before they start playing. The default value is `false`. */ mediaPlaybackRequiresUserAction: PropTypes.bool, }, @@ -337,7 +384,7 @@ var WebView = React.createClass({ }, /** - * Go forward one page in the webview's history. + * Go forward one page in the web view's history. */ goForward: function() { UIManager.dispatchViewManagerCommand( @@ -348,7 +395,7 @@ var WebView = React.createClass({ }, /** - * Go back one page in the webview's history. + * Go back one page in the web view's history. */ goBack: function() { UIManager.dispatchViewManagerCommand( @@ -370,6 +417,9 @@ var WebView = React.createClass({ ); }, + /** + * Stop loading the current page. + */ stopLoading: function() { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), @@ -389,7 +439,7 @@ var WebView = React.createClass({ }, /** - * Returns the native webview node. + * Returns the native web view node. */ getWebViewHandle: function(): any { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); From 2ee6182b06e820e8e828234f619ec44f140d601b Mon Sep 17 00:00:00 2001 From: Christine Abernathy Date: Thu, 23 Jun 2016 12:12:54 -0700 Subject: [PATCH 2/2] Review changes --- Libraries/Components/WebView/WebView.ios.js | 27 +++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index 28627a464064a9..c691f6932ac0d2 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -101,7 +101,7 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( *``` * * You can use this component to navigate back and forth in the web view's - * history and configure various properties for the web content. + * history and configure various properties for the web content. */ var WebView = React.createClass({ statics: { @@ -128,7 +128,7 @@ var WebView = React.createClass({ source: PropTypes.oneOfType([ PropTypes.shape({ /* - * The URI to load in the web view. Can be a local or remote file. + * The URI to load in the `WebView`. Can be a local or remote file. */ uri: PropTypes.string, /* @@ -174,19 +174,19 @@ var WebView = React.createClass({ */ renderLoading: PropTypes.func, /** - * Function that is invoked when the web view has finished loading. + * Function that is invoked when the `WebView` has finished loading. */ onLoad: PropTypes.func, /** - * Function that is invoked when the web view load succeeds or fails. + * Function that is invoked when the `WebView` load succeeds or fails. */ onLoadEnd: PropTypes.func, /** - * Function that is invoked when the web view starts loading. + * Function that is invoked when the `WebView` starts loading. */ onLoadStart: PropTypes.func, /** - * Function that is invoked when the web view load fails. + * Function that is invoked when the `WebView` load fails. */ onError: PropTypes.func, /** @@ -209,7 +209,7 @@ var WebView = React.createClass({ decelerationRate: ScrollView.propTypes.decelerationRate, /** * Boolean value that determines whether scrolling is enabled in the - * web view. The default value is `true`. + * `WebView`. The default value is `true`. * @platform ios */ scrollEnabled: PropTypes.bool, @@ -225,22 +225,23 @@ var WebView = React.createClass({ */ contentInset: EdgeInsetsPropType, /** - * Function that is invoked when the web view loading starts or ends. + * Function that is invoked when the `WebView` loading starts or ends. */ onNavigationStateChange: PropTypes.func, /** - * Boolean value that forces the web view to show the loading view + * Boolean value that forces the `WebView` to show the loading view * on the first load. */ startInLoadingState: PropTypes.bool, /** - * The style to apply to the web view. + * The style to apply to the `WebView`. */ style: View.propTypes.style, /** - * Boolean value to enable JavaScript in the web view. Used on Android only + * 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`. + * @platform android */ javaScriptEnabled: PropTypes.bool, @@ -258,7 +259,7 @@ var WebView = React.createClass({ injectedJavaScript: PropTypes.string, /** - * Sets the user-agent for the web view. + * Sets the user-agent for the `WebView`. * @platform android */ userAgent: PropTypes.string, @@ -439,7 +440,7 @@ var WebView = React.createClass({ }, /** - * Returns the native web view node. + * Returns the native `WebView` node. */ getWebViewHandle: function(): any { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);