|
@@ -72,6 +72,7 @@ This document lays out the current public properties and methods for the React N
|
72
|
72
|
- [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled)
|
73
|
73
|
- [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
|
74
|
74
|
- [`onFileDownload`](Reference.md#onFileDownload)
|
|
75
|
+- [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
|
75
|
76
|
|
76
|
77
|
## Methods Index
|
77
|
78
|
|
|
@@ -137,9 +138,9 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
137
|
138
|
|
138
|
139
|
On iOS, see [`WKUserScriptInjectionTimeAtDocumentEnd`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentend?language=objc)
|
139
|
140
|
|
140
|
|
-| Type | Required | Platform |
|
141
|
|
-| ------ | -------- | -------- |
|
142
|
|
-| string | No | iOS, Android, macOS
|
|
141
|
+| Type | Required | Platform |
|
|
142
|
+| ------ | -------- | ------------------- |
|
|
143
|
+| string | No | iOS, Android, macOS |
|
143
|
144
|
|
144
|
145
|
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
145
|
146
|
|
|
@@ -169,15 +170,15 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
169
|
170
|
|
170
|
171
|
On iOS, see [`WKUserScriptInjectionTimeAtDocumentStart`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc)
|
171
|
172
|
|
172
|
|
-| Type | Required | Platform |
|
173
|
|
-| ------ | -------- | -------- |
|
|
173
|
+| Type | Required | Platform |
|
|
174
|
+| ------ | -------- | ---------- |
|
174
|
175
|
| string | No | iOS, macOS |
|
175
|
176
|
|
176
|
177
|
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
177
|
178
|
|
178
|
179
|
Example:
|
179
|
180
|
|
180
|
|
-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.
|
|
181
|
+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.
|
181
|
182
|
|
182
|
183
|
```jsx
|
183
|
184
|
const INJECTED_JAVASCRIPT = `(function() {
|
|
@@ -199,8 +200,8 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScript` only
|
199
|
200
|
|
200
|
201
|
If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
|
201
|
202
|
|
202
|
|
-| Type | Required | Platform |
|
203
|
|
-| ------ | -------- | -------- |
|
|
203
|
+| Type | Required | Platform |
|
|
204
|
+| ---- | -------- | ------------------------------------------------- |
|
204
|
205
|
| bool | No | iOS and macOS (only `true` supported for Android) |
|
205
|
206
|
|
206
|
207
|
---
|
|
@@ -211,8 +212,8 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScriptBeforeC
|
211
|
212
|
|
212
|
213
|
If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
|
213
|
214
|
|
214
|
|
-| Type | Required | Platform |
|
215
|
|
-| ------ | -------- | -------- |
|
|
215
|
+| Type | Required | Platform |
|
|
216
|
+| ---- | -------- | ------------------------------------------------- |
|
216
|
217
|
| bool | No | iOS and macOS (only `true` supported for Android) |
|
217
|
218
|
|
218
|
219
|
---
|
|
@@ -223,8 +224,8 @@ Boolean that determines whether HTML5 audio and video requires the user to tap t
|
223
|
224
|
|
224
|
225
|
NOTE: the default `true` value might cause some videos to hang loading on iOS. Setting it to `false` could fix this issue.
|
225
|
226
|
|
226
|
|
-| Type | Required | Platform |
|
227
|
|
-| ---- | -------- | -------- |
|
|
227
|
+| Type | Required | Platform |
|
|
228
|
+| ---- | -------- | ------------------- |
|
228
|
229
|
| bool | No | iOS, Android, macOS |
|
229
|
230
|
|
230
|
231
|
---
|
|
@@ -239,8 +240,8 @@ The `nativeConfig` prop expects an object with the following keys:
|
239
|
240
|
- `props` (object)
|
240
|
241
|
- `viewManager` (object)
|
241
|
242
|
|
242
|
|
-| Type | Required | Platform |
|
243
|
|
-| ------ | -------- | -------- |
|
|
243
|
+| Type | Required | Platform |
|
|
244
|
+| ------ | -------- | ------------------- |
|
244
|
245
|
| object | No | iOS, Android, macOS |
|
245
|
246
|
|
246
|
247
|
---
|
|
@@ -258,7 +259,7 @@ Example:
|
258
|
259
|
```jsx
|
259
|
260
|
<WebView
|
260
|
261
|
source={{ uri: 'https://reactnative.dev' }}
|
261
|
|
- onError={syntheticEvent => {
|
|
262
|
+ onError={(syntheticEvent) => {
|
262
|
263
|
const { nativeEvent } = syntheticEvent;
|
263
|
264
|
console.warn('WebView error: ', nativeEvent);
|
264
|
265
|
}}
|
|
@@ -298,7 +299,7 @@ Example:
|
298
|
299
|
```jsx
|
299
|
300
|
<WebView
|
300
|
301
|
source={{ uri: 'https://reactnative.dev' }}
|
301
|
|
- onLoad={syntheticEvent => {
|
|
302
|
+ onLoad={(syntheticEvent) => {
|
302
|
303
|
const { nativeEvent } = syntheticEvent;
|
303
|
304
|
this.url = nativeEvent.url;
|
304
|
305
|
}}
|
|
@@ -331,7 +332,7 @@ Example:
|
331
|
332
|
```jsx
|
332
|
333
|
<WebView
|
333
|
334
|
source={{ uri: 'https://reactnative.dev' }}
|
334
|
|
- onLoadEnd={syntheticEvent => {
|
|
335
|
+ onLoadEnd={(syntheticEvent) => {
|
335
|
336
|
// update component to be aware of loading status
|
336
|
337
|
const { nativeEvent } = syntheticEvent;
|
337
|
338
|
this.isLoading = nativeEvent.loading;
|
|
@@ -365,7 +366,7 @@ Example:
|
365
|
366
|
```jsx
|
366
|
367
|
<WebView
|
367
|
368
|
source={{ uri: 'https://reactnative.dev/=' }}
|
368
|
|
- onLoadStart={syntheticEvent => {
|
|
369
|
+ onLoadStart={(syntheticEvent) => {
|
369
|
370
|
// update component to be aware of loading status
|
370
|
371
|
const { nativeEvent } = syntheticEvent;
|
371
|
372
|
this.isLoading = nativeEvent.loading;
|
|
@@ -390,8 +391,8 @@ url
|
390
|
391
|
|
391
|
392
|
Function that is invoked when the `WebView` is loading.
|
392
|
393
|
|
393
|
|
-| Type | Required | Platform |
|
394
|
|
-| -------- | -------- | --------- |
|
|
394
|
+| Type | Required | Platform |
|
|
395
|
+| -------- | -------- | ------------------- |
|
395
|
396
|
| function | No | iOS, Android, macOS |
|
396
|
397
|
|
397
|
398
|
Example:
|
|
@@ -435,7 +436,7 @@ Example:
|
435
|
436
|
```jsx
|
436
|
437
|
<WebView
|
437
|
438
|
source={{ uri: 'https://reactnative.dev' }}
|
438
|
|
- onHttpError={syntheticEvent => {
|
|
439
|
+ onHttpError={(syntheticEvent) => {
|
439
|
440
|
const { nativeEvent } = syntheticEvent;
|
440
|
441
|
console.warn(
|
441
|
442
|
'WebView received error status code: ',
|
|
@@ -523,7 +524,7 @@ Example:
|
523
|
524
|
```jsx
|
524
|
525
|
<WebView
|
525
|
526
|
source={{ uri: 'https://reactnative.dev' }}
|
526
|
|
- onNavigationStateChange={navState => {
|
|
527
|
+ onNavigationStateChange={(navState) => {
|
527
|
528
|
// Keep track of going back navigation within component
|
528
|
529
|
this.canGoBack = navState.canGoBack;
|
529
|
530
|
}}
|
|
@@ -557,7 +558,7 @@ Example:
|
557
|
558
|
```jsx
|
558
|
559
|
<WebView
|
559
|
560
|
source={{ uri: 'https://reactnative.dev' }}
|
560
|
|
- onContentProcessDidTerminate={syntheticEvent => {
|
|
561
|
+ onContentProcessDidTerminate={(syntheticEvent) => {
|
561
|
562
|
const { nativeEvent } = syntheticEvent;
|
562
|
563
|
console.warn('Content process terminated, reloading', nativeEvent);
|
563
|
564
|
this.refs.webview.reload();
|
|
@@ -615,8 +616,8 @@ zoomScale
|
615
|
616
|
|
616
|
617
|
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://*".
|
617
|
618
|
|
618
|
|
-| Type | Required | Platform |
|
619
|
|
-| ---------------- | -------- | -------- |
|
|
619
|
+| Type | Required | Platform |
|
|
620
|
+| ---------------- | -------- | ------------------- |
|
620
|
621
|
| array of strings | No | iOS, Android, macOS |
|
621
|
622
|
|
622
|
623
|
Example:
|
|
@@ -635,8 +636,8 @@ Example:
|
635
|
636
|
|
636
|
637
|
Function that returns a view to show if there's an error.
|
637
|
638
|
|
638
|
|
-| Type | Required | Platform |
|
639
|
|
-| -------- | -------- | -------- |
|
|
639
|
+| Type | Required | Platform |
|
|
640
|
+| -------- | -------- | ------------------- |
|
640
|
641
|
| function | No | iOS, Android, macOS |
|
641
|
642
|
|
642
|
643
|
Example:
|
|
@@ -644,7 +645,7 @@ Example:
|
644
|
645
|
```jsx
|
645
|
646
|
<WebView
|
646
|
647
|
source={{ uri: 'https://reactnative.dev' }}
|
647
|
|
- renderError={errorName => <Error name={errorName} />}
|
|
648
|
+ renderError={(errorName) => <Error name={errorName} />}
|
648
|
649
|
/>
|
649
|
650
|
```
|
650
|
651
|
|
|
@@ -656,8 +657,8 @@ The function passed to `renderError` will be called with the name of the error
|
656
|
657
|
|
657
|
658
|
Function that returns a loading indicator. The startInLoadingState prop must be set to true in order to use this prop.
|
658
|
659
|
|
659
|
|
-| Type | Required | Platform |
|
660
|
|
-| -------- | -------- | -------- |
|
|
660
|
+| Type | Required | Platform |
|
|
661
|
+| -------- | -------- | ------------------- |
|
661
|
662
|
| function | No | iOS, Android, macOS |
|
662
|
663
|
|
663
|
664
|
Example:
|
|
@@ -688,8 +689,8 @@ Function that allows custom handling of any web view requests. Return `true` fro
|
688
|
689
|
|
689
|
690
|
On Android, is not called on the first load.
|
690
|
691
|
|
691
|
|
-| Type | Required | Platform |
|
692
|
|
-| -------- | -------- | -------- |
|
|
692
|
+| Type | Required | Platform |
|
|
693
|
+| -------- | -------- | ------------------- |
|
693
|
694
|
| function | No | iOS, Android, macOS |
|
694
|
695
|
|
695
|
696
|
Example:
|
|
@@ -697,7 +698,7 @@ Example:
|
697
|
698
|
```jsx
|
698
|
699
|
<WebView
|
699
|
700
|
source={{ uri: 'https://reactnative.dev' }}
|
700
|
|
- onShouldStartLoadWithRequest={request => {
|
|
701
|
+ onShouldStartLoadWithRequest={(request) => {
|
701
|
702
|
// Only allow navigating within this website
|
702
|
703
|
return request.url.startsWith('https://reactnative.dev');
|
703
|
704
|
}}
|
|
@@ -725,8 +726,8 @@ isTopFrame
|
725
|
726
|
|
726
|
727
|
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.
|
727
|
728
|
|
728
|
|
-| Type | Required | Platform |
|
729
|
|
-| ---- | -------- | -------- |
|
|
729
|
+| Type | Required | Platform |
|
|
730
|
+| ---- | -------- | ------------------- |
|
730
|
731
|
| bool | No | iOS, Android, macOS |
|
731
|
732
|
|
732
|
733
|
---
|
|
@@ -870,8 +871,8 @@ Boolean value to enable third party cookies in the `WebView`. Used on Android Lo
|
870
|
871
|
|
871
|
872
|
Sets the user-agent for the `WebView`.
|
872
|
873
|
|
873
|
|
-| Type | Required | Platform |
|
874
|
|
-| ------ | -------- | -------- |
|
|
874
|
+| Type | Required | Platform |
|
|
875
|
+| ------ | -------- | ------------------- |
|
875
|
876
|
| string | No | iOS, Android, macOS |
|
876
|
877
|
|
877
|
878
|
---
|
|
@@ -880,8 +881,8 @@ Sets the user-agent for the `WebView`.
|
880
|
881
|
|
881
|
882
|
Append to the existing user-agent. Setting `userAgent` will override this.
|
882
|
883
|
|
883
|
|
-| Type | Required | Platform |
|
884
|
|
-| ------ | -------- | -------- |
|
|
884
|
+| Type | Required | Platform |
|
|
885
|
+| ------ | -------- | ------------------- |
|
885
|
886
|
| string | No | iOS, Android, macOS |
|
886
|
887
|
|
887
|
888
|
```jsx
|
|
@@ -1038,8 +1039,8 @@ The default value is `true`.
|
1038
|
1039
|
|
1039
|
1040
|
Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.
|
1040
|
1041
|
|
1041
|
|
-| Type | Required | Platform |
|
1042
|
|
-| ---- | -------- | -------- |
|
|
1042
|
+| Type | Required | Platform |
|
|
1043
|
+| ---- | -------- | ------------------- |
|
1043
|
1044
|
| bool | No | iOS, Android, macOS |
|
1044
|
1045
|
|
1045
|
1046
|
---
|
|
@@ -1048,8 +1049,8 @@ Boolean value that determines whether a horizontal scroll indicator is shown in
|
1048
|
1049
|
|
1049
|
1050
|
Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
|
1050
|
1051
|
|
1051
|
|
-| Type | Required | Platform |
|
1052
|
|
-| ---- | -------- | -------- |
|
|
1052
|
+| Type | Required | Platform |
|
|
1053
|
+| ---- | -------- | ------------------- |
|
1053
|
1054
|
| bool | No | iOS, Android, macOS |
|
1054
|
1055
|
|
1055
|
1056
|
---
|
|
@@ -1068,8 +1069,8 @@ Set whether Geolocation is enabled in the `WebView`. The default value is `false
|
1068
|
1069
|
|
1069
|
1070
|
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`.
|
1070
|
1071
|
|
1071
|
|
-| Type | Required | Platform |
|
1072
|
|
-| ---- | -------- | -------- |
|
|
1072
|
+| Type | Required | Platform |
|
|
1073
|
+| ---- | -------- | ------------------- |
|
1073
|
1074
|
| bool | No | iOS, Android, macOS |
|
1074
|
1075
|
|
1075
|
1076
|
---
|
|
@@ -1148,8 +1149,8 @@ If true, this will be able horizontal swipe gestures. The default value is `fals
|
1148
|
1149
|
|
1149
|
1150
|
Does not store any data within the lifetime of the WebView.
|
1150
|
1151
|
|
1151
|
|
-| Type | Required | Platform |
|
1152
|
|
-| ------- | -------- | -------- |
|
|
1152
|
+| Type | Required | Platform |
|
|
1153
|
+| ------- | -------- | ------------------- |
|
1153
|
1154
|
| boolean | No | iOS, Android, macOS |
|
1154
|
1155
|
|
1155
|
1156
|
---
|
|
@@ -1178,8 +1179,8 @@ Sets whether the WebView should disable saving form data. The default value is `
|
1178
|
1179
|
|
1179
|
1180
|
Sets whether WebView should use browser caching.
|
1180
|
1181
|
|
1181
|
|
-| Type | Required | Default | Platform |
|
1182
|
|
-| ------- | -------- | ------- | -------- |
|
|
1182
|
+| Type | Required | Default | Platform |
|
|
1183
|
+| ------- | -------- | ------- | ------------------- |
|
1183
|
1184
|
| boolean | No | true | iOS, Android, macOS |
|
1184
|
1185
|
|
1185
|
1186
|
---
|
|
@@ -1284,18 +1285,35 @@ the file.
|
1284
|
1285
|
If not provided, the default is to let the webview try to render the file.
|
1285
|
1286
|
|
1286
|
1287
|
Example:
|
|
1288
|
+
|
1287
|
1289
|
```jsx
|
1288
|
1290
|
<WebView
|
1289
|
1291
|
source={{ uri: 'https://reactnative.dev' }}
|
1290
|
|
- onFileDownload={ ( { nativeEvent: { downloadUrl } } ) => {
|
|
1292
|
+ onFileDownload={({ nativeEvent: { downloadUrl } }) => {
|
1291
|
1293
|
// You use downloadUrl which is a string to download files however you want.
|
1292
|
1294
|
}}
|
1293
|
|
- />
|
|
1295
|
+/>
|
1294
|
1296
|
```
|
1295
|
1297
|
|
|
1298
|
+| Type | Required | Platform |
|
|
1299
|
+| -------- | -------- | -------- |
|
|
1300
|
+| function | No | iOS |
|
|
1301
|
+
|
|
1302
|
+---
|
|
1303
|
+
|
|
1304
|
+### `autoManageStatusBarEnabled`
|
|
1305
|
+
|
|
1306
|
+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`.
|
|
1307
|
+
|
1296
|
1308
|
| Type | Required | Platform |
|
1297
|
1309
|
| ------- | -------- | -------- |
|
1298
|
|
-| function | No | iOS |
|
|
1310
|
+| boolean | No | iOS |
|
|
1311
|
+
|
|
1312
|
+Example:
|
|
1313
|
+
|
|
1314
|
+```javascript
|
|
1315
|
+<WebView autoManageStatusBarEnabled={false} />
|
|
1316
|
+```
|
1299
|
1317
|
|
1300
|
1318
|
## Methods
|
1301
|
1319
|
|
|
@@ -1360,6 +1378,7 @@ Request the webView to ask for focus. (People working on TV apps might want havi
|
1360
|
1378
|
```javascript
|
1361
|
1379
|
postMessage('message');
|
1362
|
1380
|
```
|
|
1381
|
+
|
1363
|
1382
|
Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
|
1364
|
1383
|
|
1365
|
1384
|
### `clearFormData()`[⬆](#methods-index)<!-- Link generated with jump2header -->
|