Skip to main content
Version: 7.3.1

Toast

Toast is a small, simple, and flexible component that can be used to display a message to the user for a period of time.

When to use

  • When you want to display a message to the user.
  • When you want to display a message to the user that requires a user action.

Usage

createAction method accepts two parameters:

  • title: Title of the action button.
  • callback: Callback function that will be called when the action button is pressed.

isShowing property is used to check if Toast is showing or not.

onDismissed is a callback function that gets executed when the Toast is dismissed.

caution

duration Toast component gets dismissed automatically after 10 seconds on iOS.

bottomOffset If you assign a negative value to bottomOffset on iOS, It will automatically set to zero.


import PageSampleDesign from 'generated/pages/toastExample';
import { Route, Router } from '@smartface/router';
import Color from '@smartface/native/ui/color';
import Toast from '@smartface/native/ui/toast';
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
constructor(private router?: Router, private route?: Route) {
super({});
}

onShow() {
super.onShow();
let myToastMessage = new Toast({
message: 'This is a toast message',
actionTextColor: Color.YELLOW,
bottomOffset: 200,
duration: 5
});
myToastMessage.createAction('Action Title', () => {
console.log('Action Pressed!');
});
myToastMessage.show();
}

onLoad() {
super.onLoad();
}
}
info

If you don't set the duration, it will be 4 seconds on iOS and Android by default.