Screen

API Reference: Device.Screen

Screen is used to retrieve device display properties.

TypeScript

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

//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 } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();

    console.log("Device.Screen.dpi: " + Screen.dpi);
    console.log("Device.Screen.width: " + Screen.width);
    console.log("Device.Screen.height: " + Screen.height);
    console.log("Device.Screen.touchSupported: " + Screen.touchSupported);
    console.log("Device.Screen.orientation: " + Screen.orientation);  
  }
}

It is also possible to capture a screenshot with the Device.Screen.capture function.

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import ImageView from "@smartface/native/ui/imageview";
import Button from "@smartface/native/ui/button";
import Screen from "@smartface/native/device/screen";

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

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'COLUMN',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    this.myImageView = new ImageView();

    this.addChild(this.myImageView, "myImageView", ".sf-imageView", {
        width: 500,
        height: 500,
    });

    this.myButton = new Button({
        onPress: () => {
        this.myImageView.image = Screen.capture();
        },
    });

    this.addChild(this.myButton, "myButton", ".sf-button", {
        width: 100,
        height: 100,
        backgroundColor: "#FFFF00",
    });
  }
}