Skip to content

Commit 075fcb1

Browse files
Christine Abernathybubblesunyum
authored andcommitted
Update webview doc
Summary: Reference: facebook#8203 Changes made: Added a webview example to the intro section Added more details to prop explanations Test plan (required) Ran the website locally and checked: http://localhost:8079/react-native/docs/webview.html ![component_webview_2](https://cloud.githubusercontent.com/assets/691109/16316552/f6847c56-393b-11e6-8fdd-a0b61e7f787b.png) Closes facebook#8372 Differential Revision: D3477685 Pulled By: JoelMarcey fbshipit-source-id: a624f5c6c12a8367aea2a6e7c2e520da7a074bbd
1 parent ba88ebe commit 075fcb1

File tree

1 file changed

+82
-31
lines changed

1 file changed

+82
-31
lines changed

Libraries/Components/WebView/WebView.ios.js

Lines changed: 82 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,26 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
8282
);
8383

8484
/**
85-
* Renders a native WebView.
85+
* `WebView` renders web content in a native view.
86+
*
87+
*```
88+
* import React, { Component } from 'react';
89+
* import { WebView } from 'react-native';
90+
*
91+
* class MyWeb extends Component {
92+
* render() {
93+
* return (
94+
* <WebView
95+
* source={{uri: 'https://github.com/facebook/react-native'}}
96+
* style={{marginTop: 20}}
97+
* />
98+
* );
99+
* }
100+
* }
101+
*```
102+
*
103+
* You can use this component to navigate back and forth in the web view's
104+
* history and configure various properties for the web content.
86105
*/
87106
var WebView = React.createClass({
88107
statics: {
@@ -109,7 +128,7 @@ var WebView = React.createClass({
109128
source: PropTypes.oneOfType([
110129
PropTypes.shape({
111130
/*
112-
* The URI to load in the WebView. Can be a local or remote file.
131+
* The URI to load in the `WebView`. Can be a local or remote file.
113132
*/
114133
uri: PropTypes.string,
115134
/*
@@ -155,96 +174,125 @@ var WebView = React.createClass({
155174
*/
156175
renderLoading: PropTypes.func,
157176
/**
158-
* Invoked when load finish
177+
* Function that is invoked when the `WebView` has finished loading.
159178
*/
160179
onLoad: PropTypes.func,
161180
/**
162-
* Invoked when load either succeeds or fails
181+
* Function that is invoked when the `WebView` load succeeds or fails.
163182
*/
164183
onLoadEnd: PropTypes.func,
165184
/**
166-
* Invoked on load start
185+
* Function that is invoked when the `WebView` starts loading.
167186
*/
168187
onLoadStart: PropTypes.func,
169188
/**
170-
* Invoked when load fails
189+
* Function that is invoked when the `WebView` load fails.
171190
*/
172191
onError: PropTypes.func,
173192
/**
193+
* Boolean value that determines whether the web view bounces
194+
* when it reaches the edge of the content. The default value is `true`.
174195
* @platform ios
175196
*/
176197
bounces: PropTypes.bool,
177198
/**
178199
* A floating-point number that determines how quickly the scroll view
179-
* decelerates after the user lifts their finger. You may also use string
180-
* shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
181-
* for `UIScrollViewDecelerationRateNormal` and
182-
* `UIScrollViewDecelerationRateFast` respectively.
200+
* decelerates after the user lifts their finger. You may also use the
201+
* string shortcuts `"normal"` and `"fast"` which match the underlying iOS
202+
* settings for `UIScrollViewDecelerationRateNormal` and
203+
* `UIScrollViewDecelerationRateFast` respectively:
204+
*
183205
* - normal: 0.998
184-
* - fast: 0.99 (the default for iOS WebView)
206+
* - fast: 0.99 (the default for iOS web view)
185207
* @platform ios
186208
*/
187209
decelerationRate: ScrollView.propTypes.decelerationRate,
188210
/**
211+
* Boolean value that determines whether scrolling is enabled in the
212+
* `WebView`. The default value is `true`.
189213
* @platform ios
190214
*/
191215
scrollEnabled: PropTypes.bool,
216+
/**
217+
* Controls whether to adjust the content inset for web views that are
218+
* placed behind a navigation bar, tab bar, or toolbar. The default value
219+
* is `true`.
220+
*/
192221
automaticallyAdjustContentInsets: PropTypes.bool,
222+
/**
223+
* The amount by which the web view content is inset from the edges of
224+
* the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
225+
*/
193226
contentInset: EdgeInsetsPropType,
227+
/**
228+
* Function that is invoked when the `WebView` loading starts or ends.
229+
*/
194230
onNavigationStateChange: PropTypes.func,
195-
startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
231+
/**
232+
* Boolean value that forces the `WebView` to show the loading view
233+
* on the first load.
234+
*/
235+
startInLoadingState: PropTypes.bool,
236+
/**
237+
* The style to apply to the `WebView`.
238+
*/
196239
style: View.propTypes.style,
197240

198241
/**
199-
* Used on Android only, JS is enabled by default for WebView on iOS
242+
* Boolean value to enable JavaScript in the `WebView`. Used on Android only
243+
* as JavaScript is enabled by default on iOS. The default value is `true`.
200244
* @platform android
201245
*/
202246
javaScriptEnabled: PropTypes.bool,
203247

204248
/**
205-
* Used on Android only, controls whether DOM Storage is enabled or not
249+
* Boolean value to control whether DOM Storage is enabled. Used only in
250+
* Android.
206251
* @platform android
207252
*/
208253
domStorageEnabled: PropTypes.bool,
209254

210255
/**
211-
* Sets the JS to be injected when the webpage loads.
256+
* Set this to provide JavaScript that will be injected into the web page
257+
* when the view loads.
212258
*/
213259
injectedJavaScript: PropTypes.string,
214260

215261
/**
216-
* Sets the user-agent for this WebView. The user-agent can also be set in native using
217-
* WebViewConfig. This prop will overwrite that config.
262+
* Sets the user-agent for the `WebView`.
218263
* @platform android
219264
*/
220265
userAgent: PropTypes.string,
221266

222267
/**
223-
* Sets whether the webpage scales to fit the view and the user can change the scale.
268+
* Boolean that controls whether the web content is scaled to fit
269+
* the view and enables the user to change the scale. The default value
270+
* is `true`.
224271
*/
225272
scalesPageToFit: PropTypes.bool,
226273

227274
/**
228-
* Allows custom handling of any webview requests by a JS handler. Return true
229-
* or false from this method to continue loading the request.
275+
* Function that allows custom handling of any web view requests. Return
276+
* `true` from the function to continue loading the request and `false`
277+
* to stop loading.
230278
* @platform ios
231279
*/
232280
onShouldStartLoadWithRequest: PropTypes.func,
233281

234282
/**
235-
* Determines whether HTML5 videos play inline or use the native full-screen
236-
* controller.
237-
* default value `false`
238-
* **NOTE** : "In order for video to play inline, not only does this
239-
* property need to be set to true, but the video element in the HTML
240-
* document must also include the webkit-playsinline attribute."
283+
* Boolean that determines whether HTML5 videos play inline or use the
284+
* native full-screen controller. The default value is `false`.
285+
*
286+
* **NOTE** : In order for video to play inline, not only does this
287+
* property need to be set to `true`, but the video element in the HTML
288+
* document must also include the `webkit-playsinline` attribute.
241289
* @platform ios
242290
*/
243291
allowsInlineMediaPlayback: PropTypes.bool,
244292

245293
/**
246-
* Determines whether HTML5 audio & videos require the user to tap before they can
247-
* start playing. The default value is `false`.
294+
* Boolean that determines whether HTML5 audio and video requires the user
295+
* to tap them before they start playing. The default value is `false`.
248296
*/
249297
mediaPlaybackRequiresUserAction: PropTypes.bool,
250298
},
@@ -337,7 +385,7 @@ var WebView = React.createClass({
337385
},
338386

339387
/**
340-
* Go forward one page in the webview's history.
388+
* Go forward one page in the web view's history.
341389
*/
342390
goForward: function() {
343391
UIManager.dispatchViewManagerCommand(
@@ -348,7 +396,7 @@ var WebView = React.createClass({
348396
},
349397

350398
/**
351-
* Go back one page in the webview's history.
399+
* Go back one page in the web view's history.
352400
*/
353401
goBack: function() {
354402
UIManager.dispatchViewManagerCommand(
@@ -370,6 +418,9 @@ var WebView = React.createClass({
370418
);
371419
},
372420

421+
/**
422+
* Stop loading the current page.
423+
*/
373424
stopLoading: function() {
374425
UIManager.dispatchViewManagerCommand(
375426
this.getWebViewHandle(),
@@ -389,7 +440,7 @@ var WebView = React.createClass({
389440
},
390441

391442
/**
392-
* Returns the native webview node.
443+
* Returns the native `WebView` node.
393444
*/
394445
getWebViewHandle: function(): any {
395446
return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);

0 commit comments

Comments
 (0)