-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
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.0Platforms 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.