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 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;

12
apple/RNCWebView.m
View File

@ -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

1
apple/RNCWebViewManager.m
View File

@ -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)

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)
- [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
- [`onFileDownload`](Reference.md#onFileDownload)
- [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
## 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)
| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | iOS, Android, macOS
| Type | Required | Platform |
| ------ | -------- | ------------------- |
| string | No | iOS, Android, macOS |
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)
| Type | Required | Platform |
| ------ | -------- | -------- |
| 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() {
@ -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).
| Type | Required | Platform |
| ------ | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------------------------------------- |
| 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).
| Type | Required | Platform |
| ------ | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------------------------------------- |
| 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.
| Type | Required | Platform |
| ---- | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------- |
| bool | No | iOS, Android, macOS |
---
@ -238,8 +239,8 @@ The `nativeConfig` prop expects an object with the following keys:
- `props` (object)
- `viewManager` (object)
| Type | Required | Platform |
| ------ | -------- | -------- |
| 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;
@ -389,8 +390,8 @@ url
Function that is invoked when the `WebView` is loading.
| Type | Required | Platform |
| -------- | -------- | --------- |
| 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();
@ -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://*".
| Type | Required | Platform |
| ---------------- | -------- | -------- |
| Type | Required | Platform |
| ---------------- | -------- | ------------------- |
| array of strings | No | iOS, Android, macOS |
Example:
@ -601,8 +602,8 @@ Example:
Function that returns a view to show if there's an error.
| Type | Required | Platform |
| -------- | -------- | -------- |
| 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} />}
/>
```
@ -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.
| Type | Required | Platform |
| -------- | -------- | -------- |
| Type | Required | Platform |
| -------- | -------- | ------------------- |
| function | No | iOS, Android, macOS |
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.
| Type | Required | Platform |
| -------- | -------- | -------- |
| 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');
}}
@ -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.
| Type | Required | Platform |
| ---- | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------- |
| 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`.
| Type | Required | Platform |
| ------ | -------- | -------- |
| Type | Required | Platform |
| ------ | -------- | ------------------- |
| 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.
| Type | Required | Platform |
| ------ | -------- | -------- |
| Type | Required | Platform |
| ------ | -------- | ------------------- |
| string | No | iOS, Android, macOS |
```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`.
| Type | Required | Platform |
| ---- | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------- |
| 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`.
| Type | Required | Platform |
| ---- | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------- |
| 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`.
| Type | Required | Platform |
| ---- | -------- | -------- |
| Type | Required | Platform |
| ---- | -------- | ------------------- |
| 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.
| Type | Required | Platform |
| ------- | -------- | -------- |
| Type | Required | Platform |
| ------- | -------- | ------------------- |
| 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.
| Type | Required | Default | Platform |
| ------- | -------- | ------- | -------- |
| Type | Required | Default | Platform |
| ------- | -------- | ------- | ------------------- |
| 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.
Example:
```jsx
<WebView
source={{ uri: 'https://reactnative.dev' }}
onFileDownload={ ( { nativeEvent: { downloadUrl } } ) => {
onFileDownload={({ nativeEvent: { downloadUrl } }) => {
// 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 |
| ------- | -------- | -------- |
| function | No | iOS |
| boolean | No | iOS |
Example:
```javascript
<WebView autoManageStatusBarEnabled={false} />
```
## Methods
@ -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 -->

8
src/WebViewTypes.ts
View File

@ -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`.