diff --git a/packages/core/ui/action-bar/index.ios.ts b/packages/core/ui/action-bar/index.ios.ts
index 6dc494478..c430b76c4 100644
--- a/packages/core/ui/action-bar/index.ios.ts
+++ b/packages/core/ui/action-bar/index.ios.ts
@@ -349,7 +349,7 @@ export class ActionBar extends ActionBarBase {
 		this.setColor(navBar, color);
 
 		const bgColor = <Color>this.backgroundColor;
-		navBar.barTintColor = bgColor ? bgColor.ios : null;
+		this.setBackgroundColor(navBar, bgColor);
 	}
 
 	private setColor(navBar: UINavigationBar, color?: Color) {
@@ -371,6 +371,25 @@ export class ActionBar extends ActionBarBase {
 		}
 	}
 
+	private setBackgroundColor(navBar: UINavigationBar, color?: UIColor | Color) {
+		if (!navBar) {
+			return;
+		}
+
+		const color_ = color instanceof Color ? color.ios : color;
+		if (majorVersion >= 13) {
+			const appearance = navBar.standardAppearance ?? UINavigationBarAppearance.new();
+			// appearance.configureWithOpaqueBackground();
+			appearance.backgroundColor = color_;
+			navBar.standardAppearance = appearance;
+			navBar.compactAppearance = appearance;
+			navBar.scrollEdgeAppearance = appearance;
+		} else {
+			// legacy styling
+			navBar.barTintColor = color_;
+		}
+	}
+
 	public _onTitlePropertyChanged() {
 		const page = this.page;
 		if (!page) {
@@ -467,12 +486,9 @@ export class ActionBar extends ActionBarBase {
 		// CssAnimationProperty use default value form their constructor.
 		return null;
 	}
-	[backgroundColorProperty.setNative](value: UIColor | Color) {
+	[backgroundColorProperty.setNative](color: UIColor | Color) {
 		const navBar = this.navBar;
-		if (navBar) {
-			const color = value instanceof Color ? value.ios : value;
-			navBar.barTintColor = color;
-		}
+		this.setBackgroundColor(navBar, color);
 	}
 
 	[backgroundInternalProperty.getDefault](): UIColor {