Toast

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.

Usage

Wrap your app/screen in the Toast.Provider.

import { Toast } from '@hero-design/rn';

const App = () => {
  return (
    <Toast.Provider>
      <RestOfYourApp />
    </Toast.Provider>
  );
};

Then you use the useToast hook to access Toast APIs

import { Toast } from '@hero-design/rn';

const YourComponent = () => {
  const toast = Toast.useToast();

  ...
};

Methods

show: (config: ToastConfigProps) => string

Create and add a new toast message into the toast messages queue with specific config.

For config details, please refer to ToastConfig Props.

toast.show({
  content: 'Your timesheet has been deleted.',
  intent: 'warning',
  variant: 'round',
  duration: 3000,
});

hide: (id: string) => void

Dismiss a toast message with specific id. If the toast message is in the messages queue, it will be removed.

const id = toast.show({ ... });
toast.hide(id);

clearAll: () => void

Dismiss all toast messages and clear the toast messages queue.

toast.clearAll();

Example

Default variant

Toast default variant comes with 6 intents which are info, success, warning, error, notification, snackbar.

Add Info Toast

Add Success Toast

Add Warning Toast

Add Error Toast

Add Notification Toast

Add Snackbar Toast

Round variant

Toast round variant comes with 6 intents which are info, success, warning, error,notification, snackbar.

Add Info Toast

Add Success Toast

Add Warning Toast

Add Error Toast

Add Notification Toast

Add Snackbar Toast

Display type

Toast can have different display mode by specifying the displayType prop.

• stack: display multiple toast messages at a time.
• single: display each toast messages one by one.

Add Info Toast

Toast distance

You can customize the toast distance from bottom by passing distance option.

Add Info Toast

Props

Toast.Provider Props

	Prop	Required	Default	Type
	children			ReactNode
	displayType		single	"single" | "stack"
	position			"bottom" | "top"
	style			StyleProp<ViewStyle>

ToastConfig Props

	Prop	Required	Default	Type
	content	required		string | ReactElement<any, string | JSXElementConstructor<any>>
	actionLabel			string | ReactElement<any, string | JSXElementConstructor<any>>
	autoDismiss		true	boolean
	distance		0	number
	duration		2000	number
	icon			"number" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | ... 417 more ... | "wellness-outlined"
	intent		info	"warning" | "success" | "info" | "error" | "notification" | "snackbar"
	onAction			() => void
	onDismiss			() => void
	style			StyleProp<ViewStyle>
	variant		default	"default" | "round"