react-native-rich-toast

🎉 a lightweight wrapper around react-native-toast-message that brings sonner-style toast apis to react native.

react-native-rich-toast simplifies toast usage by providing a clean, expressive api for success, error, info, and warning notifications — with optional rich color variants and positioning out of the box.

installation

npm install react-native-rich-toast react-native-toast-message

or

yarn add react-native-rich-toast react-native-toast-message

usage

add the Toast component somewhere in your app — typically near the root:

import { Toast, toast } from 'react-native-rich-toast';

export default function App() {
	return (
		<>
			<Toast richColors options={{ topOffset: 60 }} />
			{/* your app content */}
		</>
	);
}

trigger toasts anywhere in your app:

toast.success('saved!');
toast.error('something went wrong.', { description: 'please try again.' });
toast.info('heads up!', { description: 'this is an info message.' });
toast.warning('be careful.');

advanced usage

toast queueing

enable toast queueing to show multiple toasts sequentially with smooth fade transitions:

<Toast
	richColors
	options={{
		queue: true,
		duration: 3000,
		topOffset: 60,
	}}
/>

when queueing is enabled:

• multiple toast calls will be queued instead of replacing each other
• each toast fades out before the next one appears
• perfect for scenarios with multiple rapid notifications

custom configuration examples

// quick toasts
<Toast options={{ duration: 1500 }} />

// long-lasting toasts with queueing
<Toast richColors options={{ queue: true, duration: 5000 }} />

// bottom positioned with custom offset
<Toast position="bottom" options={{ topOffset: 100 }} />

props

toast component

prop	type	description	default
richColors	boolean	enables vibrant toast background colors	false
position	string	toast position: "top" or "bottom"	"top"
options	object	configuration options (see below)	{}

options object

option	type	description	default
queue	boolean	enables toast queueing with transitions	false
duration	number	toast visibility time in milliseconds	4000
topOffset	number	offset from top or bottom of screen	-

toast api

the toast object provides methods for different toast types:

• toast.success(message, options?) - show success toast
• toast.error(message, options?) - show error toast
• toast.info(message, options?) - show info toast
• toast.warning(message, options?) - show warning toast

the options object can contain:

option	type	description
description	string	optional secondary message

live demo

try it live on expo snack:
👉 https://snack.expo.dev/@stlaurent/react-native-rich-toast

why use this?

react-native-toast-message is powerful but verbose. this wrapper streamlines your developer experience by bringing the simplicity of sonner's api from web to react native:

• one-liner toast calls - simple, expressive api
• drop-in setup - minimal configuration required
• toast queueing - smooth transitions between multiple toasts
• clean options api - organized configuration with sensible defaults
• consistent ux - optional rich color theming
• fully compatible - built on top of react-native-toast-message

license

mit