Create UI Extension

Smartface Native Framework is extendible and you can make your own creative components by using core elements. In this section you can find some extensions developed by Smartface Team.

Also in the examples below you can see how easy it is to create an UI extension. After creating UI extension you can use it like any other sf-core ui module.

Native Switch Example for both Platforms

iOS

scripts/lib/SwitchIOS.ts

import System from "@smartface/native/device/system";
import View from "@smartface/native/ui/view";

export default class SwitchIOS extends View {
  constructor(params?: any) {
    super();
    if (System.OS === System.OSType.IOS) {
      //@ts-ignore
      const NativeSwitch = SF.requireClass("UISwitch");
      //@ts-ignore
      const SwitchController = SF.defineClass("SwitchController : NSObject", {
        switchAction: function () {
          if (typeof this.onToggle === "function") {
            this.onToggle.call(this, this);
          }
        }.bind(this),
      });
      const controllerInstance = SwitchController.new();
      //@ts-ignore
      this.nativeObject = NativeSwitch.new();
      this.nativeObject.addTargetActionForControlEvents(
        controllerInstance,
        "switchAction",
        1 << 12
      );
    }
    // Assign parameters given in constructor
    if (params) {
      for (const param in params) {
        this[param] = params[param];
      }
    }
  }
  get toggle(): boolean {
    return this.nativeObject.isOn;
  }
  set toggle(toggle: boolean) {
    this.nativeObject.setOnAnimated(toggle, true);
  }
}

Android

scripts/lib/SwitchAndroid.ts

import System from "@smartface/native/device/system";
import View from "@smartface/native/ui/view";

export default class SwitchAndroid extends View {
  constructor(params?: any) {
    super();
    if (System.OS === System.OSType.ANDROID) {
      const AndroidConfig = require("sf-core/util/Android/androidconfig");
      const NativeSwitch = requireClass("android.widget.Switch");
      //@ts-ignore
      this.nativeObject = new NativeSwitch(AndroidConfig.activity);
    }
    // Assign parameters given in constructor
    if (params) {
      for (const param in params) {
        this[param] = params[param];
      }
    }
  }
  get toggle(): boolean {
    return this.nativeObject.isChecked();
  }
  set toggle(toggle: boolean) {
    this.nativeObject.setChecked(toggle);
  }
}

Page

scripts/pages/pgNativeSwitch.ts

import PgNativeSwitchDesign from "generated/pages/pgNativeSwitch";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";
import SwitchAndroid from "lib/SwitchAndroid";
import SwitchIOS from "lib/SwitchIOS";

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

  initAndroidSwitch() {
    const nativeSwitch =
      System.OS === System.OSType.IOS ? new SwitchIOS() : new SwitchAndroid();
    //@ts-ignore
    this.addChild(nativeSwitch, "nativeSwitch");
  }

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

  }

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

Alternatively, you can merge both files into a single one, just like any component from Smartface itself!