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
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
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
Android
const OnCheckedChangeListener =
requireClass("android.widget.CompoundButton").OnCheckedChangeListener;
const Switch = requireClass("android.widget.Switch");
var onCheckedChangeListener = OnCheckedChangeListener.implement({
onCheckedChanged: function(view, isChecked) {
console.log("Switch toggled, status: " + isChecked);
}
});
var switchView = new Switch(Android.getActivity());
switchView.setChecked(true);
switchView.setOnCheckedChangeListener(onCheckedChangeListener);
iOS
iOS
var Switch = SF.requireClass("UISwitch");
var switchInstance = Switch.new();
var SwitchController = SF.defineClass("SwitchController : NSObject", {
switchAction: function() {
alert("Switch's state changed to: " + switchInstance.isOn);
}
});
var controllerInstance = SwitchController.new();
switchInstance.addTargetActionForControlEvents(controllerInstance, "switchAction", 1 << 12);
//1 << 12 refers to UIControlEventValueChanged. For more event: https://developer.apple.com/reference/uikit/uicontrolevents

Extending Native Classes for Android

When you use native APIs another thing you may need is extending native classes. You can extend iOS & Android native classes from JavaScript.

For Android platform every class comes with extend function, which enables you extend that class, when it's required from native.

Android
Android
const TextView = requireClass("android.widget.TextView");
// Extending class is that easy. extend function extends class
// then creates and returns new instance from extended class.
//
// @param Extended class name
// @param Methods to be extended
// @param Constructor parameters to create instance
var textViewInstance = TextView.extend("ExtendedTextView", {
getText: function() {
return "Hello from ExtendedTextView";
}
},
null
);
textViewInstance.setText("Hi!");
console.log(textViewInstance.getText()); // Prints: Hello from ExtendedTextView