Browse Source

Updated reference wording

Jamon Holmgren 4 years ago
parent
commit
521179799b
1 changed files with 63 additions and 59 deletions
  1. 63
    59
      docs/Reference.md

+ 63
- 59
docs/Reference.md View File

133
 
133
 
134
 On iOS, see [`WKUserScriptInjectionTimeAtDocumentEnd`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentend?language=objc)
134
 On iOS, see [`WKUserScriptInjectionTimeAtDocumentEnd`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentend?language=objc)
135
 
135
 
136
-| Type   | Required | Platform |
137
-| ------ | -------- | -------- |
138
-| string | No       | iOS, Android, macOS
136
+| Type   | Required | Platform            |
137
+| ------ | -------- | ------------------- |
138
+| string | No       | iOS, Android, macOS |
139
 
139
 
140
 To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
140
 To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
141
 
141
 
165
 
165
 
166
 On iOS, see [`WKUserScriptInjectionTimeAtDocumentStart`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc)
166
 On iOS, see [`WKUserScriptInjectionTimeAtDocumentStart`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc)
167
 
167
 
168
-| Type   | Required | Platform |
169
-| ------ | -------- | -------- |
168
+| Type   | Required | Platform   |
169
+| ------ | -------- | ---------- |
170
 | string | No       | iOS, macOS |
170
 | string | No       | iOS, macOS |
171
 
171
 
172
 To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
172
 To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
173
 
173
 
174
 Example:
174
 Example:
175
 
175
 
176
-Post message a JSON object of `window.location` to be handled by [`onMessage`](Reference.md#onmessage). `window.ReactNativeWebView.postMessage` *will* be available at this time.
176
+Post message a JSON object of `window.location` to be handled by [`onMessage`](Reference.md#onmessage). `window.ReactNativeWebView.postMessage` _will_ be available at this time.
177
 
177
 
178
 ```jsx
178
 ```jsx
179
 const INJECTED_JAVASCRIPT = `(function() {
179
 const INJECTED_JAVASCRIPT = `(function() {
195
 
195
 
196
 If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
196
 If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
197
 
197
 
198
-| Type   | Required | Platform |
199
-| ------ | -------- | -------- |
198
+| Type | Required | Platform                                          |
199
+| ---- | -------- | ------------------------------------------------- |
200
 | bool | No       | iOS and macOS (only `true` supported for Android) |
200
 | bool | No       | iOS and macOS (only `true` supported for Android) |
201
 
201
 
202
 ---
202
 ---
207
 
207
 
208
 If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
208
 If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
209
 
209
 
210
-| Type   | Required | Platform |
211
-| ------ | -------- | -------- |
210
+| Type | Required | Platform                                          |
211
+| ---- | -------- | ------------------------------------------------- |
212
 | bool | No       | iOS and macOS (only `true` supported for Android) |
212
 | bool | No       | iOS and macOS (only `true` supported for Android) |
213
 
213
 
214
 ---
214
 ---
219
 
219
 
220
 NOTE: the default `true` value might cause some videos to hang loading on iOS. Setting it to `false` could fix this issue.
220
 NOTE: the default `true` value might cause some videos to hang loading on iOS. Setting it to `false` could fix this issue.
221
 
221
 
222
-| Type | Required | Platform |
223
-| ---- | -------- | -------- |
222
+| Type | Required | Platform            |
223
+| ---- | -------- | ------------------- |
224
 | bool | No       | iOS, Android, macOS |
224
 | bool | No       | iOS, Android, macOS |
225
 
225
 
226
 ---
226
 ---
235
 - `props` (object)
235
 - `props` (object)
236
 - `viewManager` (object)
236
 - `viewManager` (object)
237
 
237
 
238
-| Type   | Required | Platform |
239
-| ------ | -------- | -------- |
238
+| Type   | Required | Platform            |
239
+| ------ | -------- | ------------------- |
240
 | object | No       | iOS, Android, macOS |
240
 | object | No       | iOS, Android, macOS |
241
 
241
 
242
 ---
242
 ---
254
 ```jsx
254
 ```jsx
255
 <WebView
255
 <WebView
256
   source={{ uri: 'https://reactnative.dev' }}
256
   source={{ uri: 'https://reactnative.dev' }}
257
-  onError={syntheticEvent => {
257
+  onError={(syntheticEvent) => {
258
     const { nativeEvent } = syntheticEvent;
258
     const { nativeEvent } = syntheticEvent;
259
     console.warn('WebView error: ', nativeEvent);
259
     console.warn('WebView error: ', nativeEvent);
260
   }}
260
   }}
294
 ```jsx
294
 ```jsx
295
 <WebView
295
 <WebView
296
   source={{ uri: 'https://reactnative.dev' }}
296
   source={{ uri: 'https://reactnative.dev' }}
297
-  onLoad={syntheticEvent => {
297
+  onLoad={(syntheticEvent) => {
298
     const { nativeEvent } = syntheticEvent;
298
     const { nativeEvent } = syntheticEvent;
299
     this.url = nativeEvent.url;
299
     this.url = nativeEvent.url;
300
   }}
300
   }}
327
 ```jsx
327
 ```jsx
328
 <WebView
328
 <WebView
329
   source={{ uri: 'https://reactnative.dev' }}
329
   source={{ uri: 'https://reactnative.dev' }}
330
-  onLoadEnd={syntheticEvent => {
330
+  onLoadEnd={(syntheticEvent) => {
331
     // update component to be aware of loading status
331
     // update component to be aware of loading status
332
     const { nativeEvent } = syntheticEvent;
332
     const { nativeEvent } = syntheticEvent;
333
     this.isLoading = nativeEvent.loading;
333
     this.isLoading = nativeEvent.loading;
361
 ```jsx
361
 ```jsx
362
 <WebView
362
 <WebView
363
   source={{ uri: 'https://reactnative.dev/=' }}
363
   source={{ uri: 'https://reactnative.dev/=' }}
364
-  onLoadStart={syntheticEvent => {
364
+  onLoadStart={(syntheticEvent) => {
365
     // update component to be aware of loading status
365
     // update component to be aware of loading status
366
     const { nativeEvent } = syntheticEvent;
366
     const { nativeEvent } = syntheticEvent;
367
     this.isLoading = nativeEvent.loading;
367
     this.isLoading = nativeEvent.loading;
386
 
386
 
387
 Function that is invoked when the `WebView` is loading.
387
 Function that is invoked when the `WebView` is loading.
388
 
388
 
389
-| Type     | Required | Platform |
390
-| -------- | -------- | --------- |
389
+| Type     | Required | Platform            |
390
+| -------- | -------- | ------------------- |
391
 | function | No       | iOS, Android, macOS |
391
 | function | No       | iOS, Android, macOS |
392
 
392
 
393
 Example:
393
 Example:
431
 ```jsx
431
 ```jsx
432
 <WebView
432
 <WebView
433
   source={{ uri: 'https://reactnative.dev' }}
433
   source={{ uri: 'https://reactnative.dev' }}
434
-  onHttpError={syntheticEvent => {
434
+  onHttpError={(syntheticEvent) => {
435
     const { nativeEvent } = syntheticEvent;
435
     const { nativeEvent } = syntheticEvent;
436
     console.warn(
436
     console.warn(
437
       'WebView received error status code: ',
437
       'WebView received error status code: ',
486
 ```jsx
486
 ```jsx
487
 <WebView
487
 <WebView
488
   source={{ uri: 'https://reactnative.dev' }}
488
   source={{ uri: 'https://reactnative.dev' }}
489
-  onNavigationStateChange={navState => {
489
+  onNavigationStateChange={(navState) => {
490
     // Keep track of going back navigation within component
490
     // Keep track of going back navigation within component
491
     this.canGoBack = navState.canGoBack;
491
     this.canGoBack = navState.canGoBack;
492
   }}
492
   }}
522
 ```jsx
522
 ```jsx
523
 <WebView
523
 <WebView
524
   source={{ uri: 'https://reactnative.dev' }}
524
   source={{ uri: 'https://reactnative.dev' }}
525
-  onContentProcessDidTerminate={syntheticEvent => {
525
+  onContentProcessDidTerminate={(syntheticEvent) => {
526
     const { nativeEvent } = syntheticEvent;
526
     const { nativeEvent } = syntheticEvent;
527
     console.warn('Content process terminated, reloading', nativeEvent);
527
     console.warn('Content process terminated, reloading', nativeEvent);
528
     this.refs.webview.reload();
528
     this.refs.webview.reload();
547
 
547
 
548
 List of origin strings to allow being navigated to. The strings allow wildcards and get matched against _just_ the origin (not the full URL). If the user taps to navigate to a new page but the new page is not in this whitelist, the URL will be handled by the OS. The default whitelisted origins are "http://*" and "https://*".
548
 List of origin strings to allow being navigated to. The strings allow wildcards and get matched against _just_ the origin (not the full URL). If the user taps to navigate to a new page but the new page is not in this whitelist, the URL will be handled by the OS. The default whitelisted origins are "http://*" and "https://*".
549
 
549
 
550
-| Type             | Required | Platform |
551
-| ---------------- | -------- | -------- |
550
+| Type             | Required | Platform            |
551
+| ---------------- | -------- | ------------------- |
552
 | array of strings | No       | iOS, Android, macOS |
552
 | array of strings | No       | iOS, Android, macOS |
553
 
553
 
554
 Example:
554
 Example:
567
 
567
 
568
 Function that returns a view to show if there's an error.
568
 Function that returns a view to show if there's an error.
569
 
569
 
570
-| Type     | Required | Platform |
571
-| -------- | -------- | -------- |
570
+| Type     | Required | Platform            |
571
+| -------- | -------- | ------------------- |
572
 | function | No       | iOS, Android, macOS |
572
 | function | No       | iOS, Android, macOS |
573
 
573
 
574
 Example:
574
 Example:
576
 ```jsx
576
 ```jsx
577
 <WebView
577
 <WebView
578
   source={{ uri: 'https://reactnative.dev' }}
578
   source={{ uri: 'https://reactnative.dev' }}
579
-  renderError={errorName => <Error name={errorName} />}
579
+  renderError={(errorName) => <Error name={errorName} />}
580
 />
580
 />
581
 ```
581
 ```
582
 
582
 
588
 
588
 
589
 Function that returns a loading indicator. The startInLoadingState prop must be set to true in order to use this prop.
589
 Function that returns a loading indicator. The startInLoadingState prop must be set to true in order to use this prop.
590
 
590
 
591
-| Type     | Required | Platform |
592
-| -------- | -------- | -------- |
591
+| Type     | Required | Platform            |
592
+| -------- | -------- | ------------------- |
593
 | function | No       | iOS, Android, macOS |
593
 | function | No       | iOS, Android, macOS |
594
 
594
 
595
 Example:
595
 Example:
620
 
620
 
621
 On Android, is not called on the first load.
621
 On Android, is not called on the first load.
622
 
622
 
623
-| Type     | Required | Platform |
624
-| -------- | -------- | -------- |
623
+| Type     | Required | Platform            |
624
+| -------- | -------- | ------------------- |
625
 | function | No       | iOS, Android, macOS |
625
 | function | No       | iOS, Android, macOS |
626
 
626
 
627
 Example:
627
 Example:
629
 ```jsx
629
 ```jsx
630
 <WebView
630
 <WebView
631
   source={{ uri: 'https://reactnative.dev' }}
631
   source={{ uri: 'https://reactnative.dev' }}
632
-  onShouldStartLoadWithRequest={request => {
632
+  onShouldStartLoadWithRequest={(request) => {
633
     // Only allow navigating within this website
633
     // Only allow navigating within this website
634
     return request.url.startsWith('https://reactnative.dev');
634
     return request.url.startsWith('https://reactnative.dev');
635
   }}
635
   }}
656
 
656
 
657
 Boolean value that forces the `WebView` to show the loading view on the first load. This prop must be set to `true` in order for the `renderLoading` prop to work.
657
 Boolean value that forces the `WebView` to show the loading view on the first load. This prop must be set to `true` in order for the `renderLoading` prop to work.
658
 
658
 
659
-| Type | Required | Platform |
660
-| ---- | -------- | -------- |
659
+| Type | Required | Platform            |
660
+| ---- | -------- | ------------------- |
661
 | bool | No       | iOS, Android, macOS |
661
 | bool | No       | iOS, Android, macOS |
662
 
662
 
663
 ---
663
 ---
783
 
783
 
784
 Sets the user-agent for the `WebView`.
784
 Sets the user-agent for the `WebView`.
785
 
785
 
786
-| Type   | Required | Platform |
787
-| ------ | -------- | -------- |
786
+| Type   | Required | Platform            |
787
+| ------ | -------- | ------------------- |
788
 | string | No       | iOS, Android, macOS |
788
 | string | No       | iOS, Android, macOS |
789
 
789
 
790
 ---
790
 ---
793
 
793
 
794
 Append to the existing user-agent. Setting `userAgent` will override this.
794
 Append to the existing user-agent. Setting `userAgent` will override this.
795
 
795
 
796
-| Type   | Required | Platform |
797
-| ------ | -------- | -------- |
796
+| Type   | Required | Platform            |
797
+| ------ | -------- | ------------------- |
798
 | string | No       | iOS, Android, macOS |
798
 | string | No       | iOS, Android, macOS |
799
 
799
 
800
 ```jsx
800
 ```jsx
933
 
933
 
934
 Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.
934
 Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.
935
 
935
 
936
-| Type | Required | Platform |
937
-| ---- | -------- | -------- |
936
+| Type | Required | Platform            |
937
+| ---- | -------- | ------------------- |
938
 | bool | No       | iOS, Android, macOS |
938
 | bool | No       | iOS, Android, macOS |
939
 
939
 
940
 ---
940
 ---
943
 
943
 
944
 Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
944
 Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
945
 
945
 
946
-| Type | Required | Platform |
947
-| ---- | -------- | -------- |
946
+| Type | Required | Platform            |
947
+| ---- | -------- | ------------------- |
948
 | bool | No       | iOS, Android, macOS |
948
 | bool | No       | iOS, Android, macOS |
949
 
949
 
950
 ---
950
 ---
963
 
963
 
964
 Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
964
 Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
965
 
965
 
966
-| Type | Required | Platform |
967
-| ---- | -------- | -------- |
966
+| Type | Required | Platform            |
967
+| ---- | -------- | ------------------- |
968
 | bool | No       | iOS, Android, macOS |
968
 | bool | No       | iOS, Android, macOS |
969
 
969
 
970
 ---
970
 ---
1043
 
1043
 
1044
 Does not store any data within the lifetime of the WebView.
1044
 Does not store any data within the lifetime of the WebView.
1045
 
1045
 
1046
-| Type    | Required | Platform |
1047
-| ------- | -------- | -------- |
1046
+| Type    | Required | Platform            |
1047
+| ------- | -------- | ------------------- |
1048
 | boolean | No       | iOS, Android, macOS |
1048
 | boolean | No       | iOS, Android, macOS |
1049
 
1049
 
1050
 ---
1050
 ---
1073
 
1073
 
1074
 Sets whether WebView should use browser caching.
1074
 Sets whether WebView should use browser caching.
1075
 
1075
 
1076
-| Type    | Required | Default | Platform |
1077
-| ------- | -------- | ------- | -------- |
1076
+| Type    | Required | Default | Platform            |
1077
+| ------- | -------- | ------- | ------------------- |
1078
 | boolean | No       | true    | iOS, Android, macOS |
1078
 | boolean | No       | true    | iOS, Android, macOS |
1079
 
1079
 
1080
 ---
1080
 ---
1151
 | boolean | No       | iOS      |
1151
 | boolean | No       | iOS      |
1152
 
1152
 
1153
 ### `onFileDownload`
1153
 ### `onFileDownload`
1154
+
1154
 This property is iOS-only.
1155
 This property is iOS-only.
1155
 
1156
 
1156
 Function that is invoked when the client needs to download a file.
1157
 Function that is invoked when the client needs to download a file.
1169
 If not provided, the default is to let the webview try to render the file.
1170
 If not provided, the default is to let the webview try to render the file.
1170
 
1171
 
1171
 Example:
1172
 Example:
1173
+
1172
 ```jsx
1174
 ```jsx
1173
 <WebView
1175
 <WebView
1174
   source={{ uri: 'https://reactnative.dev' }}
1176
   source={{ uri: 'https://reactnative.dev' }}
1175
-  onFileDownload={ ( { nativeEvent: { downloadUrl } } ) => {
1177
+  onFileDownload={({ nativeEvent: { downloadUrl } }) => {
1176
     // You use downloadUrl which is a string to download files however you want.
1178
     // You use downloadUrl which is a string to download files however you want.
1177
   }}
1179
   }}
1178
-  />
1180
+/>
1179
 ```
1181
 ```
1180
 
1182
 
1181
-| Type    | Required | Platform |
1182
-| ------- | -------- | -------- |
1183
+| Type     | Required | Platform |
1184
+| -------- | -------- | -------- |
1183
 | function | No       | iOS      |
1185
 | function | No       | iOS      |
1184
 
1186
 
1185
-
1186
 ---
1187
 ---
1187
 
1188
 
1188
 ### `autoManageStatusBarEnabled`
1189
 ### `autoManageStatusBarEnabled`
1189
 
1190
 
1190
-If the user watch fullscreen video in WebView then StatusBar will be light. The default value is `true`.
1191
+If set to `true`, the status bar will be automatically hidden/shown by WebView, specifically when full screen video is being watched. If `false`, WebView will not manage the status bar at all. The default value is `true`.
1191
 
1192
 
1192
-| Type   | Required | Platform |
1193
-| ------ | -------- | -------- |
1194
-| number | No       | iOS      |
1193
+| Type    | Required | Platform |
1194
+| ------- | -------- | -------- |
1195
+| boolean | No       | iOS      |
1195
 
1196
 
1196
 Example:
1197
 Example:
1197
 
1198
 
1198
-`<WebView autoManageStatusBarEnabled={false} />`
1199
+```javascript
1200
+<WebView autoManageStatusBarEnabled={false} />
1201
+```
1199
 
1202
 
1200
 ## Methods
1203
 ## Methods
1201
 
1204
 
1260
 ```javascript
1263
 ```javascript
1261
 postMessage('message');
1264
 postMessage('message');
1262
 ```
1265
 ```
1266
+
1263
 Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
1267
 Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
1264
 
1268
 
1265
 ### `clearFormData()`
1269
 ### `clearFormData()`