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>

apple/RNCWebView.h

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

apple/RNCWebView.m

     _showsVerticalScrollIndicator = YES;
     _directionalLockEnabled = YES;
     _automaticallyAdjustContentInsets = YES;
+    _autoManageStatusBarEnabled = YES;
     _contentInset = UIEdgeInsetsZero;
     _savedKeyboardDisplayRequiresUserAction = YES;
     #if !TARGET_OS_OSX
 -(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
 }
 -(void)hideFullScreenVideoStatusBars
 {
 #pragma clang diagnostic ignored "-Wdeprecated-declarations"
+    if (!_autoManageStatusBarEnabled) {
+      return;
+    }
+
     _isFullScreenVideoOpen = NO;
     RCTUnsafeExecuteOnMainQueueSync(^{
       [RCTSharedApplication() setStatusBarHidden:self->_savedStatusBarHidden animated:YES];
 }
 
 @end
-

apple/RNCWebViewManager.m

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

docs/Reference.md

 - [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled)
 - [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
 - [`onFileDownload`](Reference.md#onFileDownload)
+- [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
 
 ## Methods Index
 
 
 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.
 
 
 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() {
 
 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) |
 
 ---
 
 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) |
 
 ---
 
 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 |
 
 ---
 - `props` (object)
 - `viewManager` (object)
 
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
+| Type   | Required | Platform            |
+| ------ | -------- | ------------------- |
 | object | No       | iOS, Android, macOS |
 
 ---
 ```jsx
 <WebView
   source={{ uri: 'https://reactnative.dev' }}
-  onError={syntheticEvent => {
+  onError={(syntheticEvent) => {
     const { nativeEvent } = syntheticEvent;
     console.warn('WebView error: ', nativeEvent);
   }}
 ```jsx
 <WebView
   source={{ uri: 'https://reactnative.dev' }}
-  onLoad={syntheticEvent => {
+  onLoad={(syntheticEvent) => {
     const { nativeEvent } = syntheticEvent;
     this.url = nativeEvent.url;
   }}
 ```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;
 ```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;
 
 Function that is invoked when the `WebView` is loading.
 
-| Type     | Required | Platform |
-| -------- | -------- | --------- |
+| Type     | Required | Platform            |
+| -------- | -------- | ------------------- |
 | function | No       | iOS, Android, macOS |
 
 Example:
 ```jsx
 <WebView
   source={{ uri: 'https://reactnative.dev' }}
-  onHttpError={syntheticEvent => {
+  onHttpError={(syntheticEvent) => {
     const { nativeEvent } = syntheticEvent;
     console.warn(
       'WebView received error status code: ',
 ```jsx
 <WebView
   source={{ uri: 'https://reactnative.dev' }}
-  onNavigationStateChange={navState => {
+  onNavigationStateChange={(navState) => {
     // Keep track of going back navigation within component
     this.canGoBack = navState.canGoBack;
   }}
 ```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();
 
 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:
 
 Function that returns a view to show if there's an error.
 
-| Type     | Required | Platform |
-| -------- | -------- | -------- |
+| Type     | Required | Platform            |
+| -------- | -------- | ------------------- |
 | function | No       | iOS, Android, macOS |
 
 Example:
 ```jsx
 <WebView
   source={{ uri: 'https://reactnative.dev' }}
-  renderError={errorName => <Error name={errorName} />}
+  renderError={(errorName) => <Error name={errorName} />}
 />
 ```
 
 
 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:
 
 On Android, is not called on the first load.
 
-| Type     | Required | Platform |
-| -------- | -------- | -------- |
+| Type     | Required | Platform            |
+| -------- | -------- | ------------------- |
 | function | No       | iOS, Android, macOS |
 
 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');
   }}
 
 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 |
 
 ---
 
 Sets the user-agent for the `WebView`.
 
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
+| Type   | Required | Platform            |
+| ------ | -------- | ------------------- |
 | string | No       | iOS, Android, macOS |
 
 ---
 
 Append to the existing user-agent. Setting `userAgent` will override this.
 
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
+| Type   | Required | Platform            |
+| ------ | -------- | ------------------- |
 | string | No       | iOS, Android, macOS |
 
 ```jsx
 
 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 |
 
 ---
 
 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 |
 
 ---
 
 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 |
 
 ---
 
 Does not store any data within the lifetime of the WebView.
 
-| Type    | Required | Platform |
-| ------- | -------- | -------- |
+| Type    | Required | Platform            |
+| ------- | -------- | ------------------- |
 | boolean | No       | iOS, Android, macOS |
 
 ---
 
 Sets whether WebView should use browser caching.
 
-| Type    | Required | Default | Platform |
-| ------- | -------- | ------- | -------- |
+| Type    | Required | Default | Platform            |
+| ------- | -------- | ------- | ------------------- |
 | boolean | No       | true    | iOS, Android, macOS |
 
 ---
 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
 
 ```javascript
 postMessage('message');
 ```
+
 Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
 
 ### `clearFormData()`[⬆](#methods-index)<!-- Link generated with jump2header -->

src/WebViewTypes.ts

   allowsInlineMediaPlayback?: boolean;
   allowsLinkPreview?: boolean;
   automaticallyAdjustContentInsets?: boolean;
+  autoManageStatusBarEnabled?: boolean;
   bounces?: boolean;
   contentInset?: ContentInsetProp;
   contentInsetAdjustmentBehavior?: ContentInsetAdjustmentBehavior;
    */
   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`.