UI FeedBack

Vibration

Vibration enables haptics enhance interactions and convey useful information to users through the sense of touch. Haptic effect simulates physical vibrates when an action triggered. On iOS vibrate which has three level as high, medium and low works on only on iPhone7 and above. Android Vibration Effect's time can be managed depending given value.

TypeScript

import PageSampleDesign from "generated/pages/page3";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import Button from "@smartface/native/ui/button";
import System from "@smartface/native/device/system";
import Invocation from "@smartface/native/util/iOS/invocation";

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  myButton: Button;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'COLUMN',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    this.myButton = new Button({
        text: "Vibrate",
        onPress: () => {
          //Android
          if (System.OS === System.OSType.ANDROID) {
            System.vibrate({ millisecond: 50 });
          }
          //iOS
          if (System.OS === System.OSType.IOS) {
            let feedbackAlloc = Invocation.invokeClassMethod(
              "UIImpactFeedbackGenerator",
              "alloc",
              [],
              "id"
            );
            // 0: Light , 1: Medium , 2: Heavy
            //@ts-ignore
            const argStyle = new Invocation.Argument({
              type: "NSInteger",
              value: 0,
            });
            //@ts-ignore
            const feedbackGenerator = Invocation.invokeInstanceMethod(
              feedbackAlloc,
              "initWithStyle:",
              [argStyle],
              "NSObject"
            );
            //@ts-ignore
            Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
            //@ts-ignore
            Invocation.invokeInstanceMethod(
              feedbackGenerator,
              "impactOccurred",
              []
            );
            feedbackGenerator = undefined;
            feedbackAlloc = undefined;
          }
        },
      });
      this.addChild(this.myButton, "myButton", ".sf-button", {
        width: 100,
        height: 50,
        textColor: "#000000",
        backgroundColor: "#00A1F1",
      });
  }
}

Using Vibrate Effect With Notifications

When a notification is received vibrate effect can be used all the way.

TypeScript

import System from "@smartface/native/ui/system";
Notifications.onNotificationReceive = function (e): void {
  //Android
  if (System.OS === System.OSType.ANDROID) {
    System.vibrate({ millisecond: 50 });
  }
  //iOS
  if (System.OS === System.OSType.IOS) {
    const feedbackAlloc = Invocation.invokeClassMethod(
      "UIImpactFeedbackGenerator",
      "alloc",
      [],
      "id"
    );
    // 0: Light , 1: Medium , 2: Heavy
    const argStyle = new Invocation.Argument({
      type: "NSInteger",
      value: 0,
    });
    const feedbackGenerator = Invocation.invokeInstanceMethod(
      feedbackAlloc,
      "initWithStyle:",
      [argStyle],
      "NSObject"
    );
    Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
    Invocation.invokeInstanceMethod(feedbackGenerator, "impactOccurred", []);
    feedbackGenerator = undefined;
    feedbackAlloc = undefined;
  }
};