From e90e6d969ce689bed30692415037cce86c20bd8a Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Fri, 31 Oct 2025 23:02:19 -0700
Subject: [PATCH] feat(core): statusBarStyle ease of use and more control
 (#10859)

---
 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-base/index.ts      |  4 +
 packages/core/ui/core/view/index.android.ts   | 89 ++++++++++++++++++-
 packages/core/ui/core/view/index.d.ts         | 16 ++++
 packages/core/ui/core/view/index.ios.ts       | 43 +++++++--
 packages/core/ui/core/view/view-common.ts     | 37 +++++++-
 .../ui/core/view/view-helper/index.ios.ts     | 14 +++
 packages/core/ui/frame/index.ios.ts           |  5 ++
 packages/core/ui/page/index.android.ts        | 57 +-----------
 packages/core/ui/page/index.d.ts              |  8 --
 packages/core/ui/page/index.ios.ts            | 23 ++---
 packages/core/ui/page/page-common.ts          | 16 ----
 17 files changed, 276 insertions(+), 105 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 22e4be777..6752731e1 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -1,4 +1,4 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" statusBarStyle="dark">
   <Page.actionBar>
     <ActionBar title="Dev Toolbox" icon="" class="action-bar" iosLargeTitle="true" iosShadow="false">
     </ActionBar>
@@ -20,6 +20,7 @@
         <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="status-bar" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="transitions" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
diff --git a/apps/toolbox/src/pages/status-bar.ts b/apps/toolbox/src/pages/status-bar.ts
new file mode 100644
index 000000000..c2253d572
--- /dev/null
+++ b/apps/toolbox/src/pages/status-bar.ts
@@ -0,0 +1,22 @@
+import { Page, Observable, EventData, Dialogs, ShowModalOptions } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new StatusBarModel();
+}
+
+export class StatusBarModel extends Observable {
+	onOpenModal() {
+		page.showModal('pages/status-bar/status-bar-modal', {
+			fullscreen: true,
+			ios: {
+				statusBarStyle: 'dark',
+			},
+			closeCallback(args) {
+				// console.log('close modal callback', args);
+			},
+		} as ShowModalOptions);
+	}
+}
diff --git a/apps/toolbox/src/pages/status-bar.xml b/apps/toolbox/src/pages/status-bar.xml
new file mode 100644
index 000000000..560b10231
--- /dev/null
+++ b/apps/toolbox/src/pages/status-bar.xml
@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" backgroundColor="black" statusBarStyle="light">
+  <!-- Note we set statusBarStyle="light" to explicitly contrast it against our black background -->
+  <Page.actionBar>
+    <ActionBar title="Status Bar" color="white">
+    </ActionBar>
+  </Page.actionBar>
+  <GridLayout rows="*,auto,auto,*">
+    <Label row="1" text="Note status bar color, then Open Modal" fontSize="12" class="text-center c-white" />
+    <Button row="2" text="Open Modal" tap="{{ onOpenModal }}" class="btn btn-primary btn-view-demo" marginTop="20" />
+  </GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/status-bar/status-bar-modal.ts b/apps/toolbox/src/pages/status-bar/status-bar-modal.ts
new file mode 100644
index 000000000..66e1ec6e9
--- /dev/null
+++ b/apps/toolbox/src/pages/status-bar/status-bar-modal.ts
@@ -0,0 +1,22 @@
+import { Observable, ShownModallyData, LoadEventData, Page, ShowModalOptions } from '@nativescript/core';
+
+let page: Page;
+let closeCallback: Function;
+export function onShownModally(args: ShownModallyData) {
+	closeCallback = args.closeCallback;
+
+	if (args.context) {
+		args.context.shownModally = true;
+	}
+}
+
+export function onLoaded(args: LoadEventData) {
+	page = args.object as Page;
+	page.bindingContext = new StatusBarModalPage();
+}
+
+export class StatusBarModalPage extends Observable {
+	close() {
+		closeCallback();
+	}
+}
diff --git a/apps/toolbox/src/pages/status-bar/status-bar-modal.xml b/apps/toolbox/src/pages/status-bar/status-bar-modal.xml
new file mode 100644
index 000000000..a43f77c3f
--- /dev/null
+++ b/apps/toolbox/src/pages/status-bar/status-bar-modal.xml
@@ -0,0 +1,9 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally" statusBarStyle="dark">
+
+    <GridLayout rows="auto,auto,auto,*" verticalAlignment="top" padding="20">
+        <Button text="Close" tap="{{close}}" horizontalAlignment="right" marginRight="20" />
+
+        <Label row="1" text="Status bar color changed to 'dark'." verticalAlignment="top" marginTop="20" class="text-center" fontSize="12" color="black" />
+        <Label row="2" text="Close and watch it change back." verticalAlignment="top" marginTop="20" class="text-center" fontSize="12" color="black" marginTop="10" />
+    </GridLayout>
+</Page>
diff --git a/packages/core/references.d.ts b/packages/core/references.d.ts
index e55d0d3bd..db2b50e87 100644
--- a/packages/core/references.d.ts
+++ b/packages/core/references.d.ts
@@ -4,7 +4,7 @@
 /// <reference path="../types-ios/src/lib/ios/objc-x86_64/objc!Darwin.d.ts" />
 /// <reference path="../types-ios/src/lib/ios/objc-x86_64/objc!DarwinFoundation.d.ts" />
 /// <reference path="../types-ios/src/lib/ios/objc-x86_64/objc!Symbols.d.ts" />
-/// <reference path="../types-android/src/lib/android-29.d.ts" />
+/// <reference path="../types-android/src/lib/android-30.d.ts" />
 /// <reference path="./platforms/ios/typings/objc!MaterialComponents.d.ts" />
 /// <reference path="./platforms/ios/typings/objc!NativeScriptUtils.d.ts" />
 /// <reference path="./global-types.d.ts" />
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.android.ts b/packages/core/ui/core/view/index.android.ts
index a95f8be88..b9eb6047b 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -1,7 +1,7 @@
 import type { Point, Position } from './view-interfaces';
 import type { GestureTypes, GestureEventData } from '../../gestures';
 import { getNativeScriptGlobals } from '../../../globals/global-utils';
-import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper } from './view-common';
+import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper, statusBarStyleProperty } from './view-common';
 import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties';
 import { Length } from '../../styling/length-shared';
 import { layout } from '../../../utils';
@@ -52,6 +52,10 @@ const GRAVITY_FILL_HORIZONTAL = 7; // android.view.Gravity.FILL_HORIZONTAL
 const GRAVITY_CENTER_VERTICAL = 16; // android.view.Gravity.CENTER_VERTICAL
 const GRAVITY_FILL_VERTICAL = 112; // android.view.Gravity.FILL_VERTICAL
 
+const SYSTEM_UI_FLAG_LIGHT_STATUS_BAR = 0x00002000;
+const STATUS_BAR_LIGHT_BCKG = -657931;
+const STATUS_BAR_DARK_BCKG = 1711276032;
+
 const modalMap = new Map<number, DialogOptions>();
 
 let TouchListener: TouchListener;
@@ -920,6 +924,89 @@ export class View extends ViewCommon {
 		}
 	}
 
+	[statusBarStyleProperty.getDefault]() {
+		return this.style.statusBarStyle;
+	}
+
+	[statusBarStyleProperty.setNative](value: 'dark' | 'light' | { color: number; systemUiVisibility: number }) {
+		this.updateStatusBarStyle(value);
+	}
+
+	updateStatusBarStyle(value: 'dark' | 'light' | { color: number; systemUiVisibility: number }) {
+		if (SDK_VERSION < 21) return; // nothing we can do
+
+		const window = this.getClosestWindow();
+		// Ensure the window draws system bar backgrounds (required to color status bar)
+		window.clearFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+		window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+
+		const decorView = window.getDecorView();
+
+		// API 30+ path (preferred)
+		const controller = window.getInsetsController?.();
+		if (controller && SDK_VERSION >= 30) {
+			const APPEARANCE_LIGHT_STATUS_BARS = android.view.WindowInsetsController?.APPEARANCE_LIGHT_STATUS_BARS;
+
+			if (typeof value === 'string') {
+				this.style.statusBarStyle = value;
+				if (value === 'light') {
+					// light icons/text
+					controller.setSystemBarsAppearance(0, APPEARANCE_LIGHT_STATUS_BARS);
+				} else {
+					// dark icons/text
+					controller.setSystemBarsAppearance(APPEARANCE_LIGHT_STATUS_BARS, APPEARANCE_LIGHT_STATUS_BARS);
+				}
+			} else {
+				if (value.color != null) window.setStatusBarColor(value.color);
+				// No direct passthrough for systemUiVisibility on API 30+, use appearances instead
+			}
+			return;
+		}
+
+		// API 23–29 path (systemUiVisibility)
+		if (SDK_VERSION >= 23) {
+			if (typeof value === 'string') {
+				this.style.statusBarStyle = value;
+				let flags = decorView.getSystemUiVisibility();
+				if (value === 'light') {
+					// Add the LIGHT_STATUS_BAR bit without clobbering other flags
+					flags |= android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
+					decorView.setSystemUiVisibility(flags);
+				} else {
+					// Remove only the LIGHT_STATUS_BAR bit
+					flags &= ~android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
+					decorView.setSystemUiVisibility(flags);
+				}
+			} else {
+				if (value.color != null) window.setStatusBarColor(value.color);
+				if (value.systemUiVisibility != null) {
+					// Preserve existing flags, don’t blindly overwrite to 0
+					const merged = (decorView.getSystemUiVisibility() & ~android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR) | (value.systemUiVisibility & android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
+					decorView.setSystemUiVisibility(merged);
+				}
+			}
+			return;
+		}
+
+		// API 21–22: you can only change the background color; icon color is fixed (light)
+		if (typeof value === 'object' && value.color != null) {
+			window.setStatusBarColor(value.color);
+		}
+	}
+
+	getClosestWindow(): android.view.Window {
+		// When it comes to modals, check parent as it may not be the modal root view itself
+		const view = this.parent ?? this;
+		const dialogFragment = (view as this)._dialogFragment;
+		if (dialogFragment) {
+			const dialog = dialogFragment.getDialog();
+			if (dialog) {
+				return dialog.getWindow();
+			}
+		}
+		return this._context.getWindow();
+	}
+
 	[testIDProperty.setNative](value: string) {
 		this.setAccessibilityIdentifier(this.nativeViewProtected, value);
 	}
diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts
index b79cd796b..3eba41492 100644
--- a/packages/core/ui/core/view/index.d.ts
+++ b/packages/core/ui/core/view/index.d.ts
@@ -631,6 +631,22 @@ export abstract class View extends ViewCommon {
 	 */
 	cssType: string;
 
+	/**
+	 * Gets or sets the status bar style for this view.
+	 * Platform Notes:
+	 *   - Android: When using this property throughout navigations, ensure starting views have it set as well. Ensures it will reset on back navigation.
+	 *   - iOS: 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>;
 
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 13a29a622..057eccf45 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -1,5 +1,5 @@
 import type { Point, Position } from './view-interfaces';
-import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, iosGlassEffectProperty, GlassEffectType, GlassEffectVariant } from './view-common';
+import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, iosGlassEffectProperty, GlassEffectType, GlassEffectVariant, statusBarStyleProperty } from './view-common';
 import { isAccessibilityServiceEnabled } from '../../../application';
 import { updateA11yPropertiesCallback } from '../../../application/helpers-common';
 import { ShowModalOptions, hiddenProperty } from '../view-base';
@@ -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;
 			}
 		}
 
@@ -895,6 +904,28 @@ export class View extends ViewCommon {
 		}
 	}
 
+	[statusBarStyleProperty.getDefault]() {
+		return this.style.statusBarStyle;
+	}
+	[statusBarStyleProperty.setNative](value: 'light' | 'dark') {
+		this.style.statusBarStyle = value;
+		const parent = this.parent;
+		if (parent) {
+			const ctrl = parent.ios?.controller;
+			if (ctrl && ctrl instanceof UINavigationController) {
+				const navigationBar = ctrl.navigationBar;
+				if (!navigationBar) return;
+
+				if (typeof value === 'string') {
+					console.log('here:', value);
+					navigationBar.barStyle = value === 'dark' ? UIBarStyle.Black : UIBarStyle.Default;
+				} else {
+					navigationBar.barStyle = value;
+				}
+			}
+		}
+	}
+
 	[iosGlassEffectProperty.setNative](value: GlassEffectType) {
 		if (!this.nativeViewProtected || !supportsGlass()) {
 			return;
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index d7d8d099d..e95e267de 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/packages/core/ui/core/view/view-common.ts
@@ -6,7 +6,8 @@ import { layout } from '../../../utils';
 import { isObject } from '../../../utils/types';
 import { sanitizeModuleName } from '../../../utils/common';
 import { Color } from '../../../color';
-import { Property, InheritedProperty } from '../properties';
+import { Property, InheritedProperty, CssProperty } from '../properties';
+import { Style } from '../../styling/style';
 import { EventData } from '../../../data/observable';
 import { ViewHelper } from './view-helper';
 import { setupAccessibleView } from '../../../application/helpers';
@@ -193,6 +194,12 @@ export abstract class ViewCommon extends ViewBase {
 		super.onLoaded();
 
 		setupAccessibleView(this);
+
+		if (this.statusBarStyle) {
+			// reapply status bar style on load
+			// helps back navigation cases to restore if overridden
+			this.updateStatusBarStyle(this.statusBarStyle);
+		}
 	}
 
 	public _closeAllModalViewsInternal(): boolean {
@@ -970,6 +977,14 @@ export abstract class ViewCommon extends ViewBase {
 		this.style.androidDynamicElevationOffset = value;
 	}
 
+	/**
+	 * (Android only) Gets closest window parent considering modals.
+	 */
+	getClosestWindow(): android.view.Window {
+		// platform impl
+		return null;
+	}
+
 	//END Style property shortcuts
 
 	public originX: number;
@@ -995,6 +1010,17 @@ 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;
+	}
+
+	updateStatusBarStyle(value: 'dark' | 'light') {
+		// platform specific impl
+	}
+
 	get isLayoutRequired(): boolean {
 		return true;
 	}
@@ -1288,6 +1314,15 @@ export const isUserInteractionEnabledProperty = new Property<ViewCommon, boolean
 });
 isUserInteractionEnabledProperty.register(ViewCommon);
 
+/**
+ * Property backing statusBarStyle.
+ */
+export const statusBarStyleProperty = new CssProperty<Style, 'light' | 'dark'>({
+	name: 'statusBarStyle',
+	cssName: 'status-bar-style',
+});
+statusBarStyleProperty.register(Style);
+
 // Apple only
 export const iosOverflowSafeAreaProperty = new Property<ViewCommon, boolean>({
 	name: 'iosOverflowSafeArea',
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/frame/index.ios.ts b/packages/core/ui/frame/index.ios.ts
index 4c84452bb..0d0f1f01b 100644
--- a/packages/core/ui/frame/index.ios.ts
+++ b/packages/core/ui/frame/index.ios.ts
@@ -634,6 +634,11 @@ class UINavigationControllerImpl extends UINavigationController {
 			}
 		}
 	}
+
+	// @ts-ignore
+	public get childViewControllerForStatusBarStyle() {
+		return this.topViewController;
+	}
 }
 
 function _getTransitionId(nativeTransition: UIViewAnimationTransition, transitionType: string): string {
diff --git a/packages/core/ui/page/index.android.ts b/packages/core/ui/page/index.android.ts
index d18b8684d..5801f9d4e 100644
--- a/packages/core/ui/page/index.android.ts
+++ b/packages/core/ui/page/index.android.ts
@@ -1,5 +1,5 @@
 import { isAccessibilityServiceEnabled } from '../../application';
-import { PageBase, actionBarHiddenProperty, statusBarStyleProperty, androidStatusBarBackgroundProperty } from './page-common';
+import { PageBase, actionBarHiddenProperty, androidStatusBarBackgroundProperty } from './page-common';
 import { View } from '../core/view';
 import { Color } from '../../color';
 import { ActionBar } from '../action-bar';
@@ -10,10 +10,6 @@ import { AndroidAccessibilityEvent, getLastFocusedViewOnPage } from '../../acces
 
 export * from './page-common';
 
-const SYSTEM_UI_FLAG_LIGHT_STATUS_BAR = 0x00002000;
-const STATUS_BAR_LIGHT_BCKG = -657931;
-const STATUS_BAR_DARK_BCKG = 1711276032;
-
 export class Page extends PageBase {
 	nativeViewProtected: org.nativescript.widgets.GridLayout;
 
@@ -69,19 +65,6 @@ export class Page extends PageBase {
 		}
 	}
 
-	private getClosestWindow() {
-		// When it comes to modals, check if page has a parent as it may not be the modal root view itself
-		const view = this.parent ?? this;
-		const dialogFragment = (<any>view)._dialogFragment;
-		if (dialogFragment) {
-			const dialog = dialogFragment.getDialog();
-			if (dialog) {
-				return dialog.getWindow();
-			}
-		}
-		return this._context.getWindow();
-	}
-
 	[actionBarHiddenProperty.setNative](value: boolean) {
 		// in case the actionBar is not created and actionBarHidden is changed to true
 		// the actionBar will be created by updateActionBar
@@ -90,44 +73,10 @@ export class Page extends PageBase {
 		}
 	}
 
-	[statusBarStyleProperty.getDefault](): {
-		color: number;
-		systemUiVisibility: number;
-	} {
-		if (SDK_VERSION >= 21) {
-			const window = this.getClosestWindow();
-			const decorView = window.getDecorView();
-
-			return {
-				color: (<any>window).getStatusBarColor(),
-				systemUiVisibility: decorView.getSystemUiVisibility(),
-			};
-		}
-
-		return null;
-	}
-	[statusBarStyleProperty.setNative](value: 'dark' | 'light' | { color: number; systemUiVisibility: number }) {
-		if (SDK_VERSION >= 21) {
-			const window = this.getClosestWindow();
-			const decorView = window.getDecorView();
-
-			if (value === 'light') {
-				(<any>window).setStatusBarColor(STATUS_BAR_LIGHT_BCKG);
-				decorView.setSystemUiVisibility(SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
-			} else if (value === 'dark') {
-				(<any>window).setStatusBarColor(STATUS_BAR_DARK_BCKG);
-				decorView.setSystemUiVisibility(0);
-			} else {
-				(<any>window).setStatusBarColor(value.color);
-				decorView.setSystemUiVisibility(value.systemUiVisibility);
-			}
-		}
-	}
-
 	[androidStatusBarBackgroundProperty.getDefault](): number {
 		if (SDK_VERSION >= 21) {
 			const window = this.getClosestWindow();
-			return (<any>window).getStatusBarColor();
+			return window.getStatusBarColor();
 		}
 
 		return null;
@@ -136,7 +85,7 @@ export class Page extends PageBase {
 		if (SDK_VERSION >= 21) {
 			const window = this.getClosestWindow();
 			const color = value instanceof Color ? value.android : value;
-			(<any>window).setStatusBarColor(color);
+			window.setStatusBarColor(color);
 		}
 	}
 
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..ee2b2519c 100644
--- a/packages/core/ui/page/index.ios.ts
+++ b/packages/core/ui/page/index.ios.ts
@@ -2,7 +2,7 @@ import { isAccessibilityServiceEnabled } from '../../application';
 import type { Frame } from '../frame';
 import { BackstackEntry, NavigationType } from '../frame/frame-interfaces';
 import { View, IOSHelper } from '../core/view';
-import { PageBase, actionBarHiddenProperty, statusBarStyleProperty } from './page-common';
+import { PageBase, actionBarHiddenProperty } from './page-common';
 
 import { profile } from '../../profiling';
 import { layout } from '../../utils/layout-helper';
@@ -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 === 'light' ? UIStatusBarStyle.LightContent : UIStatusBarStyle.DarkContent;
+			} else {
+				return owner.statusBarStyle === 'dark' ? UIStatusBarStyle.LightContent : UIStatusBarStyle.Default;
+			}
 		} else {
 			return UIStatusBarStyle.Default;
 		}
@@ -557,21 +561,6 @@ export class Page extends PageBase {
 		}
 	}
 
-	[statusBarStyleProperty.getDefault](): UIBarStyle {
-		return UIBarStyle.Default;
-	}
-	[statusBarStyleProperty.setNative](value: string | UIBarStyle) {
-		const frame = this.frame;
-		if (frame) {
-			const navigationBar = (<UINavigationController>frame.ios.controller).navigationBar;
-			if (typeof value === 'string') {
-				navigationBar.barStyle = value === 'dark' ? UIBarStyle.Black : UIBarStyle.Default;
-			} else {
-				navigationBar.barStyle = value;
-			}
-		}
-	}
-
 	public accessibilityScreenChanged(refocus = false): void {
 		if (!isAccessibilityServiceEnabled()) {
 			return;
diff --git a/packages/core/ui/page/page-common.ts b/packages/core/ui/page/page-common.ts
index a1e3657b3..9ba90bf73 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;
 	}
@@ -214,15 +207,6 @@ export const enableSwipeBackNavigationProperty = new Property<PageBase, boolean>
 });
 enableSwipeBackNavigationProperty.register(PageBase);
 
-/**
- * Property backing statusBarStyle.
- */
-export const statusBarStyleProperty = new CssProperty<Style, 'light' | 'dark'>({
-	name: 'statusBarStyle',
-	cssName: 'status-bar-style',
-});
-statusBarStyleProperty.register(Style);
-
 /**
  * Property backing androidStatusBarBackground.
  */