Skip to main content
Version: Next

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

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);
}
}

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