feat(ios): ease of use on explicit preferredStatusBarStyle

Allows statusBarStyle to be defined on any view for explicit per view control, whether presented in modal or not.
Note: You must remove Info.plist key `UIViewControllerBasedStatusBarAppearance`
It defaults to true when not present: https://developer.apple.com/documentation/bundleresources/information-property-list/uiviewcontrollerbasedstatusbarappearance
Or you can explicitly set it to true:
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

False value will make this property have no effect.

packages/core/ui/core/view-base/index.ts

@@ -79,6 +79,10 @@ export interface ShowModalOptions {
 		 * height of the popup dialog
 		 */
 		height?: number;
+		/**
+		 * The preferred status bar style for the modal view
+		 */
+		statusBarStyle?: 'light' | 'dark';
 	};
 	android?: {
 		/**

packages/core/ui/core/view/index.d.ts

@@ -638,6 +638,20 @@ export abstract class View extends ViewCommon {
 	 */
 	cssType: string;
 
+	/**
+	 * (iOS only) Gets or sets the status bar style for this view.
+	 * Note: You must remove Info.plist key `UIViewControllerBasedStatusBarAppearance`
+	 * It defaults to true when not present: https://developer.apple.com/documentation/bundleresources/information-property-list/uiviewcontrollerbasedstatusbarappearance
+	 * Or you can explicitly set it to true:
+	 * <key>UIViewControllerBasedStatusBarAppearance</key>
+	 * <true/>
+	 *
+	 * False value will make this property have no effect.
+	 *
+	 * @nsProperty
+	 */
+	statusBarStyle: 'light' | 'dark';
+
 	cssClasses: Set<string>;
 	cssPseudoClasses: Set<string>;
 

packages/core/ui/core/view/index.ios.ts

@@ -560,7 +560,8 @@ export class View extends ViewCommon {
 			}
 		}
 
-		if (options.ios && options.ios.presentationStyle) {
+		if (options.ios) {
+			if (options.ios.presentationStyle) {
 				const presentationStyle = options.ios.presentationStyle;
 				controller.modalPresentationStyle = presentationStyle;
 
@@ -568,6 +569,14 @@ export class View extends ViewCommon {
 					this._setupPopoverControllerDelegate(controller, parent);
 				}
 			}
+			if (options.ios.statusBarStyle) {
+				/**
+				 * https://developer.apple.com/documentation/uikit/uiviewcontroller/modalpresentationcapturesstatusbarappearance
+				 */
+				controller.modalPresentationCapturesStatusBarAppearance = true;
+				this.statusBarStyle = options.ios.statusBarStyle;
+			}
+		}
 
 		const cancelable = options.cancelable !== undefined ? !!options.cancelable : true;
 

packages/core/ui/core/view/view-common.ts

@@ -997,6 +997,13 @@ export abstract class ViewCommon extends ViewBase {
 		this._cssType = type.toLowerCase();
 	}
 
+	get statusBarStyle(): 'light' | 'dark' {
+		return this.style.statusBarStyle;
+	}
+	set statusBarStyle(value: 'light' | 'dark') {
+		this.style.statusBarStyle = value;
+	}
+
 	get isLayoutRequired(): boolean {
 		return true;
 	}

packages/core/ui/core/view/view-helper/index.ios.ts

@@ -127,6 +127,20 @@ class UILayoutViewController extends UIViewController {
 			}
 		}
 	}
+
+	// @ts-ignore
+	public get preferredStatusBarStyle(): UIStatusBarStyle {
+		const owner = this.owner?.deref();
+		if (owner) {
+			if (SDK_VERSION >= 13) {
+				return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.DarkContent : UIStatusBarStyle.LightContent;
+			} else {
+				return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.LightContent : UIStatusBarStyle.Default;
+			}
+		} else {
+			return UIStatusBarStyle.Default;
+		}
+	}
 }
 
 @NativeClass

packages/core/ui/page/index.d.ts

@@ -65,14 +65,6 @@ export declare class Page extends PageBase {
 	 */
 	public backgroundSpanUnderStatusBar: boolean;
 
-	/**
-	 * Gets or sets the style of the status bar.
-	 *
-	 * @nsProperty
-	 */
-	// @ts-ignore
-	public statusBarStyle: 'light' | 'dark';
-
 	/**
 	 * Gets or sets the color of the status bar in Android.
 	 *

packages/core/ui/page/index.ios.ts

@@ -349,7 +349,11 @@ class UIViewControllerImpl extends UIViewController {
 	public get preferredStatusBarStyle(): UIStatusBarStyle {
 		const owner = this._owner?.deref();
 		if (owner) {
+			if (SDK_VERSION >= 13) {
+				return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.DarkContent : UIStatusBarStyle.LightContent;
+			} else {
 				return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.LightContent : UIStatusBarStyle.Default;
+			}
 		} else {
 			return UIStatusBarStyle.Default;
 		}

packages/core/ui/page/page-common.ts

@@ -63,13 +63,6 @@ export class PageBase extends ContentView {
 		}
 	}
 
-	get statusBarStyle(): 'light' | 'dark' {
-		return this.style.statusBarStyle;
-	}
-	set statusBarStyle(value: 'light' | 'dark') {
-		this.style.statusBarStyle = value;
-	}
-
 	public get androidStatusBarBackground(): Color {
 		return this.style.androidStatusBarBackground;
 	}