Skip to main content
Version: 7.0.0

Release Notes, 7.0.0

๐Ÿšง Minimum required:

@smartface/native v5.0.0 ๐Ÿš€
Android -> v7.0.0 ๐Ÿš€
iOS -> v7.0.0 ๐Ÿš€

Updated Modulesโ€‹

In order to fully migrate to the new version, you should update these packages:

  • You have to restart builder after updating the dependencies.
    • To restart the builder, select Run Builder from the Run menu.

In root of the project run the following command:

yarn install

In /scripts folder run the following command:

yarn install

For further information about versions, check the boilerplate project of Smartface for updated versions and match yours with the new ones:

GitHub - smartface/helloworld-boilerplate
Contribute to smartface/helloworld-boilerplate development by creating an account on GitHub.
GitHub - smartface/helloworld-boilerplate favicon
GitHub - smartface/helloworld-boilerplate

Native and Framework Changesโ€‹

๐Ÿ†• What's Newโ€‹

  • Feature: Added XMLHttpRequest to the Native module. You can use third-party libraries to send requests to the server like a Axios or fetch.

Project Structure Changesโ€‹

tsconfig.json Changesโ€‹

In tsconfig.json:

Remove the following lines:

"typeRoots": ["./scripts/node_modules/@smartface/native/device/system"],
"exclude": ["node_modules", "./dist", "**/node_modules/*"],
"include": ["./scripts", "./scripts/**/*.json"]

Add the following lines:

"exclude": ["./dist"],
"include": ["./scripts", "./scripts/**/*.json", "./scripts/node_modules/@smartface/native/**/index.d.ts"]

typings.d.ts Changesโ€‹

In typings.d.ts:

Add the following lines:

namespace console {
function info(...params: any[]): void;
function log(...params: any[]): void;
function error(...params: any[]): void;
function warn(...params: any[]): void;

Emulator Changesโ€‹

๐Ÿ†• What's Newโ€‹

  • New UI & Functionalities in iOS & Android Emulators
  • iOS & Android
  • Added Clean Start option in the Emulator that will clear the emulator before running the app.
  • Added Info page in the Emulator that you can find Documentation and API Reference links and Success Stories galeries that show you the applications which are made with Smartface.
  • Android
    • Added Debug Mode option in the Emulator that will show you the logs and errors in the emulator.
  • You can find the new Emulator in the Emulator.Please contact with the support to retrieve the credentials.

Code Changesโ€‹

Import path changes on shared modulesโ€‹

Previously, some modules shared by different UI modules were kept scattered under the ui folder and could be mixed with other standalone modules.
In order to overcome this and keep modules a bit more tidy, these shared modules are gathered under the shared folder. Accordingly, the import paths of these shared modules need to be updated on your project.

The old usage:

import KeyboardType from "@smartface/native/ui/keyboardtype";

Replaced by:

import KeyboardType from "@smartface/native/ui/shared/keyboardtype";

The other shared modules are listed below.

import EllipsizeMode from "@smartface/native/ui/shared/ellipsizemode";
import ImageCacheType from "@smartface/native/ui/shared/imagecachetype";
import KeyboardAppearance from "@smartface/native/ui/shared/keyboardappearance";
import TextAlignment from "@smartface/native/ui/shared/textalignment";
import TextContentType from "@smartface/native/ui/shared/textcontenttype";
import TextDirection from "@smartface/native/ui/shared/textdirection";

Some of extension modules are moved to the Native module, so the import path of these modules need to be updated on your project.

The old usage:

import ZoomableImageView from "@smartface/extension-zoomable-imageview";
import SpriteView from "sf-extension-spriteview";
import SMSReceiver from '@smartface/extension-sms-receiver';

Replaced by:

import ZoomableImageView from '@smartface/native/ui/zoomableimageview';
import SpriteView from '@smartface/native/ui/spriteview';
import SMSReceiver from '@smartface/native/device/smsreceiver';

Module Type Interfaceโ€‹

Previously, we were using modules' respective classes to define the type of instances that we are going to use. After this migration, that usage needs to be replaced with interface definitions of modules.

const image: Image = new Image(); // Wrong - old
const image: IImage = new Image(); // Correct - new

Reserved Keywordsโ€‹

createNativeObject and preConstruct names are reserved for native usage. Using them in your project will cause crashes.

Returning value of touch callbacksโ€‹

touch callbacks(onTouch, onTouchEnded etc.) should return a boolean now. Returning nothing isn't accepted anymore. To decide which boolean value to return you may refer to this documentation for additional information.

component.onTouch = () => {
// do something
return true;

Usage of Notifierโ€‹

Within this migration, createNotifier method is removed and now there are two different way to reach or create notifier instance.

import Network from "@smartface/native/device/network";
let notifier = new Network.createNotifier();
notifier.subscribe((connectionType) => {
console.log("ConnectionType is " + connectionType);

Importing smartface/native on startupโ€‹

We are making some changes over time to reduce/remove the need to use extension/utils in projects. Within this migration, the import for @smartface/extension-utils needs to be replaced with @smartface/native on your app.ts or start.ts files.

Here's a sample start.ts file.

import "@smartface/native";
import "theme";
import router from "routes";



Changes on event definitionโ€‹

From now on, while defining an event with eventemitter, there is a bit different usage will be used.
While writing the on method open up a pair of quotes and the available events will be listed for you by the auto-complete.

import TextBox from "@smartface/native/ui/textbox";
this.textbox1.on(TextBox.Events.TextChanged, () => {});

UnhandledError method on the app.ts fileโ€‹

The following method can be used inside your app.ts file for catching errors.

Application.onUnhandledError = (e: UnhandledError) => {
const error = errorStackBySourceMap(e);
const errorData = {
message: System.OS === System.OSType.ANDROID ? error.stack : e.message,
stack: System.OS === System.OSType.IOS ? error.stack : undefined
if (errorData.stack || System.OS === System.OSType.ANDROID) {
console.error("Unhandled Error: ", errorData.message, {
alert(JSON.stringify(errorData, null, 2), e.type || lang.applicationError);

Import for touchSupportedโ€‹

touchSupported property is now removed from named export list of the screen module and can only be accessed as Screen.touchSupported

import { touchSupported } from "@smartface/native/device/screen"; // Old Usage - REMOVED
import Screen from "@smartface/native/device/screen";

// The only way to access property
if (Screen.touchSupported) {

Removal of named export of modules from their parent folderโ€‹

From now on, the named export for modules from their parent folders are removed. Now the only way to access modules is to explicitly write their respective path on the import clause.

import Blob from "@smartface/native/blob"; // Old Usage - Wrong
import Blob from "@smartface/native/global/blob"; // Correct

import Data from "@smartface/native/data"; // Old Usage - Wrong
import Data from "@smartface/native/global/data"; // Correct

IDE Changesโ€‹

IDE Releases are held in its respective place. You can reach it under:

Releases ยท smartface/smartface-ide-releases
Smartface ide releases. Contribute to smartface/smartface-ide-releases development by creating an account on GitHub.
Releases ยท smartface/smartface-ide-releases favicon
Releases ยท smartface/smartface-ide-releases

๐Ÿ†• What's Newโ€‹

  • Feature: Added Insert built-in components button to the UI editor and explorer. You can now insert built-in components into your page or library.

  • Feature: Added Wrap with button to the UI editor and explorer . You can now wrap UI components with other components like FlexLayout,ScrollView and ShimmerFlexLayout.

  • Feature: Added Split button to the UI editor. You can create row and column layouts with the help of this button.

    • Note: To see this button, you need to place a FlexLayout component in your page or library and right click on it.
  • Feature: Added Go to code button to the UI editor and explorer. You can go to the code of the component you are currently editing.

  • Feature: Library and Page explorer seperated into two tabs.

  • Feature: Add coding & design mode, automatically switch panels.

  • Feature: Merged properties & theme panel as editing tools panel.

  • Feature: Added IPhone 13 and 12 series to the theme editor.


  • Added Smartface Playground to the Sample Apps section. In this app you can learn about the Smartface platform and its native components, utilities, modules and more.