From e16cc8663478a9a90b0498df4bb9f87a657a7721 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Wed, 24 Sep 2025 11:15:14 -0700 Subject: [PATCH 1/4] 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 53da100050..e4b2cd051e 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 b79cd796bf..d845618c2b 100644 --- a/packages/core/ui/core/view/index.d.ts +++ b/packages/core/ui/core/view/index.d.ts @@ -631,6 +631,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 13a29a622b..2b6a1eb1e9 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 d7d8d099db..1a85d9c7ae 100644 --- a/packages/core/ui/core/view/view-common.ts +++ b/packages/core/ui/core/view/view-common.ts @@ -995,6 +995,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 ffb5edb5ed..a2e8a4e705 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 95f09274c2..7006712544 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 60891e1716..8dbc69b617 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 a1e3657b33..e8f78087b0 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; } From 00af83ad34e4c632852203c5f23c9454b757759f Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Fri, 31 Oct 2025 14:57:08 -0700 Subject: [PATCH 2/4] feat: status bar improvements including handling android --- apps/toolbox/src/main-page.xml | 3 +- apps/toolbox/src/pages/status-bar.ts | 22 +++++ apps/toolbox/src/pages/status-bar.xml | 11 +++ .../src/pages/status-bar/status-bar-modal.ts | 22 +++++ .../src/pages/status-bar/status-bar-modal.xml | 9 ++ packages/core/references.d.ts | 2 +- packages/core/ui/core/view/index.android.ts | 96 ++++++++++++++++++- packages/core/ui/core/view/index.ios.ts | 25 ++++- packages/core/ui/core/view/view-common.ts | 20 +++- packages/core/ui/frame/index.ios.ts | 5 + packages/core/ui/page/index.android.ts | 57 +---------- packages/core/ui/page/index.ios.ts | 19 +--- packages/core/ui/page/page-common.ts | 9 -- 13 files changed, 215 insertions(+), 85 deletions(-) create mode 100644 apps/toolbox/src/pages/status-bar.ts create mode 100644 apps/toolbox/src/pages/status-bar.xml create mode 100644 apps/toolbox/src/pages/status-bar/status-bar-modal.ts create mode 100644 apps/toolbox/src/pages/status-bar/status-bar-modal.xml diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml index 22e4be777c..6752731e1d 100644 --- a/apps/toolbox/src/main-page.xml +++ b/apps/toolbox/src/main-page.xml @@ -1,4 +1,4 @@ - + @@ -20,6 +20,7 @@