Dynamic Status Bar Styling

Status bar visibility and style can be set dynamically from your website using the GoNative Javascript Bridge.

You can include following parameters to customize the status bar appearance:

  • 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: 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, run the following command:

️GoNative JavaScript Bridge

if (navigator.userAgent.indexOf('gonative') > -1) {
   gonative.statusbar.set{
     'style':'light',
     'color':'80ff0000',
     'overlay':true});
}

Checking that navigator.userAgent.indexOf('gonative') > -1 ensures this code will only run while your app is showing within your app.