StatusBar

API Reference: UI.StatusBar

This class represents the status bar object. Creating an instance of StatusBar is not valid since you can't use in anywhere. If you want to access the status bar object, you can access it via the UI.Page.statusBar property of a page.

caution

If the StatusBar visible, page starts under the StatusBar for Android but StatusBar will overlaps the page for iOS if the HeaderBar is invisible at this moment.

scripts/pages/pageSample.ts

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  onShow() {
    super.onShow();
    const { headerBar } =
      System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = true;
    //@ts-ignore
    Application.statusBar.dispatch({
      type: "updateUserStyle",
      userStyle: {
        android: {
          color: "#6FCAF7",
        },
        style: "LIGHTCONTENT",
      },
    });
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
  }
}