Showing toasts

Actions, promises, updates in place, wiggle, and custom styles on a real device:

Variants

import { toast } from 'react-native-super-toast';

toast('Event has been created'); // no icon
toast.success('Saved', { description: 'Your changes are live.' });
toast.error('Could not reach the server');
toast.warning('Storage almost full');
toast.info('New version available');
toast.loading('Syncing…');

Every call returns a ToastId that you can use to update, wiggle, or dismiss the toast.

Actions

Pressing the action calls onClick and dismisses the toast. Pressing cancel calls onClick, then onDismiss, and dismisses the toast.

toast('Message archived', {
  action: { label: 'Undo', onClick: () => restore() },
  cancel: { label: 'Close', onClick: () => {} },
});

Promises

toast.promise shows a loading toast, then updates the same toast when the promise settles. It accepts a promise or a function that returns one.

toast.promise(uploadFile(), {
  loading: 'Uploading…',
  success: (file) => `${file.name} uploaded`,
  error: (error) => `Upload failed: ${String(error)}`,
});

The loading state is not dismissible unless you pass dismissible: true. If the user dismisses the toast before the promise settles, it stays dismissed.

Updating in place

Showing a toast with an existing id updates that toast instead of creating a new one.

const id = toast.loading('Uploading…');
// later
toast.success('Uploaded', { id });

Duration

Toasts close after the ToastHost duration (4000 ms by default). toast.loading toasts stay until updated or dismissed. Pass duration: Infinity to keep any toast visible.

toast.warning('Offline mode', { duration: Infinity });

Dismissing

toast.dismiss(id); // dismiss one
toast.dismiss(); // dismiss all

Set dismissible: false to disable swipe and close-button dismissal. toast.dismiss still works.

Wiggle

Draw attention to a visible toast without replacing it.

toast.wiggle(id);