feat(iOS): Add prop autoManageStatusBarEnabled (#914)
Co-authored-by: Jamon Holmgren <jamon@infinite.red> Co-authored-by: Jamon Holmgren <jamonholmgren@gmail.com> Co-authored-by: Thibault Malbranche <thibault.malbranche@epitech.eu>
This commit is contained in:
Kesha Antonov
GitHub
parent
40814101be
commit
22a60fd23a
|
|
@ -35,6 +35,7 @@
|
|||
@property (nonatomic, assign) BOOL injectedJavaScriptBeforeContentLoadedForMainFrameOnly;
|
||||
@property (nonatomic, assign) BOOL scrollEnabled;
|
||||
@property (nonatomic, assign) BOOL sharedCookiesEnabled;
|
||||
@property (nonatomic, assign) BOOL autoManageStatusBarEnabled;
|
||||
@property (nonatomic, assign) BOOL pagingEnabled;
|
||||
@property (nonatomic, assign) CGFloat decelerationRate;
|
||||
@property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@ static NSDictionary* customCertificatesForHost;
|
|||
_showsVerticalScrollIndicator = YES;
|
||||
_directionalLockEnabled = YES;
|
||||
_automaticallyAdjustContentInsets = YES;
|
||||
_autoManageStatusBarEnabled = YES;
|
||||
_contentInset = UIEdgeInsetsZero;
|
||||
_savedKeyboardDisplayRequiresUserAction = YES;
|
||||
#if !TARGET_OS_OSX
|
||||
|
|
@ -335,9 +336,13 @@ static NSDictionary* customCertificatesForHost;
|
|||
-(void)showFullScreenVideoStatusBars
|
||||
{
|
||||
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
|
||||
if (!_autoManageStatusBarEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
_isFullScreenVideoOpen = YES;
|
||||
RCTUnsafeExecuteOnMainQueueSync(^{
|
||||
[RCTSharedApplication() setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];
|
||||
[RCTSharedApplication() setStatusBarStyle:self->_savedStatusBarStyle animated:YES];
|
||||
});
|
||||
#pragma clang diagnostic pop
|
||||
}
|
||||
|
|
@ -345,6 +350,10 @@ static NSDictionary* customCertificatesForHost;
|
|||
-(void)hideFullScreenVideoStatusBars
|
||||
{
|
||||
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
|
||||
if (!_autoManageStatusBarEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
_isFullScreenVideoOpen = NO;
|
||||
RCTUnsafeExecuteOnMainQueueSync(^{
|
||||
[RCTSharedApplication() setStatusBarHidden:self->_savedStatusBarHidden animated:YES];
|
||||
|
|
@ -1375,4 +1384,3 @@ static NSDictionary* customCertificatesForHost;
|
|||
}
|
||||
|
||||
@end
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ RCT_EXPORT_VIEW_PROPERTY(dataDetectorTypes, WKDataDetectorTypes)
|
|||
#endif
|
||||
RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
|
||||
RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(autoManageStatusBarEnabled, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(allowsBackForwardNavigationGestures, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(incognito, BOOL)
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ This document lays out the current public properties and methods for the React N
|
|||
- [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled)
|
||||
- [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
|
||||
- [`onFileDownload`](Reference.md#onFileDownload)
|
||||
- [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
|
||||
|
||||
## Methods Index
|
||||
|
||||
|
|
@ -137,8 +138,8 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
|||
On iOS, see [`WKUserScriptInjectionTimeAtDocumentEnd`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentend?language=objc)
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| string | No | iOS, Android, macOS
|
||||
| ------ | -------- | ------------------- |
|
||||
| string | No | iOS, Android, macOS |
|
||||
|
||||
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
||||
|
||||
|
|
@ -169,14 +170,14 @@ Make sure the string evaluates to a valid type (`true` works) and doesn't otherw
|
|||
On iOS, see [`WKUserScriptInjectionTimeAtDocumentStart`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc)
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ------ | -------- | ---------- |
|
||||
| string | No | iOS, macOS |
|
||||
|
||||
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
|
||||
|
||||
Example:
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
```jsx
|
||||
const INJECTED_JAVASCRIPT = `(function() {
|
||||
|
|
@ -199,7 +200,7 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScript` only
|
|||
If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ---- | -------- | ------------------------------------------------- |
|
||||
| bool | No | iOS and macOS (only `true` supported for Android) |
|
||||
|
||||
---
|
||||
|
|
@ -211,7 +212,7 @@ If `true` (default; mandatory for Android), loads the `injectedJavaScriptBeforeC
|
|||
If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ---- | -------- | ------------------------------------------------- |
|
||||
| bool | No | iOS and macOS (only `true` supported for Android) |
|
||||
|
||||
---
|
||||
|
|
@ -223,7 +224,7 @@ Boolean that determines whether HTML5 audio and video requires the user to tap t
|
|||
NOTE: the default `true` value might cause some videos to hang loading on iOS. Setting it to `false` could fix this issue.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| ---- | -------- | ------------------- |
|
||||
| bool | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -239,7 +240,7 @@ The `nativeConfig` prop expects an object with the following keys:
|
|||
- `viewManager` (object)
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ------ | -------- | ------------------- |
|
||||
| object | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -257,7 +258,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onError={syntheticEvent => {
|
||||
onError={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
console.warn('WebView error: ', nativeEvent);
|
||||
}}
|
||||
|
|
@ -297,7 +298,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onLoad={syntheticEvent => {
|
||||
onLoad={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.url = nativeEvent.url;
|
||||
}}
|
||||
|
|
@ -330,7 +331,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onLoadEnd={syntheticEvent => {
|
||||
onLoadEnd={(syntheticEvent) => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
|
|
@ -364,7 +365,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev/=' }}
|
||||
onLoadStart={syntheticEvent => {
|
||||
onLoadStart={(syntheticEvent) => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
|
|
@ -390,7 +391,7 @@ url
|
|||
Function that is invoked when the `WebView` is loading.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| -------- | -------- | --------- |
|
||||
| -------- | -------- | ------------------- |
|
||||
| function | No | iOS, Android, macOS |
|
||||
|
||||
Example:
|
||||
|
|
@ -434,7 +435,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onHttpError={syntheticEvent => {
|
||||
onHttpError={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
console.warn(
|
||||
'WebView received error status code: ',
|
||||
|
|
@ -522,7 +523,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onNavigationStateChange={navState => {
|
||||
onNavigationStateChange={(navState) => {
|
||||
// Keep track of going back navigation within component
|
||||
this.canGoBack = navState.canGoBack;
|
||||
}}
|
||||
|
|
@ -556,7 +557,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onContentProcessDidTerminate={syntheticEvent => {
|
||||
onContentProcessDidTerminate={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
console.warn('Content process terminated, reloading', nativeEvent);
|
||||
this.refs.webview.reload();
|
||||
|
|
@ -582,7 +583,7 @@ url
|
|||
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://*".
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---------------- | -------- | -------- |
|
||||
| ---------------- | -------- | ------------------- |
|
||||
| array of strings | No | iOS, Android, macOS |
|
||||
|
||||
Example:
|
||||
|
|
@ -602,7 +603,7 @@ Example:
|
|||
Function that returns a view to show if there's an error.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| -------- | -------- | -------- |
|
||||
| -------- | -------- | ------------------- |
|
||||
| function | No | iOS, Android, macOS |
|
||||
|
||||
Example:
|
||||
|
|
@ -610,7 +611,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
renderError={errorName => <Error name={errorName} />}
|
||||
renderError={(errorName) => <Error name={errorName} />}
|
||||
/>
|
||||
```
|
||||
|
||||
|
|
@ -623,7 +624,7 @@ The function passed to `renderError` will be called with the name of the error
|
|||
Function that returns a loading indicator. The startInLoadingState prop must be set to true in order to use this prop.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| -------- | -------- | -------- |
|
||||
| -------- | -------- | ------------------- |
|
||||
| function | No | iOS, Android, macOS |
|
||||
|
||||
Example:
|
||||
|
|
@ -655,7 +656,7 @@ Function that allows custom handling of any web view requests. Return `true` fro
|
|||
On Android, is not called on the first load.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| -------- | -------- | -------- |
|
||||
| -------- | -------- | ------------------- |
|
||||
| function | No | iOS, Android, macOS |
|
||||
|
||||
Example:
|
||||
|
|
@ -663,7 +664,7 @@ Example:
|
|||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
onShouldStartLoadWithRequest={request => {
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
// Only allow navigating within this website
|
||||
return request.url.startsWith('https://reactnative.dev');
|
||||
}}
|
||||
|
|
@ -692,7 +693,7 @@ isTopFrame
|
|||
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.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| ---- | -------- | ------------------- |
|
||||
| bool | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -837,7 +838,7 @@ Boolean value to enable third party cookies in the `WebView`. Used on Android Lo
|
|||
Sets the user-agent for the `WebView`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ------ | -------- | ------------------- |
|
||||
| string | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -847,7 +848,7 @@ Sets the user-agent for the `WebView`.
|
|||
Append to the existing user-agent. Setting `userAgent` will override this.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------ | -------- | -------- |
|
||||
| ------ | -------- | ------------------- |
|
||||
| string | No | iOS, Android, macOS |
|
||||
|
||||
```jsx
|
||||
|
|
@ -1005,7 +1006,7 @@ The default value is `true`.
|
|||
Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| ---- | -------- | ------------------- |
|
||||
| bool | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -1015,7 +1016,7 @@ Boolean value that determines whether a horizontal scroll indicator is shown in
|
|||
Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| ---- | -------- | ------------------- |
|
||||
| bool | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -1035,7 +1036,7 @@ Set whether Geolocation is enabled in the `WebView`. The default value is `false
|
|||
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`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| ---- | -------- | ------------------- |
|
||||
| bool | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -1115,7 +1116,7 @@ If true, this will be able horizontal swipe gestures. The default value is `fals
|
|||
Does not store any data within the lifetime of the WebView.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------- | -------- | -------- |
|
||||
| ------- | -------- | ------------------- |
|
||||
| boolean | No | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -1145,7 +1146,7 @@ Sets whether the WebView should disable saving form data. The default value is `
|
|||
Sets whether WebView should use browser caching.
|
||||
|
||||
| Type | Required | Default | Platform |
|
||||
| ------- | -------- | ------- | -------- |
|
||||
| ------- | -------- | ------- | ------------------- |
|
||||
| boolean | No | true | iOS, Android, macOS |
|
||||
|
||||
---
|
||||
|
|
@ -1250,6 +1251,7 @@ the file.
|
|||
If not provided, the default is to let the webview try to render the file.
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: 'https://reactnative.dev' }}
|
||||
|
|
@ -1260,9 +1262,25 @@ Example:
|
|||
```
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------- | -------- | -------- |
|
||||
| -------- | -------- | -------- |
|
||||
| function | No | iOS |
|
||||
|
||||
---
|
||||
|
||||
### `autoManageStatusBarEnabled`
|
||||
|
||||
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`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------- | -------- | -------- |
|
||||
| boolean | No | iOS |
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
<WebView autoManageStatusBarEnabled={false} />
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### `extraNativeComponentConfig()`[⬆](#methods-index)<!-- Link generated with jump2header -->
|
||||
|
|
@ -1326,6 +1344,7 @@ Request the webView to ask for focus. (People working on TV apps might want havi
|
|||
```javascript
|
||||
postMessage('message');
|
||||
```
|
||||
|
||||
Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
|
||||
|
||||
### `clearFormData()`[⬆](#methods-index)<!-- Link generated with jump2header -->
|
||||
|
|
|
|||
|
|
@ -311,6 +311,7 @@ export interface IOSNativeWebViewProps extends CommonNativeWebViewProps {
|
|||
allowsInlineMediaPlayback?: boolean;
|
||||
allowsLinkPreview?: boolean;
|
||||
automaticallyAdjustContentInsets?: boolean;
|
||||
autoManageStatusBarEnabled?: boolean;
|
||||
bounces?: boolean;
|
||||
contentInset?: ContentInsetProp;
|
||||
contentInsetAdjustmentBehavior?: ContentInsetAdjustmentBehavior;
|
||||
|
|
@ -498,6 +499,13 @@ export interface IOSWebViewProps extends WebViewSharedProps {
|
|||
*/
|
||||
sharedCookiesEnabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set true if StatusBar should be light when user watch video fullscreen.
|
||||
* The default value is `true`.
|
||||
* @platform ios
|
||||
*/
|
||||
autoManageStatusBarEnabled?: boolean;
|
||||
|
||||
/**
|
||||
* A Boolean value that determines whether scrolling is disabled in a particular direction.
|
||||
* The default value is `true`.
|
||||
|
|
|
|||
Loading…
Reference in New Issue