Skip to main content
Version: 7.2.1


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.


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.


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) {

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!');

onLoad() {

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