Skip to content

[Bug]: SystemBars orientation change overrides independent bar styles #8396

@AssetKid

Description

@AssetKid

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 8.2.0
@capacitor/core: 8.2.0
@capacitor/android: 8.2.0
@capacitor/ios: 8.2.0

Installed Dependencies:

@capacitor/ios: not installed
@capacitor/cli: 8.2.0
@capacitor/core: 8.2.0
@capacitor/android: 8.2.0

Other API Details

npm v11.12.0
node v24.14.0

Platforms Affected

  • iOS
  • Android
  • Web

Current Behavior

There is a synchronization issue in the Capacitor SystemBars native implementation on Android. When a style is set, Capacitor stores the value in a single native variable (currentStyle).

Upon a configuration change (such as a device orientation change), Capacitor's native listener reapplies this single stored style to both the Status Bar and the Navigation Bar, wiping out any independent styling previously applied.

Steps to Reproduce

  • Set the StatusBar to SystemBarsStyle.Dark.
  • Set the NavigationBar to SystemBarsStyle.Light.
  • Rotate the device from Portrait to Landscape (or vice versa).
  • Both bars now share the same style (whichever was called last in the code).

The system defaults to a "last-in-wins" approach, forcing both bars to match the most recently requested style whenever the UI refreshes due to rotation.

Expected Behavior

Capacitor should maintain separate state variables for currentStatusBarStyle and currentNavigationBarStyle natively, ensuring that an orientation change reapplies the correct, independent style to each bar.

Project Reproduction

https://stackblitz.com/edit/system-bars-bug

Additional Information

The root cause lies in how Capacitor handles the Android configuration change natively:

SystemBars.setStyle() saves the requested style into a Java variable named currentStyle. Because there is only one currentStyle variable, the last call to setStyle() (regardless of which bar it was intended for) becomes the "source of truth."

When the orientation changes, Capacitor natively triggers:

setStyle(currentStyle, "");

Passing an empty string "" as the second parameter instructs Capacitor to apply currentStyle to both bars globally, disregarding the intended theme for individual components.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions