feat(toast): add lightweight, Sonner style Toast Component

[mehradotdev]

Pull Request

Description

This PR introduces a lightweight Toast component built on top of the existing @rn-primitives/toast primitive.

The goal is to provide a simple, polished, and ergonomic toast system for React Native that aligns with the philosophy of react-native-reusables:

• Minimal surface area
• No additional dependencies (uses existing project libs)
• Composable and predictable behavior

The implementation follows a Sonner-inspired API and integrates naturally with the existing PortalHost, Zustand store, and Reanimated-based animation patterns.

Motivation:

I was looking for a Toast component within react-native-reusables. After searching the issues, I found this comment mentioning that it is currently low priority.

I decided to implement one using @rn-primitives/toast for my own production app and wanted to contribute it back, as this library has helped me significantly.

I understand this implementation might not perfectly align with the specific architecture the maintainers have in mind. However, I hope this PR can serve as a solid foundation (or reference) to speed up the work for an official Toast component. Thank you for your hard work!

Features

• Imperative toast() API (toast.success, toast.error, toast.info)
• Optional description and action button support
• toast.promise() for async workflows
• Stacking behavior with a configurable limit (oldest toasts are removed from state)
• Smooth enter/exit animations using react-native-reanimated
• Auto-adjusts for Safe Area Insets and Keyboard (via props/styles)

Tested Platforms

• Web
• iOS
• Android

---

Affected Apps/Packages

• apps/docs
• apps/showcase
• apps/cli
• packages/registry

---

Screenshots

---

Notes

Dependencies

This component does not introduce any new dependencies. It relies only on peer dependencies already likely present in the project:

• zustand — state management
• react-native-reanimated — animations
• react-native-safe-area-context — positioning
• lucide-react-native — icons
• @rn-primitives/toast — primitive
• @rn-primitives/portal — portal rendering

---

Usage

Mount the Toaster component once at the root (alongside PortalHost):

import { Toaster } from '@/registry/nativewind/components/ui/toast';
import { PortalHost } from '@rn-primitives/portal';

// ... inside generic layout
<Toaster />
<PortalHost />

Trigger toasts imperatively:

import { toast } from '@/registry/nativewind/components/ui/toast';

// Simple
toast('Hello world');

// Success with description
toast.success('Saved successfully', {
  description: 'Your changes have been stored',
});

// Error
toast.error('Something went wrong');

// Promise-based
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Saved!',
  error: 'Failed to save',
});

Configuration

Can be customized via props on the component:

<Toaster 
  limit={5} 
  duration={3000} 
  position="bottom-center" 
/>

Limitations / Non-goals

To keep the component minimal, the following are intentionally out of scope for this PR:

• No swipe-to-dismiss (avoids adding react-native-gesture-handler overhead)
• No hover/pause interactions (web-specific)

Summary by CodeRabbit

Release Notes

• New Features
  • Added toast notification system to the app for enhanced user feedback
  • Multiple notification types available: success, error, info, and warning variants
  • Notifications support custom actions, descriptions, and manual dismissal
  • Promise-based notifications for tracking async operations
  • Customizable positioning and configurable notification limits with auto-stacking

[vercel]

@mehradotdev is attempting to deploy a commit to the React Native Reusables Team on Vercel.

A member of the Team first needs to authorize it.