API Reference: UI.Switch

Switch is a two-state toggle button. Switch allows the user to select between two options. (e.g. on/off)


The default of thumbOnColor is green on Android and null on iOS. If this is set on iOS, the switch grip will lose its drop shadow. For iOS, If you want to use default of this property, you should set null.


The default of toggleOnColor is gray on Android and green on iOS.

const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const Label = require('sf-core/ui/label');
const FlexLayout = require('sf-core/ui/flexlayout');
const Switch = require('sf-core/ui/switch');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
this.statusBar.visible = false;
this.headerBar.visible = false;
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var mySwitch = new Switch({
thumbOnColor : Color.BLUE,
toggleOnColor: Color.RED
module.exports = Page1;

thumbOffColor and toggleOffColor

On Android, those two properties can be used without a problem. However, due to restrictions by Apple, those properties are not allowed to be set on iOS directly. To overcome this, you can use a workaround to set it manually, like example given below:

let switch1 = new Switch();
switch1.left = 100;
switch1.toggleOnColor = Color.RED;
switch1.nativeObject.backgroundColor = Color.GREEN.nativeObject,"backgroundColor";
switch1.nativeObject.layer.cornerRadius = switch1.nativeObject.frame.height/2;

Using this workaround is not advised by Smartface, since Switch implementation may be changed on newer iOS versions, use at your own risk.

Setting switch themes on style

Since setting thumbOnColor on iOS will make switch lose its drop shadow and toggleOffColor and thumbOffColor doesn't exist on iOS, you can use following theme sample to overcome common quirks.

".switch": {
"toggleOnColor": "rgba( 0, 161, 241, 1 )",
"android": {
"toggleOffColor": "rgba( 0, 161, 241, 1 )",
"thumbOffColor": "rgba(255, 255, 255, 1)"
"+Device:Device.os === \"Android\"": {
"thumbOnColor": "rgba( 255, 255, 255, 1 )"