From 5f022855e84de3edcd7fcfd34697a1096da796dd Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Wed, 24 Sep 2025 11:15:14 -0700 Subject: [PATCH] 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: UIViewControllerBasedStatusBarAppearance False value will make this property have no effect. --- packages/core/ui/core/view-base/index.ts | 4 ++++ packages/core/ui/core/view/index.d.ts | 14 ++++++++++++++ packages/core/ui/core/view/index.ios.ts | 19 ++++++++++++++----- packages/core/ui/core/view/view-common.ts | 7 +++++++ .../ui/core/view/view-helper/index.ios.ts | 14 ++++++++++++++ packages/core/ui/page/index.d.ts | 8 -------- packages/core/ui/page/index.ios.ts | 6 +++++- packages/core/ui/page/page-common.ts | 7 ------- 8 files changed, 58 insertions(+), 21 deletions(-) diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index 53da10005..e4b2cd051 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/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?: { /** diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts index 40e8de62b..8287df0b8 100644 --- a/packages/core/ui/core/view/index.d.ts +++ b/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: + * UIViewControllerBasedStatusBarAppearance + * + * + * False value will make this property have no effect. + * + * @nsProperty + */ + statusBarStyle: 'light' | 'dark'; + cssClasses: Set; cssPseudoClasses: Set; diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index 13a29a622..2b6a1eb1e 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -560,12 +560,21 @@ export class View extends ViewCommon { } } - if (options.ios && options.ios.presentationStyle) { - const presentationStyle = options.ios.presentationStyle; - controller.modalPresentationStyle = presentationStyle; + if (options.ios) { + if (options.ios.presentationStyle) { + const presentationStyle = options.ios.presentationStyle; + controller.modalPresentationStyle = presentationStyle; - if (presentationStyle === UIModalPresentationStyle.Popover) { - this._setupPopoverControllerDelegate(controller, parent); + if (presentationStyle === UIModalPresentationStyle.Popover) { + this._setupPopoverControllerDelegate(controller, parent); + } + } + if (options.ios.statusBarStyle) { + /** + * https://developer.apple.com/documentation/uikit/uiviewcontroller/modalpresentationcapturesstatusbarappearance + */ + controller.modalPresentationCapturesStatusBarAppearance = true; + this.statusBarStyle = options.ios.statusBarStyle; } } diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts index af0d4133e..7f380f7fa 100644 --- a/packages/core/ui/core/view/view-common.ts +++ b/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; } diff --git a/packages/core/ui/core/view/view-helper/index.ios.ts b/packages/core/ui/core/view/view-helper/index.ios.ts index ffb5edb5e..a2e8a4e70 100644 --- a/packages/core/ui/core/view/view-helper/index.ios.ts +++ b/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 diff --git a/packages/core/ui/page/index.d.ts b/packages/core/ui/page/index.d.ts index 95f09274c..700671254 100644 --- a/packages/core/ui/page/index.d.ts +++ b/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. * diff --git a/packages/core/ui/page/index.ios.ts b/packages/core/ui/page/index.ios.ts index 60891e171..8dbc69b61 100644 --- a/packages/core/ui/page/index.ios.ts +++ b/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) { - return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.LightContent : UIStatusBarStyle.Default; + 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; } diff --git a/packages/core/ui/page/page-common.ts b/packages/core/ui/page/page-common.ts index a1e3657b3..e8f78087b 100644 --- a/packages/core/ui/page/page-common.ts +++ b/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; }