Super Toast

Introduction

Native toasts for React Native that render above everything, including native modals and bottom sheets.

This documentation targets react-native-super-toast 0.2.1. Code samples match that release.

What it is

Super Toast is a toast library with a small imperative API. You mount one <ToastHost /> and call toast() from anywhere.

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

toast.success('Saved', { description: 'Your changes are live.' });
  • success, error, warning, info, loading, and promise variants
  • Title, description, action, and cancel buttons
  • Light, dark, and system themes, with optional rich colors
  • Top, bottom, or center positions, listed or stacked
  • Swipe to dismiss, an optional close button, in-place updates, toast.wiggle, and haptics
  • Image, text, or font icons

Motivation

A toast usually confirms something the user just did. Very often, they did it inside a modal or a bottom sheet. Toasts rendered as ordinary views inside the React tree are covered as soon as iOS presents a modal view controller or Android opens a dialog window, so the confirmation is invisible exactly when it matters.

Super Toast renders toasts in a layer that sits above those surfaces on both platforms, without pulling in an animation or gesture stack.

Where to next

On this page