📘
Set default styling options and a background color for the device status bar while your app is open. You may also customize and dynamically set the status bar visibility and style during runtime from your website using the GoNative Javascript Bridge.

Set Status Bar at Runtime via GoNative JavaScript Bridge

The following parameters are available 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.
blur (iOS only): true or false. If true, a "blur" effect is applied in the status bar color. If false (default behavior), no "blur" effect is applied and the status bar color remains the same as specified in the color parameter.

Set Status Bar to Pre-Defined Parameters

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

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

// Or on page load
function gonative_library_ready(){
  gonative.statusbar.set({
    'style':'light',
    'color':'80ff0000',
    'overlay':true,
    'blur': true // optional - iOS only 
  });
}

Automatically Match Status Bar Color to Web

To automatically detect the background color of your webpage and set the status bar color to correspond run the following helper function:

↔️GoNative JavaScript Bridge
function gonative_library_ready(){
  gonative_match_statusbar_to_body_background_color();
}

👍
Checking that navigator.userAgent.indexOf('gonative') > -1 ensures your JavaScript code will only run while your app is showing within your app, and not in a standard browser.
Using the function gonative_library_ready() ensures code will run once the GoNative JavaScript Bridge is active within your app.