Skip to main content
Version: 7.1.0

Release Notes, 7.1.0

🚧 Minimum required:

@smartface/native v5.0.3 🚀
Android -> v7.1.0 🚀
iOS -> v7.1.0 🚀
Firebase Plugin -> 7.2.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
@smartface/source-map
Smartface Error Source-map. Used to trace the Typescript Errors. Latest version: 5.0.4, last published: 7 days ago. Start using @smartface/source-map in your project by running `npm i @smartface/source-map`. There are no other projects in the npm registry using @smartface/source-map.
@smartface/source-map favicon https://www.npmjs.com/package/@smartface/source-map
@smartface/source-map

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 https://github.com/smartface/helloworld-boilerplate
GitHub - smartface/helloworld-boilerplate

Native and Framework Changes

Android 12

We adopted the Smartface platform to Android 12 which introduce new features as well as behavior changes aimed at making the Android more helpful, more secure, and better performing. In many cases your app will work exactly as expected out of the box, while in other cases you might need make changes to your app to adapt to the platform changes.

Targeting to Android 12, comes with some behavior changes;

  • Microphone or camera indicator On devices that run Android 12 or higher, when an app accesses the microphone or camera, an icon appears in the status bar. This icon indicates that the app has access to the microphone or camera. For more information, see Indicators
  • App Hipernation Android 12 expands upon the permissions auto-reset behavior  that was introduced in Android 11 (API level 30). If your app targets Android 12 and the user doesn't interact with your app for a few months, the system auto-resets any granted permissions and places your app in a hibernation  state.
  • Web intent resolution Starting in Android 12 (API level 31), a generic web intent resolves to an activity in your app only if your app is approved for the specific domain contained in that web intent. If your app isn't approved for the domain, the web intent resolves to the user's default browser app instead. For more information, see Web intent resolution and Universal Links
  • Motion sensors are rate-limited To protect potentially sensitive information about users, if your app targets Android 12 or higher, the system places a limit on the refresh rate of data from certain motion sensors and position sensors.The accelerometer module is affected by these changes. For more information, see Motion sensors.
  • Concurrent Peer-to-Peer + Internet Connection For apps targeting Android 12 (API level 31) or higher, devices that support concurrent peer-to-peer and internet connections can maintain simultaneous Wi-Fi connections.Due to these changes, some features and methods in the smartface network module will be deprecated in the next version. For more information, see Connectivity.
  • Stretch overscroll effect On devices running Android 12 and higher, the visual behavior for overscroll events changes. For more information, see Overscroll.
  • Restricted App Standby Bucket Android 11 (API level 30) introduced the restricted bucket as an App Standby Bucket. Starting in Android 12, this bucket is active by default. The restricted bucket has the lowest priority (and the highest restrictions) of all the buckets. For more information, see App Standby Buckets.
  • Microphone and camera toggles Supported devices that run Android 12 or higher allow users to enable and disable camera and microphone access for all apps on the device, by pressing a single toggle option. For more information, see Microphone and camera toggles.
  • Clipboard access notifications On Android 12 and higher, when an app calls Application.clipboard to access clip data from a different app for the first time, a toast message notifies the user of this clipboard access. For more information, see Clipboard access notifications.
  • Modern SameSite cookies in WebView SameSite behaviors needs to be tested if using WebView.

Things to keep in mind when migrating to Android 12

  • We do not support multi-window on Android for now. We should add android:resizeableActivity="false" to main activity to avoid unexpected behavior.
    • <activity android:name=".A" 
      android:label="${ApplicationName}"
      android:configChanges="keyboardHidden|orientation|screenSize"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustPan"
      android:screenOrientation="${Orientation}"
      android:theme="@style/defaultTheme"
      android:exported="true"
      android:resizeableActivity="false">
  • If your app targets Android 12 or higher and contains activities, services, or broadcast receivers that use intent filters, you must explicitly declare the android:exported attribute for these app components.

    •   <activity android:name=".A" 
      android:label="${ApplicationName}"
      android:configChanges="keyboardHidden|orientation|screenSize"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustPan"
      android:screenOrientation="${Orientation}"
      android:theme="@style/defaultTheme"
      android:exported="true">
    • Also we need to add android:exported attribute to BillingReceiver. But BillingReceiver and BillingService not using anymore. So we can remove both of them.

    • <service android:name="com.geniem.sprat.billing.BillingService" />
      <receiver android:name="com.geniem.sprat.billing.BillingReceiver">
      <intent-filter>
      <action android:name="com.android.vending.billing.IN_APP_NOTIFY" />
      <action android:name="com.android.vending.billing.RESPONSE_CODE" />
      <action android:name="com.android.vending.billing.PURCHASE_STATE_CHANGED" />
      </intent-filter>
      </receiver>
  • New Splash Screen API

caution

On Android 12, splash icon may not be displayed some situations, such as restarting the app, opening apps from home screen widget or notification.

  • Bluetooth Connect Permission:

    • If app uses the network.bluetoothMacAddress API, migration is required.
    • Add BLUETOOTH_CONNECT permission to config/Android/AndroidManifest.xml
      • <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />```
    • network.bluetoothMacAddress API requires the Permissions.ANDROID.BLUETOOTH_CONNECT permission on Android 12 and higher, and the Permissions.ANDROID.BLUETOOTH permission for Android 11 and below.This logic are handled in checkPermission. So we can only use BLUETOOTH_CONNECT for bluetoothMacAddress.
      •   if (Permission.android.checkPermission(Permissions.ANDROID.BLUETOOTH_CONNECT)) {
        console.log(Network.bluetoothMacAddress);
        } else if (await Permission.android.requestPermissions(Permissions.ANDROID.BLUETOOTH_CONNECT)) {
        console.log(Network.bluetoothMacAddress);
        } else {
        console.log("BLUETOOTH_CONNECT permission denied");
        }
        ```
  • Approximate location

    • On devices that run Android 12 or higher, users can request that your app have access to only approximate location information.
    • If your app requests the ACCESS_FINE_LOCATION runtime permission, you should also request the ACCESS_COARSE_LOCATION permission to handle the case where the user grants approximate location access to your app. You should include both permissions in a single runtime request.
  • Firebase Plugin

  • We have updated the Firebase plugin to support Android 12.

  • Firebase Plugin -> Minimum Version: 7.2.0

Whats new with Android 12

  • Added Android 12 support to call detection module

🆕 What's New

  • Android Emulator Smartface Android Emulator is now available for download from the Google Play.

  • Feature: ApplyLayout is not required anymore. It is now self-call by the framework.

  • Removed: Removed the incomingNumber from onCallStateChanged event. incomingNumber was android only property.

  • Updated Framework Android Java 11 & Gradle 7.0.0 Updated

    • JDK 11 required to run AGP 7.0. Prev version: 6.1
    • Upgrade AGP dependency version too. Prev version: 4.0.1
    • Upgrade JDK to 11
    • Upgrade Kotlin jdk version to 11
  • Tweaked: Hardware

    • Add manufacturer variable to both OS
    • Fix deviceType on Android
    • Add modelName for both OS, made it single code base
    • Move IMEI to Android
    • ⚠️ Deprecated getDeviceModelName, you should use modelName from now on.
  • Tweaked: Application

    • ⚠️ Deprecate Application.call and Application.canOpenURL
    • Application.canOpenUrl → Linking.canOpenURL
    • Application.call → Linking.openURL
    • To use Linking you need to import @smartface/native/global/linking
  • Tweaked: Timer

    • Return type of timers have been changed to number on Timer objects.
    • Converted to singleton
  • Feature: Network

    • Added isConnected property to Network that returns true if the device is connected to the internet.
  • Feature: Permission

    • Permission have been refactored on native side. Now there's a new Module called Permission.
    • You can use Permission with import @smartface/native/device/permission.
    • Android permissions now support array
    • Example of using Permission:
      • import { Permission } from '@smartface/native';
        Permission.requestPermission('CAMERA')
        .then((res) => alert('Permission Success: ' + res))
        .catch((err) => {
        alert({
        title: 'Hey! I want your Camera permission',
        message: 'Keep and Calm! I will use your camera for testing purposes only'
        });
        console.error('Permission failed ' + JSON.stringify(err));
        });
  • ⚠️ Deprecated Deprecated IMEI and vendorID

    • Hardware.android.IMEI
    • Hardware.android.vendorID
    • Network.IMEI
  • Feature Android & iOS now supporting border radius for any corners that user want to

  • Feature Added shadowColor property to view on Android

  • ⚠️ Deprecated view.ios.shadowColor is deprecated.

  • Feature Support getting string on headerBar.backgroundImage on Both OS

  • Feature Added new properties to flex for both OS

    • SPACE_EVENLY (JustifyContent)
    • WRAP_REVERSE (FlexWrap)
    • BASELINE (AlignContent)
    • SPACE_BETWEEN (AlignContent)
    • SPACE_AROUND (AlignContent)
  • Feature Updated widget icons for Smartface Android Emulator

ApplyLayout
  • ApplyLayout self-call feature breaks the backward compatibility. If you want to use @smartface/native v5.0.3 you have to use the latest version of Smartface Emulator.
  • You have to remove the applyLayout from your project, if not you can face the performance issue.
  • Depends on your project, you can still use the applyLayout but keep in mind that it is not supported anymore and it will be cause the performance issue.
Android Emulator

Due to the missing permissions on Smartface Android Emulator, you can't test some of the features that are not supported by the Smartface Android Emulator.

List of permissions disabled by the emulator:

  • android.permission.READ_SMS

  • android.permission.SEND_SMS

  • android.permission.RECEIVE_SMS

  • android.permission.RECEIVE_MMS

  • android.permission.RECEIVE_WAP_PUSH

  • android.permission.WRITE_CALL_LOG

  • android.permission.READ_CALL_LOG

  • android.permission.PROCESS_OUTGOING_CALLS

  • android.permission.ACCESS_BACKGROUND_LOCATION

🐞 Bug Fix

  • Fixed onApplicationCallReceived is not triggering on iOS.
  • Fixed Image caching issue on iOS.
  • Fixed Tint color not working on iOS.
  • Fixed On iOS shadows not working without setting both x and y offset.
  • Fixed Assets folder inaccessible after build on iOS.
  • Fixed TextView linespacing does not work properly on Android
  • Fixed On Modal Dismiss, onShow of the previous page doesn't trigger on Android.
  • Fixed Orientation not working while orientation in auto mode on iOS.
  • Fixed ImageView loadFromUrl triggers onFailure even after successful load on iOS.
  • Fixed Source Mapping is not working on Android.
  • Fixed On focus lost to mtb inside a listview makes listview scroll out of bounds on iOS.
  • Fixed iOS Random twice unHandledError trigger on every page push
  • Fixed ImageView images disappeared after the applyLayout on iOS
  • Fixed Source mapping not working for Smartface Native on iOS
  • Fixed Gridview scroll direction is not working as expected on both OS
  • Fixed BorderRadius on Android with ImageView does not assign radius properly
  • Fixed Headerbar borderVisibility property does not work properly on both OS
  • Fixed Button doesn't respect the individual border radius properties on Android
  • Fixed Freezing problem in Listview and Gridview on iOS

Code Changes

  • Android show dismiss workaround needs to be removed from projects. If not, onShow will trigger twice:
    • const androidModalDismiss = (router, route) => {
      const { view, action } = route.getState();
      if (System.OS === System.OSType.ANDROID && view && action === "POP") {
      view.onShow && view.onShow();
      }};

Usage Changes

Old -> New

  • Listview

    • ListView.IOS.RowAnimationRowAnimation -> RowAnimation
    • ListView.SwipeItem -> SwipeItem
  • TabBarController

    • TabBarController.iOS.BarTextTransform -> BarTextTransform
    • TabBarController.iOS.LargeTitleDisplayMode -> LargeTitleDisplayMode
  • SwipeItem

    • SwipeItem.State -> SwipeItemState
  • SliderDrawer

    • SliderDrawer.State -> SliderDrawerState
    • SliderDrawer.Position -> SliderDrawerPosition
  • ShimmerFlexLayout

    • ShimmerFlexLayout.Android.Shimmer -> ShimmerHighlight
    • ShimmerFlexLayout.ShimmeringDirection -> ShimmeringDirection
  • MenuItem

    • MenuItem.Style -> MenuItemStyle
  • Image

    • Image.FillType -> ImageFillType
  • Dialog

    • Dialog.Android.Style -> DialogStyle
    • Dialog.Style -> DialogStyle
  • DatePicker

    • DatePicker.Android.Style -> DatePickerStyle
    • DatePicker.iOS.DatePickerMode -> DatePickerMode
  • AsyncTask

    • Android.Status is Removed
    • Enum status -> AsyncTaskStatus
  • File

    • PATH_FILE_TYPE -> PathFileType
  • Http

    • Http.cancelAll -> removed

Smartface Util Changes

There are some changes in the Smartface Util package. Some of packages are removed and some of them are rewamped.

  • 🚮 Removed @smartface/extension-utils/lib/permission util from the Smartface Util package and moved to the Smartface Native.
  • 🚮 Removed isEmulator method from the Smartface Util package and moved to the Smartface Native.
  • 🚮 Removed isConnected method from the Smartface Util package and moved to the Smartface Native.
  • 🚮 Removed @smartface/extension-utils/lib/getCombinedStyle util from the Smartface Util package and moved to the styling-context theme
  • 🚮 Removed createAsyncTask, createAsyncGetter method from the @smartface/extension-utils/lib/async Smartface Util package and moved to the Smartface Native.
  • 🚮 Removed extendEvent method from the @smartface/extension-utils/lib/extendEvent and moved to the Smartface Native.
  • 🚮 Removed backClose method from the @smartface/extension-utils/lib/router/back-close and moved to the Smartface Mixins
  • 🚮 Removed goBack method from the @smartface/extension-utils/lib/router/goBack.
  • 🚮 Removed permission from the @smartface/extension-utils/lib/permission and moved to the Smartface Native.
    • Android permissions now support array.
    • Now there's a new Module called Permission.
    • android.requestPermissions also takes requestCode as number(optional). This should only be given on special occasions.

  • ⚠️ Deprecated serviceCall, serviceCall-offline method from the @smartface/extension-utils/service-call. You can use the Axios or XmlHttpRequest instead.
  • ⚠️ Deprecated touch from the @smartface/extension-utils/lib/touch Smartface Util package.

Smartface CLI Changes

We need to move below files to config/Android/res. Otherwise these files will be ignored by new CLI.

  • ❗ Breaks Backward Compability
    Old -> New

    • config/Android/strings.xml -> config/Android/res/values/strings.xml
    • config/Android/shortcuts.xml -> config/Android/res/xml/shortcuts.xml
    • config/Android/network_security_config.xml -> config/Android/res/xml/network_security_config.xml
    • config/Android/styles.xml -> config/Android/res/values/styles.xml
  • ⚠️ Deprecated
    Old -> New

    • config/Android/ids.xml -> config/Android/res/values/ids.xml

📑 Documentation

The following docs are updated, you can have a look to see what's new:

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 https://github.com/smartface/smartface-ide-releases/releases
Releases · smartface/smartface-ide-releases

For IDE Documentation & Usage, you can refer to this documentation:

UI Editor Basics

🆕 What's New

  • Feature: Split now work on non-empty layouts
  • Feature: Drag & drop actions are now work in design area to move components
  • Feature: Preview Mode now have shortcut and that shortcut should mention in the Preview Mode tooltip
  • Feature: Add new theme button action
  • Feature: Add action button in property item of combined styles
  • Feature: Add style list of selected className
  • Feature: Removed AssignToPage property
  • Feature: Redesigned properties and theme panels
  • Feature: Added Export to library. Now you can export your UI elements to the library as component format.
  • Feature: Added ability to set border radius for all corners of the component.
  • Feature: Added switch for the change shadow property for iOS and Android.
  • Feature: Added missing Yoga options of properties
  • Feature: Ability to go to custom components from page
  • Feature: Ability to Go to Design View from Code
  • Feature: Show toast message that why wrong while writing wrong classname
  • Feature: Shadow implementation on IDE
  • Feature: Ability to set border and border corners with simplified GUI
  • Feature: User can add any component directly to ListView & GridView
  • Feature: itemColor property can be added to headerBar
  • Feature: Add itemLength attribute property to GridView component