|
@@ -133,9 +133,9 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
133
|
133
|
|
134
|
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
|
140
|
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
141
|
141
|
|
|
@@ -165,15 +165,15 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
165
|
165
|
|
166
|
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
|
170
|
| string | No | iOS, macOS |
|
171
|
171
|
|
172
|
172
|
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
173
|
173
|
|
174
|
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
|
178
|
```jsx
|
179
|
179
|
const INJECTED_JAVASCRIPT = `(function() {
|
|
@@ -195,8 +195,8 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScript` only
|
195
|
195
|
|
196
|
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
|
200
|
| bool | No | iOS and macOS (only `true` supported for Android) |
|
201
|
201
|
|
202
|
202
|
---
|
|
@@ -207,8 +207,8 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScriptBeforeC
|
207
|
207
|
|
208
|
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
|
212
|
| bool | No | iOS and macOS (only `true` supported for Android) |
|
213
|
213
|
|
214
|
214
|
---
|
|
@@ -219,8 +219,8 @@ Boolean that determines whether HTML5 audio and video requires the user to tap t
|
219
|
219
|
|
220
|
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
|
224
|
| bool | No | iOS, Android, macOS |
|
225
|
225
|
|
226
|
226
|
---
|
|
@@ -235,8 +235,8 @@ The `nativeConfig` prop expects an object with the following keys:
|
235
|
235
|
- `props` (object)
|
236
|
236
|
- `viewManager` (object)
|
237
|
237
|
|
238
|
|
-| Type | Required | Platform |
|
239
|
|
-| ------ | -------- | -------- |
|
|
238
|
+| Type | Required | Platform |
|
|
239
|
+| ------ | -------- | ------------------- |
|
240
|
240
|
| object | No | iOS, Android, macOS |
|
241
|
241
|
|
242
|
242
|
---
|
|
@@ -254,7 +254,7 @@ Example:
|
254
|
254
|
```jsx
|
255
|
255
|
<WebView
|
256
|
256
|
source={{ uri: 'https://reactnative.dev' }}
|
257
|
|
- onError={syntheticEvent => {
|
|
257
|
+ onError={(syntheticEvent) => {
|
258
|
258
|
const { nativeEvent } = syntheticEvent;
|
259
|
259
|
console.warn('WebView error: ', nativeEvent);
|
260
|
260
|
}}
|
|
@@ -294,7 +294,7 @@ Example:
|
294
|
294
|
```jsx
|
295
|
295
|
<WebView
|
296
|
296
|
source={{ uri: 'https://reactnative.dev' }}
|
297
|
|
- onLoad={syntheticEvent => {
|
|
297
|
+ onLoad={(syntheticEvent) => {
|
298
|
298
|
const { nativeEvent } = syntheticEvent;
|
299
|
299
|
this.url = nativeEvent.url;
|
300
|
300
|
}}
|
|
@@ -327,7 +327,7 @@ Example:
|
327
|
327
|
```jsx
|
328
|
328
|
<WebView
|
329
|
329
|
source={{ uri: 'https://reactnative.dev' }}
|
330
|
|
- onLoadEnd={syntheticEvent => {
|
|
330
|
+ onLoadEnd={(syntheticEvent) => {
|
331
|
331
|
// update component to be aware of loading status
|
332
|
332
|
const { nativeEvent } = syntheticEvent;
|
333
|
333
|
this.isLoading = nativeEvent.loading;
|
|
@@ -361,7 +361,7 @@ Example:
|
361
|
361
|
```jsx
|
362
|
362
|
<WebView
|
363
|
363
|
source={{ uri: 'https://reactnative.dev/=' }}
|
364
|
|
- onLoadStart={syntheticEvent => {
|
|
364
|
+ onLoadStart={(syntheticEvent) => {
|
365
|
365
|
// update component to be aware of loading status
|
366
|
366
|
const { nativeEvent } = syntheticEvent;
|
367
|
367
|
this.isLoading = nativeEvent.loading;
|
|
@@ -386,8 +386,8 @@ url
|
386
|
386
|
|
387
|
387
|
Function that is invoked when the `WebView` is loading.
|
388
|
388
|
|
389
|
|
-| Type | Required | Platform |
|
390
|
|
-| -------- | -------- | --------- |
|
|
389
|
+| Type | Required | Platform |
|
|
390
|
+| -------- | -------- | ------------------- |
|
391
|
391
|
| function | No | iOS, Android, macOS |
|
392
|
392
|
|
393
|
393
|
Example:
|
|
@@ -431,7 +431,7 @@ Example:
|
431
|
431
|
```jsx
|
432
|
432
|
<WebView
|
433
|
433
|
source={{ uri: 'https://reactnative.dev' }}
|
434
|
|
- onHttpError={syntheticEvent => {
|
|
434
|
+ onHttpError={(syntheticEvent) => {
|
435
|
435
|
const { nativeEvent } = syntheticEvent;
|
436
|
436
|
console.warn(
|
437
|
437
|
'WebView received error status code: ',
|
|
@@ -486,7 +486,7 @@ Example:
|
486
|
486
|
```jsx
|
487
|
487
|
<WebView
|
488
|
488
|
source={{ uri: 'https://reactnative.dev' }}
|
489
|
|
- onNavigationStateChange={navState => {
|
|
489
|
+ onNavigationStateChange={(navState) => {
|
490
|
490
|
// Keep track of going back navigation within component
|
491
|
491
|
this.canGoBack = navState.canGoBack;
|
492
|
492
|
}}
|
|
@@ -522,7 +522,7 @@ Example:
|
522
|
522
|
```jsx
|
523
|
523
|
<WebView
|
524
|
524
|
source={{ uri: 'https://reactnative.dev' }}
|
525
|
|
- onContentProcessDidTerminate={syntheticEvent => {
|
|
525
|
+ onContentProcessDidTerminate={(syntheticEvent) => {
|
526
|
526
|
const { nativeEvent } = syntheticEvent;
|
527
|
527
|
console.warn('Content process terminated, reloading', nativeEvent);
|
528
|
528
|
this.refs.webview.reload();
|
|
@@ -547,8 +547,8 @@ url
|
547
|
547
|
|
548
|
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
|
552
|
| array of strings | No | iOS, Android, macOS |
|
553
|
553
|
|
554
|
554
|
Example:
|
|
@@ -567,8 +567,8 @@ Example:
|
567
|
567
|
|
568
|
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
|
572
|
| function | No | iOS, Android, macOS |
|
573
|
573
|
|
574
|
574
|
Example:
|
|
@@ -576,7 +576,7 @@ Example:
|
576
|
576
|
```jsx
|
577
|
577
|
<WebView
|
578
|
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,8 +588,8 @@ The function passed to `renderError` will be called with the name of the error
|
588
|
588
|
|
589
|
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
|
593
|
| function | No | iOS, Android, macOS |
|
594
|
594
|
|
595
|
595
|
Example:
|
|
@@ -620,8 +620,8 @@ Function that allows custom handling of any web view requests. Return `true` fro
|
620
|
620
|
|
621
|
621
|
On Android, is not called on the first load.
|
622
|
622
|
|
623
|
|
-| Type | Required | Platform |
|
624
|
|
-| -------- | -------- | -------- |
|
|
623
|
+| Type | Required | Platform |
|
|
624
|
+| -------- | -------- | ------------------- |
|
625
|
625
|
| function | No | iOS, Android, macOS |
|
626
|
626
|
|
627
|
627
|
Example:
|
|
@@ -629,7 +629,7 @@ Example:
|
629
|
629
|
```jsx
|
630
|
630
|
<WebView
|
631
|
631
|
source={{ uri: 'https://reactnative.dev' }}
|
632
|
|
- onShouldStartLoadWithRequest={request => {
|
|
632
|
+ onShouldStartLoadWithRequest={(request) => {
|
633
|
633
|
// Only allow navigating within this website
|
634
|
634
|
return request.url.startsWith('https://reactnative.dev');
|
635
|
635
|
}}
|
|
@@ -656,8 +656,8 @@ navigationType
|
656
|
656
|
|
657
|
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
|
661
|
| bool | No | iOS, Android, macOS |
|
662
|
662
|
|
663
|
663
|
---
|
|
@@ -783,8 +783,8 @@ Boolean value to enable third party cookies in the `WebView`. Used on Android Lo
|
783
|
783
|
|
784
|
784
|
Sets the user-agent for the `WebView`.
|
785
|
785
|
|
786
|
|
-| Type | Required | Platform |
|
787
|
|
-| ------ | -------- | -------- |
|
|
786
|
+| Type | Required | Platform |
|
|
787
|
+| ------ | -------- | ------------------- |
|
788
|
788
|
| string | No | iOS, Android, macOS |
|
789
|
789
|
|
790
|
790
|
---
|
|
@@ -793,8 +793,8 @@ Sets the user-agent for the `WebView`.
|
793
|
793
|
|
794
|
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
|
798
|
| string | No | iOS, Android, macOS |
|
799
|
799
|
|
800
|
800
|
```jsx
|
|
@@ -933,8 +933,8 @@ The default value is `true`.
|
933
|
933
|
|
934
|
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
|
938
|
| bool | No | iOS, Android, macOS |
|
939
|
939
|
|
940
|
940
|
---
|
|
@@ -943,8 +943,8 @@ Boolean value that determines whether a horizontal scroll indicator is shown in
|
943
|
943
|
|
944
|
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
|
948
|
| bool | No | iOS, Android, macOS |
|
949
|
949
|
|
950
|
950
|
---
|
|
@@ -963,8 +963,8 @@ Set whether Geolocation is enabled in the `WebView`. The default value is `false
|
963
|
963
|
|
964
|
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
|
968
|
| bool | No | iOS, Android, macOS |
|
969
|
969
|
|
970
|
970
|
---
|
|
@@ -1043,8 +1043,8 @@ If true, this will be able horizontal swipe gestures. The default value is `fals
|
1043
|
1043
|
|
1044
|
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
|
1048
|
| boolean | No | iOS, Android, macOS |
|
1049
|
1049
|
|
1050
|
1050
|
---
|
|
@@ -1073,8 +1073,8 @@ Sets whether the WebView should disable saving form data. The default value is `
|
1073
|
1073
|
|
1074
|
1074
|
Sets whether WebView should use browser caching.
|
1075
|
1075
|
|
1076
|
|
-| Type | Required | Default | Platform |
|
1077
|
|
-| ------- | -------- | ------- | -------- |
|
|
1076
|
+| Type | Required | Default | Platform |
|
|
1077
|
+| ------- | -------- | ------- | ------------------- |
|
1078
|
1078
|
| boolean | No | true | iOS, Android, macOS |
|
1079
|
1079
|
|
1080
|
1080
|
---
|
|
@@ -1151,6 +1151,7 @@ When set to true the hardware silent switch is ignored. Default: `false`
|
1151
|
1151
|
| boolean | No | iOS |
|
1152
|
1152
|
|
1153
|
1153
|
### `onFileDownload`
|
|
1154
|
+
|
1154
|
1155
|
This property is iOS-only.
|
1155
|
1156
|
|
1156
|
1157
|
Function that is invoked when the client needs to download a file.
|
|
@@ -1169,33 +1170,35 @@ the file.
|
1169
|
1170
|
If not provided, the default is to let the webview try to render the file.
|
1170
|
1171
|
|
1171
|
1172
|
Example:
|
|
1173
|
+
|
1172
|
1174
|
```jsx
|
1173
|
1175
|
<WebView
|
1174
|
1176
|
source={{ uri: 'https://reactnative.dev' }}
|
1175
|
|
- onFileDownload={ ( { nativeEvent: { downloadUrl } } ) => {
|
|
1177
|
+ onFileDownload={({ nativeEvent: { downloadUrl } }) => {
|
1176
|
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
|
1185
|
| function | No | iOS |
|
1184
|
1186
|
|
1185
|
|
-
|
1186
|
1187
|
---
|
1187
|
1188
|
|
1188
|
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
|
1197
|
Example:
|
1197
|
1198
|
|
1198
|
|
-`<WebView autoManageStatusBarEnabled={false} />`
|
|
1199
|
+```javascript
|
|
1200
|
+<WebView autoManageStatusBarEnabled={false} />
|
|
1201
|
+```
|
1199
|
1202
|
|
1200
|
1203
|
## Methods
|
1201
|
1204
|
|
|
@@ -1260,6 +1263,7 @@ Request the webView to ask for focus. (People working on TV apps might want havi
|
1260
|
1263
|
```javascript
|
1261
|
1264
|
postMessage('message');
|
1262
|
1265
|
```
|
|
1266
|
+
|
1263
|
1267
|
Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
|
1264
|
1268
|
|
1265
|
1269
|
### `clearFormData()`
|