Skip to main content
Version: Next

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;
}
};