NativeJS - Status bar styling
Dynamically customize status bar visibility and style
To customize the status bar, open the url:
gonative://statusbar/set via a link, or via javascript using window.location.href = 'gonative://statusbar/set';
with query params (all optional):
  • - style: "light" or "dark". Sets the icon colors in the status bar. Default on iOS is dark and default on Android is light. Setting Android to dark icons requires Marshmallow 6.0 or later.
  • - color: in RRBBGG or AARRBBGG format with hex values. Sets the status bar to a solid color. On Android, requires Lollipop 5.0 or later. Use 00000000 for completely transparent.
  • - overlay: "true" or "false". If true, web content will extend underneath the status bar. If false (default behavior), web content will start below the bottom of the status bar.
For example, to set a red status bar with 50% alpha, white icons, and have the web content extend underneath the status bar:
window.location.href = 'gonative://statusbar/set?style=light&color=80ff0000&overlay=true';
Last modified 1yr ago
Copy link