status-im
/
react-native-webview
mirror of https://github.com/status-im/react-native-webview.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2020-09-15 07:42:09 +07:00 committed by GitHub
parent 40814101be
commit 22a60fd23a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apple/RNCWebView.h
View File

@ -35,6 +35,7 @@
@property (nonatomic, assign) BOOL injectedJavaScriptBeforeContentLoadedForMainFrameOnly; @property (nonatomic, assign) BOOL injectedJavaScriptBeforeContentLoadedForMainFrameOnly;
@property (nonatomic, assign) BOOL scrollEnabled; @property (nonatomic, assign) BOOL scrollEnabled;
@property (nonatomic, assign) BOOL sharedCookiesEnabled; @property (nonatomic, assign) BOOL sharedCookiesEnabled;
@property (nonatomic, assign) BOOL autoManageStatusBarEnabled;
@property (nonatomic, assign) BOOL pagingEnabled; @property (nonatomic, assign) BOOL pagingEnabled;
@property (nonatomic, assign) CGFloat decelerationRate; @property (nonatomic, assign) CGFloat decelerationRate;
@property (nonatomic, assign) BOOL allowsInlineMediaPlayback; @property (nonatomic, assign) BOOL allowsInlineMediaPlayback;

12
apple/RNCWebView.m
View File

@ -125,6 +125,7 @@ static NSDictionary* customCertificatesForHost;
_showsVerticalScrollIndicator = YES; _showsVerticalScrollIndicator = YES;
_directionalLockEnabled = YES; _directionalLockEnabled = YES;
_automaticallyAdjustContentInsets = YES; _automaticallyAdjustContentInsets = YES;
_autoManageStatusBarEnabled = YES;
_contentInset = UIEdgeInsetsZero; _contentInset = UIEdgeInsetsZero;
_savedKeyboardDisplayRequiresUserAction = YES; _savedKeyboardDisplayRequiresUserAction = YES;
#if !TARGET_OS_OSX #if !TARGET_OS_OSX
@ -335,9 +336,13 @@ static NSDictionary* customCertificatesForHost;
-(void)showFullScreenVideoStatusBars -(void)showFullScreenVideoStatusBars
{ {
#pragma clang diagnostic ignored "-Wdeprecated-declarations" #pragma clang diagnostic ignored "-Wdeprecated-declarations"
if (!_autoManageStatusBarEnabled) {
return;
}
_isFullScreenVideoOpen = YES; _isFullScreenVideoOpen = YES;
RCTUnsafeExecuteOnMainQueueSync(^{ RCTUnsafeExecuteOnMainQueueSync(^{
[RCTSharedApplication() setStatusBarStyle:UIStatusBarStyleLightContent animated:YES]; [RCTSharedApplication() setStatusBarStyle:self->_savedStatusBarStyle animated:YES];
}); });
#pragma clang diagnostic pop #pragma clang diagnostic pop
} }
@ -345,6 +350,10 @@ static NSDictionary* customCertificatesForHost;
-(void)hideFullScreenVideoStatusBars -(void)hideFullScreenVideoStatusBars
{ {
#pragma clang diagnostic ignored "-Wdeprecated-declarations" #pragma clang diagnostic ignored "-Wdeprecated-declarations"
if (!_autoManageStatusBarEnabled) {
return;
}
_isFullScreenVideoOpen = NO; _isFullScreenVideoOpen = NO;
RCTUnsafeExecuteOnMainQueueSync(^{ RCTUnsafeExecuteOnMainQueueSync(^{
[RCTSharedApplication() setStatusBarHidden:self->_savedStatusBarHidden animated:YES]; [RCTSharedApplication() setStatusBarHidden:self->_savedStatusBarHidden animated:YES];
@ -1375,4 +1384,3 @@ static NSDictionary* customCertificatesForHost;
} }
@end @end

1
apple/RNCWebViewManager.m
View File

@ -66,6 +66,7 @@ RCT_EXPORT_VIEW_PROPERTY(dataDetectorTypes, WKDataDetectorTypes)
#endif #endif
RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets) RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL) RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
RCT_EXPORT_VIEW_PROPERTY(autoManageStatusBarEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL) RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL)
RCT_EXPORT_VIEW_PROPERTY(allowsBackForwardNavigationGestures, BOOL) RCT_EXPORT_VIEW_PROPERTY(allowsBackForwardNavigationGestures, BOOL)
RCT_EXPORT_VIEW_PROPERTY(incognito, BOOL) RCT_EXPORT_VIEW_PROPERTY(incognito, BOOL)

123
docs/Reference.md
View File

@ -71,6 +71,7 @@ This document lays out the current public properties and methods for the React N
- [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled) - [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled)
- [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch) - [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
- [`onFileDownload`](Reference.md#onFileDownload) - [`onFileDownload`](Reference.md#onFileDownload)
- [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
## Methods Index ## Methods Index
@ -136,9 +137,9 @@ 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) On iOS, see [`WKUserScriptInjectionTimeAtDocumentEnd`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentend?language=objc)
| Type | Required | Platform | | 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. To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
@ -168,15 +169,15 @@ 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) On iOS, see [`WKUserScriptInjectionTimeAtDocumentStart`](https://developer.apple.com/documentation/webkit/wkuserscriptinjectiontime/wkuserscriptinjectiontimeatdocumentstart?language=objc)
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ------ | -------- | ---------- |
| string | No | iOS, macOS | | string | No | iOS, macOS |
To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide. To learn more, read the [Communicating between JS and Native](Guide.md#communicating-between-js-and-native) guide.
Example: 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 ```jsx
const INJECTED_JAVASCRIPT = `(function() { const INJECTED_JAVASCRIPT = `(function() {
@ -198,8 +199,8 @@ 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). If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ---- | -------- | ------------------------------------------------- |
| bool | No | iOS and macOS (only `true` supported for Android) | | bool | No | iOS and macOS (only `true` supported for Android) |
--- ---
@ -210,8 +211,8 @@ 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). If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ---- | -------- | ------------------------------------------------- |
| bool | No | iOS and macOS (only `true` supported for Android) | | bool | No | iOS and macOS (only `true` supported for Android) |
--- ---
@ -222,8 +223,8 @@ 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. 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 | | Type | Required | Platform |
| ---- | -------- | -------- | | ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS | | bool | No | iOS, Android, macOS |
--- ---
@ -238,8 +239,8 @@ The `nativeConfig` prop expects an object with the following keys:
- `props` (object) - `props` (object)
- `viewManager` (object) - `viewManager` (object)
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ------ | -------- | ------------------- |
| object | No | iOS, Android, macOS | | object | No | iOS, Android, macOS |
--- ---
@ -257,7 +258,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onError={syntheticEvent => { onError={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
console.warn('WebView error: ', nativeEvent); console.warn('WebView error: ', nativeEvent);
}} }}
@ -297,7 +298,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onLoad={syntheticEvent => { onLoad={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
this.url = nativeEvent.url; this.url = nativeEvent.url;
}} }}
@ -330,7 +331,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onLoadEnd={syntheticEvent => { onLoadEnd={(syntheticEvent) => {
// update component to be aware of loading status // update component to be aware of loading status
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
this.isLoading = nativeEvent.loading; this.isLoading = nativeEvent.loading;
@ -364,7 +365,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev/=' }} source={{ uri: 'https://reactnative.dev/=' }}
onLoadStart={syntheticEvent => { onLoadStart={(syntheticEvent) => {
// update component to be aware of loading status // update component to be aware of loading status
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
this.isLoading = nativeEvent.loading; this.isLoading = nativeEvent.loading;
@ -389,8 +390,8 @@ url
Function that is invoked when the `WebView` is loading. Function that is invoked when the `WebView` is loading.
| Type | Required | Platform | | Type | Required | Platform |
| -------- | -------- | --------- | | -------- | -------- | ------------------- |
| function | No | iOS, Android, macOS | | function | No | iOS, Android, macOS |
Example: Example:
@ -434,7 +435,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onHttpError={syntheticEvent => { onHttpError={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
console.warn( console.warn(
'WebView received error status code: ', 'WebView received error status code: ',
@ -522,7 +523,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onNavigationStateChange={navState => { onNavigationStateChange={(navState) => {
// Keep track of going back navigation within component // Keep track of going back navigation within component
this.canGoBack = navState.canGoBack; this.canGoBack = navState.canGoBack;
}} }}
@ -556,7 +557,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onContentProcessDidTerminate={syntheticEvent => { onContentProcessDidTerminate={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent; const { nativeEvent } = syntheticEvent;
console.warn('Content process terminated, reloading', nativeEvent); console.warn('Content process terminated, reloading', nativeEvent);
this.refs.webview.reload(); this.refs.webview.reload();
@ -581,8 +582,8 @@ 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://*". 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 | | Type | Required | Platform |
| ---------------- | -------- | -------- | | ---------------- | -------- | ------------------- |
| array of strings | No | iOS, Android, macOS | | array of strings | No | iOS, Android, macOS |
Example: Example:
@ -601,8 +602,8 @@ Example:
Function that returns a view to show if there's an error. Function that returns a view to show if there's an error.
| Type | Required | Platform | | Type | Required | Platform |
| -------- | -------- | -------- | | -------- | -------- | ------------------- |
| function | No | iOS, Android, macOS | | function | No | iOS, Android, macOS |
Example: Example:
@ -610,7 +611,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
renderError={errorName => <Error name={errorName} />} renderError={(errorName) => <Error name={errorName} />}
/> />
``` ```
@ -622,8 +623,8 @@ 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. Function that returns a loading indicator. The startInLoadingState prop must be set to true in order to use this prop.
| Type | Required | Platform | | Type | Required | Platform |
| -------- | -------- | -------- | | -------- | -------- | ------------------- |
| function | No | iOS, Android, macOS | | function | No | iOS, Android, macOS |
Example: Example:
@ -654,8 +655,8 @@ Function that allows custom handling of any web view requests. Return `true` fro
On Android, is not called on the first load. On Android, is not called on the first load.
| Type | Required | Platform | | Type | Required | Platform |
| -------- | -------- | -------- | | -------- | -------- | ------------------- |
| function | No | iOS, Android, macOS | | function | No | iOS, Android, macOS |
Example: Example:
@ -663,7 +664,7 @@ Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onShouldStartLoadWithRequest={request => { onShouldStartLoadWithRequest={(request) => {
// Only allow navigating within this website // Only allow navigating within this website
return request.url.startsWith('https://reactnative.dev'); return request.url.startsWith('https://reactnative.dev');
}} }}
@ -691,8 +692,8 @@ 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. 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 | | Type | Required | Platform |
| ---- | -------- | -------- | | ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS | | bool | No | iOS, Android, macOS |
--- ---
@ -836,8 +837,8 @@ Boolean value to enable third party cookies in the `WebView`. Used on Android Lo
Sets the user-agent for the `WebView`. Sets the user-agent for the `WebView`.
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ------ | -------- | ------------------- |
| string | No | iOS, Android, macOS | | string | No | iOS, Android, macOS |
--- ---
@ -846,8 +847,8 @@ Sets the user-agent for the `WebView`.
Append to the existing user-agent. Setting `userAgent` will override this. Append to the existing user-agent. Setting `userAgent` will override this.
| Type | Required | Platform | | Type | Required | Platform |
| ------ | -------- | -------- | | ------ | -------- | ------------------- |
| string | No | iOS, Android, macOS | | string | No | iOS, Android, macOS |
```jsx ```jsx
@ -1004,8 +1005,8 @@ The default value is `true`.
Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. 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 | | Type | Required | Platform |
| ---- | -------- | -------- | | ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS | | bool | No | iOS, Android, macOS |
--- ---
@ -1014,8 +1015,8 @@ 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`. Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
| Type | Required | Platform | | Type | Required | Platform |
| ---- | -------- | -------- | | ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS | | bool | No | iOS, Android, macOS |
--- ---
@ -1034,8 +1035,8 @@ 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`. 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 | | Type | Required | Platform |
| ---- | -------- | -------- | | ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS | | bool | No | iOS, Android, macOS |
--- ---
@ -1114,8 +1115,8 @@ 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. Does not store any data within the lifetime of the WebView.
| Type | Required | Platform | | Type | Required | Platform |
| ------- | -------- | -------- | | ------- | -------- | ------------------- |
| boolean | No | iOS, Android, macOS | | boolean | No | iOS, Android, macOS |
--- ---
@ -1144,8 +1145,8 @@ Sets whether the WebView should disable saving form data. The default value is `
Sets whether WebView should use browser caching. Sets whether WebView should use browser caching.
| Type | Required | Default | Platform | | Type | Required | Default | Platform |
| ------- | -------- | ------- | -------- | | ------- | -------- | ------- | ------------------- |
| boolean | No | true | iOS, Android, macOS | | boolean | No | true | iOS, Android, macOS |
--- ---
@ -1250,18 +1251,35 @@ the file.
If not provided, the default is to let the webview try to render the file. If not provided, the default is to let the webview try to render the file.
Example: Example:
```jsx ```jsx
<WebView <WebView
source={{ uri: 'https://reactnative.dev' }} source={{ uri: 'https://reactnative.dev' }}
onFileDownload={ ( { nativeEvent: { downloadUrl } } ) => { onFileDownload={({ nativeEvent: { downloadUrl } }) => {
// You use downloadUrl which is a string to download files however you want. // You use downloadUrl which is a string to download files however you want.
}} }}
/> />
``` ```
| 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 | | Type | Required | Platform |
| ------- | -------- | -------- | | ------- | -------- | -------- |
| function | No | iOS | | boolean | No | iOS |
Example:
```javascript
<WebView autoManageStatusBarEnabled={false} />
```
## Methods ## Methods
@ -1326,6 +1344,7 @@ Request the webView to ask for focus. (People working on TV apps might want havi
```javascript ```javascript
postMessage('message'); postMessage('message');
``` ```
Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage). Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
### `clearFormData()`[⬆](#methods-index)<!-- Link generated with jump2header --> ### `clearFormData()`[⬆](#methods-index)<!-- Link generated with jump2header -->

8
src/WebViewTypes.ts
View File

@ -311,6 +311,7 @@ export interface IOSNativeWebViewProps extends CommonNativeWebViewProps {
allowsInlineMediaPlayback?: boolean; allowsInlineMediaPlayback?: boolean;
allowsLinkPreview?: boolean; allowsLinkPreview?: boolean;
automaticallyAdjustContentInsets?: boolean; automaticallyAdjustContentInsets?: boolean;
autoManageStatusBarEnabled?: boolean;
bounces?: boolean; bounces?: boolean;
contentInset?: ContentInsetProp; contentInset?: ContentInsetProp;
contentInsetAdjustmentBehavior?: ContentInsetAdjustmentBehavior; contentInsetAdjustmentBehavior?: ContentInsetAdjustmentBehavior;
@ -498,6 +499,13 @@ export interface IOSWebViewProps extends WebViewSharedProps {
*/ */
sharedCookiesEnabled?: boolean; 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. * A Boolean value that determines whether scrolling is disabled in a particular direction.
* The default value is `true`. * The default value is `true`.