Extensions

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 creating 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
Android
Page
iOS
scripts/lib/SwitchIOS.ts
import System from 'sf-core/device/system';
import View from 'sf-core/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 'sf-core/device/system';
import View from 'sf-core/ui/view';
export default class SwitchAndroid extends View {
constructor(params?: any) {
super();
if (System.OS === '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 SwitchAndroid from 'lib/SwitchAndroid';
import SwitchIOS from 'lib/SwitchIOS';
import System from 'sf-core/device/system';
export default class PgNativeSwitch extends PgNativeSwitchDesign {
constructor() {
super();
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
initAndroidSwitch() {
const nativeSwitch = System.OS === 'iOS' ? new SwitchIOS() : new SwitchAndroid();
//@ts-ignore
this.addChild(nativeSwitch, "nativeSwitch");
}
}
function onShow(superOnShow: () => void) {
superOnShow();
}
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.initAndroidSwitch()
}

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