Skip to main content
Version: Next

Accessing Native APIs with 100% Native API Access

Smartface Native Framework provides full, 100% native API access for iOS and Android directly through JavaScript.
All the APIs are always available without the need for waiting for framework updates.

Accessing Native Classes​

Native classes are functions when you require them from JavaScript. You can create instances and use static functions as you do for JavaScript functions.
You can get the native class names from Android & IOS documentation web sites.

iOS
// Require Device class from IOS, resulting Device
// is a Javascript function with all native functionalities
const Device = SF.requireClass("UIDevice");
var deviceInstance = Device.new();
console.log(deviceInstance.systemVersion);
Android
// Require Build class from Android, resulting Build
// is a Javascript function with all native functionalities
const Build = requireClass("android.os.Build");
console.log(Build.VERSION.RELEASE);
Context requirement

While accessing native classes on Android sometimes you will need Context. You can use Android.getActivity() method to access current application context.

Using Native UI Classes on Smartface Framework​

If you want to access a Native UI component(ex. Switch) and adding it to the current UI, first you should extend a Smartface Object. Please follow the link for an example.

Set Event Handlers​

You can set JavaScript functions as event handlers to native objects. For Android this is done by implementing an interface mostly, but for iOS adding JavaScript function as JSTarget to native object is enough.

Android
const OnCheckedChangeListener = requireClass(
  "android.widget.CompoundButton"
).OnCheckedChangeListener;
const Switch = requireClass("android.widget.Switch");

let onCheckedChangeListener = OnCheckedChangeListener.implement({
  onCheckedChanged: function (view, isChecked) {
    console.log("Switch toggled, status: " + isChecked);
  },
});
let switchView = new Switch(Android.getActivity());
switchView.setChecked(true);
switchView.setOnCheckedChangeListener(onCheckedChangeListener);
iOS
const Switch = SF.requireClass("UISwitch");
let switchInstance = Switch.new();

let SwitchController = SF.defineClass("SwitchController : NSObject", {
  switchAction: function () {
    alert("Switch's state changed to: " + switchInstance.isOn);
  },
});
let controllerInstance = SwitchController.new();
switchInstance.addTargetActionForControlEvents(
  controllerInstance,
  "switchAction",
  1 << 12
);
//1 << 12 refers to UIControlEventValueChanged. For more event: https://developer.apple.com/reference/uikit/uicontrolevents