Toast

A dismissible toast that slides down from the top, auto-dismisses, and follows your finger if you swipe it away early.

ReanimatedGesture HandlerHapticsSource

Prerequisites

Toast needs a pan gesture for swipe-to-dismiss, plus icons, haptics, and Reanimated.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-gesture-handler react-native-reanimated

Install


npx @rslab/cli add toast

Usage

Mount one Toast near the root of your screen and drive it from a small piece of state, there's no built-in queue, so stacking multiple toasts is left to whatever you put around it.

import { Toast, ToastVariant } from '@/components/ui/Toast';

const [toast, setToast] = useState<{
  message: string;
  variant: ToastVariant;
} | null>(null);

<Toast
  visible={!!toast}

  message={toast?.message ?? ''}

  variant={toast?.variant}

  onDismiss={() => setToast(null)}
/>;

setToast({ message: 'Changes saved', variant: 'success' });

setToast({ message: 'Could not connect', variant: 'error' });

Props

PropTypeDefault

visible

boolean

-

Controls the entrance and exit animation.

message

string

-

Toast text, wraps up to 2 lines.

onDismiss

() => void

-

Called on auto-dismiss, swipe-to-dismiss, or timeout.

variant?

'neutral''success''error''info'

'neutral'

Adds a leading icon for every variant except neutral, and picks the entrance haptic.

duration?

number

2800

Auto-dismiss delay in ms. Set 0 to disable auto-dismiss.

haptic?

boolean

true

Mute the entrance notification haptic.

How it works

Controlled, with its own mount lifecycle. visible is the intent, but an internal render flag stays true through the exit animation and only flips once the fade-out's completion callback fires, so the toast actually animates out instead of vanishing the instant visible goes false.
Swipe-to-dismiss is gesture-driven. Dragging up moves the toast 1:1 with your finger; releasing past a distance threshold calls onDismiss directly, skipping the timing-based exit since the toast is already most of the way off-screen. Release before that threshold and it snaps back to resting position.
Inline styles, not className, on the gesture-attached view. The animated view needs a real ref for the gesture handler to attach to, and only Reanimated's own Animated.View forwards that ref reliably, so its card styling (background, border, shadow) is inline style with useColorScheme() driving light/dark colors by hand, rather than NativeWind classes.
Haptic matches the variant. A notification haptic fires with a type that matches success/error/anything else, at the moment the toast starts appearing, not after the entrance animation finishes.

Tuning

REST_Y: how far above the screen the toast starts and ends.
DISMISS_DISTANCE: how far up you have to drag before releasing dismisses it instead of snapping back.
The entrance/exit timing durations, closing is intentionally faster than opening.

See exactly how this works with an RSLAB subscription.

Get Pro

Toast

Prerequisites

Install

Usage

Props

On this page