Toast

A succinct message that is displayed temporarily with Dynamic Island animation inspired by iOS.

Installation


pnpm dlx bna-ui add toast

Usage

import { useToast } from '@/components/ui/toast';

function MyComponent() {
  const { toast } = useToast();
 
  const showToast = () => {
    toast({
      title: 'Success!',
      description: 'Your changes have been saved.',
      variant: 'success',
    });
  };
 
  return <Button onPress={showToast}>Show Toast</Button>;
}

Examples

Default

Variants

With Actions

Custom Duration

Multiple Toasts

Compact Mode

API Reference

ToastProvider

The provider component that manages toast state and renders toasts.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The app content to wrap with toast provider.
`maxToasts`	`number`	`3`	Maximum number of toasts to display at once.

useToast

Hook that provides methods to show and manage toasts.

const { toast, success, error, warning, info, dismiss, dismissAll } =
  useToast();

Methods

Method	Type	Description
`toast`	`(data: ToastData) => void`	Show a toast with custom data.
`success`	`(title: string, description?: string) => void`	Show a success toast.
`error`	`(title: string, description?: string) => void`	Show an error toast.
`warning`	`(title: string, description?: string) => void`	Show a warning toast.
`info`	`(title: string, description?: string) => void`	Show an info toast.
`dismiss`	`(id: string) => void`	Dismiss a specific toast by ID.
`dismissAll`	`() => void`	Dismiss all active toasts.

ToastData

Configuration object for toast notifications.

Prop	Type	Default	Description
`title`	`string`	-	The title of the toast.
`description`	`string`	-	The description text of the toast.
`variant`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`	The visual variant of the toast.
`duration`	`number`	`4000`	Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss.
`action`	`{ label: string; onPress: () => void }`	-	Optional action button configuration.

Animation

The toast component features iOS Dynamic Island-inspired animations:

Entrance: Smooth slide-in from top with scale and opacity transitions
Expansion: Automatic expansion when content is present
Gestures: Swipe-to-dismiss with spring animations
Stacking: Multiple toasts stack vertically with proper spacing
Exit: Fade out with scale transition

Accessibility

The Toast component is built with accessibility in mind:

Proper color contrast for all variants
Clear visual hierarchy with title and description
Icon indicators for different toast types
Dismissible with both gesture and button interactions
Supports dynamic text sizing
Screen reader friendly content structure

Customization

Custom Colors

You can customize the colors by modifying the getVariantColor() function in the component:

const getVariantColor = () => {
  switch (variant) {
    case 'success':
      return '#34D399'; // Custom green
    case 'error':
      return '#F87171'; // Custom red
    // ... other variants
  }
};

Custom Positioning

Modify the getTopPosition() function to change toast positioning:

const getTopPosition = () => {
  const statusBarHeight = Platform.OS === 'ios' ? 59 : 20;
  const customOffset = 20; // Add custom offset
  return (
    statusBarHeight + customOffset + index * (EXPANDED_HEIGHT + TOAST_MARGIN)
  );
};

Custom Animations

The component uses React Native Animated API. You can customize animation timing and easing:

Animated.spring(translateY, {
  toValue: 0,
  tension: 100, // Custom tension
  friction: 10, // Custom friction
  useNativeDriver: true,
});

Text Toggle