React Native Toast Message (TypeScript)

A modern, highly customizable toast notification library for React Native with full TypeScript support. Features drawer-style stacking for multiple toasts, beautiful colored backgrounds, smooth animations, and flexible icon configuration. Works flawlessly on both iOS and Android.

• 📚 Drawer-Style Stacking - Multiple toasts stack with the newest in front, older ones scaled behind with smooth animations
• 🎭 Icon Configuration - Show/hide leading icons and close buttons per toast

✨ Features

• ⚡ Smooth Animations - Beautiful slide-in/out with scale and opacity transitions using native driver
• 📱 Cross-Platform - Works flawlessly on iOS and Android
• 👆 Swipeable - Swipe to dismiss the front toast
• ✕ Close Button - Built-in close button on every toast (can be hidden)
• 🎯 TypeScript First - Full TypeScript support with comprehensive type definitions
• 🪶 Lightweight - Zero dependencies, minimal footprint
• 🧪 Well Tested - Comprehensive test coverage
• 📦 Easy to Use - Simple API similar to popular web toast libraries
• 🏗️ Expo Compatible - Works with Expo Go and prebuilds out of the box

📱 Expo Support

This library is fully compatible with Expo. It uses standard React Native APIs (Animated, PanResponder) and requires no native code linking. You can use it directly in:

• Expo Go
• Expo Development Builds
• Expo Prebuilds

📋 Requirements

• React Native >= 0.70.0
• React >= 18.0.0
• TypeScript >= 5.0.0 (optional, but recommended)

📦 Installation

npm install react-native-toast-message-ts

or with yarn:

yarn add react-native-toast-message-ts

or with pnpm (recommended):

pnpm add react-native-toast-message-ts

🚀 Quick Start

1. Add ToastContainer to your App

import React from 'react';
import { SafeAreaView } from 'react-native';
import { ToastContainer } from 'react-native-toast-message-ts';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Your app content */}

      {/* Toast Container should be at the root level */}
      <ToastContainer />
    </SafeAreaView>
  );
}

2. Show Toasts Anywhere

import { Toast } from 'react-native-toast-message-ts';

// Success toast (green background with white text)
Toast.success('Success!', 'Your changes have been saved');

// Error toast (red background with white text)
Toast.error('Error!', 'Something went wrong');

// Warning toast (yellow background with dark text)
Toast.warning('Warning!', 'Please review your input');

// Info toast (blue background with white text)
Toast.info('Info', 'Did you know?');

// Custom toast with full configuration
Toast.show({
  type: 'success',
  text1: 'Custom Toast',
  text2: 'This is a custom configured toast',
  position: 'bottom',
  visibilityTime: 5000,
  onPress: () => console.log('Toast pressed!'),
});

🆕 Drawer-Style Multi-Toast Stacking

This library features a beautiful drawer-style stacking animation for multiple toasts:

• Newest toast appears in front with full size and opacity
• Older toasts stack behind with reduced scale and opacity
• Smooth animations when toasts are added or removed
• Up to 5 visible toasts in the stack

// Show multiple toasts - they will stack with drawer effect!
Toast.success('First Toast', 'This will move to the back');
Toast.info('Second Toast', 'This appears in front of the first');
Toast.warning('Third Toast', 'This is now the front toast');

// Each new toast pushes previous ones back with a smooth animation

How it works:

• New toasts slide in and appear at the front
• Previous toasts animate to the back with reduced scale (95%, 90%, etc.)
• Each stacked toast has slightly reduced opacity
• Only the front toast can be swiped to dismiss
• When the front toast is dismissed, the next one animates forward

🎭 Icon Configuration

Control the visibility of icons on a per-toast basis:

Hide All Icons

Toast.success('Success!', 'No icons on this toast', {
  iconConfig: {
    hideLeadingIcon: true, // Hide the checkmark/status icon
    hideCloseIcon: true, // Hide the X close button
  },
});

Hide Only Leading Icon (Keep Close Button)

Toast.error('Error!', 'No status icon, but has close button', {
  iconConfig: {
    hideLeadingIcon: true,
  },
});

Hide Only Close Button (Keep Leading Icon)

Toast.info('Info', 'Has icon but no close button', {
  iconConfig: {
    hideCloseIcon: true,
  },
});

Custom Icon Colors and Size

Toast.success('Custom Icons', 'Personalized icon appearance', {
  iconConfig: {
    leadingIconSize: 28, // Larger icon
    leadingIconColor: '#FFD700', // Gold color
    closeIconColor: '#FFD700', // Matching close icon
  },
});

📖 API Reference

ToastContainer Props

Prop	Type	Default	Description
config	ToastConfig	-	Map of toast types to render functions
topOffset	number	40	Top offset for positioning (when position is 'top')
bottomOffset	number	40	Bottom offset for positioning (when position is 'bottom')
visibilityTime	number	3000	Default visibility time in milliseconds
maxVisibleToasts	number	5	Maximum number of toasts visible in stack

Toast Methods

Toast.show(config: ToastShowParams)

Show a toast with custom configuration.

Toast.show({
  type: 'success',
  text1: 'Success!',
  text2: 'Operation completed',
  position: 'top',
  visibilityTime: 4000,
  iconConfig: {
    hideLeadingIcon: false,
    hideCloseIcon: false,
  },
  onPress: () => console.log('Pressed'),
});

Toast.success(text1: string, text2?: string, options?: ToastOptions)

Show a success toast with green background.

Toast.success('Success!', 'Your changes have been saved', {
  visibilityTime: 3000,
  position: 'bottom',
  iconConfig: { hideCloseIcon: true },
});

Toast.error(text1: string, text2?: string, options?: ToastOptions)

Show an error toast with red background.

Toast.error('Error!', 'Failed to save changes');

Toast.warning(text1: string, text2?: string, options?: ToastOptions)

Show a warning toast with yellow background.

Toast.warning('Warning!', 'Please check your input');

Toast.info(text1: string, text2?: string, options?: ToastOptions)

Show an info toast with blue background.

Toast.info('Info', 'New features available');

Toast.hide()

Hide the front (newest) toast in the stack.

Toast.hide();

ToastShowParams / ToastOptions

Prop	Type	Default	Description
type	'success' | 'error' | 'warning' | 'info' | 'custom'	'success'	Type of the toast
text1	string	-	Main text (title)
text2	string	-	Secondary text (subtitle)
position	'top' | 'bottom'	'top'	Position of the toast
visibilityTime	number	3000	Duration in milliseconds
autoHide	boolean	true	Whether toast auto-hides (false for persistent)
topOffset	number	40	Top offset when position is 'top'
bottomOffset	number	40	Bottom offset when position is 'bottom'
iconConfig	ToastIconConfig	-	Icon visibility and styling options
onPress	() => void	-	Callback when toast is pressed
onShow	() => void	-	Callback when toast is shown
onHide	() => void	-	Callback when toast is hidden
props	Record<string, any>	-	Custom props for advanced use cases

ToastIconConfig

Prop	Type	Default	Description
hideLeadingIcon	boolean	false	Hide the status icon (✓, ✕, etc.)
hideCloseIcon	boolean	false	Hide the close (X) button
leadingIconSize	number	24	Size of the leading icon
leadingIconColor	string	-	Custom color for leading icon
closeIconColor	string	-	Custom color for close icon

🎨 Advanced Customization

1. Global Configuration

Define your custom types once in ToastContainer and use them everywhere.

import { View, Text } from 'react-native';
import { ToastContainer, ToastConfigParams, BaseToast } from 'react-native-toast-message-ts';

// Custom toast component
const CustomToast = ({ text1, text2, hide }: ToastConfigParams) => (
  <View
    style={{
      height: 60,
      width: '90%',
      backgroundColor: 'tomato',
      borderRadius: 10,
      padding: 15,
      justifyContent: 'center',
      alignSelf: 'center',
    }}
  >
    <Text style={{ color: 'white', fontWeight: 'bold' }}>{text1}</Text>
    {text2 && <Text style={{ color: 'white' }}>{text2}</Text>}
  </View>
);

const toastConfig = {
  custom: CustomToast,
  // Override default success with custom styling
  success: (props: ToastConfigParams) => (
    <BaseToast
      {...props}
      style={{ backgroundColor: '#00C851' }}
      text1Style={{ color: '#fff' }}
      text2Style={{ color: '#fff' }}
      onClose={props.hide}
    />
  ),
};

// In your App
<ToastContainer config={toastConfig} visibilityTime={5000} />;

2. Usage

Toast.show({
  type: 'custom',
  text1: 'Hello World',
  text2: 'Custom toast message',
});

💡 Examples

Custom Duration

// Quick toast (2 seconds)
Toast.info('Quick Toast', 'This disappears fast', {
  visibilityTime: 2000,
});

// Long toast (10 seconds)
Toast.info('Long Toast', 'This stays longer', {
  visibilityTime: 10000,
});

Persistent Toast (Manual Dismiss)

Toast.show({
  type: 'info',
  text1: 'Persistent Toast',
  text2: 'Tap the X button or swipe to dismiss',
  autoHide: false, // Won't auto-hide
});

// Or hide programmatically
Toast.hide();

Bottom Position

Toast.success('Bottom Toast', 'Appears at the bottom', {
  position: 'bottom',
});

With Press Handler

Toast.success('New Message', 'Tap to view', {
  onPress: () => {
    console.log('Toast pressed!');
    // Navigate to message screen
    navigation.navigate('Messages');
  },
});

With Callbacks

Toast.show({
  type: 'success',
  text1: 'Processing',
  text2: 'Your request is being processed',
  onShow: () => console.log('Toast shown'),
  onHide: () => console.log('Toast hidden'),
});

Icon-Only Toast (No Close Button)

Toast.success('Clean Design', 'Just the icon and text', {
  iconConfig: {
    hideCloseIcon: true,
  },
});

Text-Only Toast (No Icons)

Toast.info('Minimal', 'Just text, no distractions', {
  iconConfig: {
    hideLeadingIcon: true,
    hideCloseIcon: true,
  },
});

Multiple Toasts with Different Configurations

// Show a series of toasts with drawer stacking
Toast.success('Step 1 Complete', 'First task done');

setTimeout(() => {
  Toast.info('Step 2 In Progress', 'Processing...');
}, 500);

setTimeout(() => {
  Toast.warning('Almost Done', 'One more step');
}, 1000);

setTimeout(() => {
  Toast.success('All Done!', 'Everything completed successfully');
}, 1500);

🎭 Toast Types

The library comes with 4 beautifully styled toast types, each with its own colored background:

Success (Green Background)

// ✓ icon + text + ✕ close button
Toast.success('Success!', 'Operation completed successfully');

// Without close button
Toast.success('Saved!', 'Changes saved', {
  iconConfig: { hideCloseIcon: true },
});

// Without any icons
Toast.success('Done', 'Simple message', {
  iconConfig: { hideLeadingIcon: true, hideCloseIcon: true },
});

Error (Red Background)

// ✕ icon + text + ✕ close button
Toast.error('Error!', 'Something went wrong');

// Custom icon size
Toast.error('Critical Error', 'Please try again', {
  iconConfig: { leadingIconSize: 32 },
});

Warning (Yellow Background)

// ⚠ icon + text + ✕ close button (with dark text for contrast)
Toast.warning('Warning!', 'Please review your input');

Info (Blue Background)

// ℹ icon + text + ✕ close button
Toast.info('Info', 'Here is some helpful information');

Base / Custom

Create your own toast with full customization:

Toast.show({
  type: 'base',
  text1: 'Base Toast',
  text2: 'Minimal styling with white background',
});

🔧 Advanced Usage

TypeScript Support

The library is written in TypeScript and provides comprehensive type definitions:

import {
  Toast,
  ToastContainer,
  ToastConfig,
  ToastShowParams,
  ToastConfigParams,
  ToastType,
  ToastPosition,
  ToastIconConfig,
  BaseToast,
  BaseToastProps,
  SuccessToast,
  ErrorToast,
  InfoToast,
  WarningToast,
} from 'react-native-toast-message-ts';

Custom Icons Export

You can use the built-in icon components separately:

import { SuccessIcon, ErrorIcon, WarningIcon, InfoIcon, ToastIcon } from 'react-native-toast-message-ts';

// Individual icons
<SuccessIcon color="#00ff00" size={30} />
<ErrorIcon color="#ff0000" size={24} />

// Or use ToastIcon with type
<ToastIcon type="success" size={24} />

Colors Export

Access the color constants and helper functions:

import {
  COLORS,
  getDefaultBackgroundColor,
  getDefaultTextColor,
  getDefaultBorderColor,
  getDefaultIconColor,
} from 'react-native-toast-message-ts';

console.log(COLORS.success); // '#28a745' (green)
console.log(COLORS.error); // '#dc3545' (red)
console.log(COLORS.warning); // '#ffc107' (yellow)
console.log(COLORS.info); // '#17a2b8' (blue)
console.log(COLORS.white); // '#FFFFFF'
console.log(COLORS.warningText); // '#664d03' (dark text for yellow bg)

// Get background color for a toast type
getDefaultBackgroundColor('success'); // '#28a745'
getDefaultTextColor('warning'); // '#664d03'

BaseToast Props

When creating custom toast components, you can use these props:

Prop	Type	Default	Description
text1	string	-	Main title text
text2	string	-	Subtitle text
onPress	() => void	-	Press handler
onClose	() => void	-	Close button handler
hideCloseButton	boolean	false	Hide the X close button
style	ViewStyle	-	Container style
backgroundColor	string	-	Background color
text1Style	TextStyle	-	Title text style
text2Style	TextStyle	-	Subtitle text style
text1NumberOfLines	number	1	Max lines for title
text2NumberOfLines	number	1	Max lines for subtitle
renderLeadingIcon	() => ReactNode	-	Custom leading icon
renderTrailingIcon	() => ReactNode	-	Custom trailing icon
contentContainerStyle	ViewStyle	-	Content container style
activeOpacity	number	0.8	Touch opacity
iconConfig	ToastIconConfig	-	Icon visibility options

🎬 Animation Details

The drawer-style stacking animation includes:

• Slide Animation: 300ms slide-in from top/bottom
• Scale Animation: Each stacked toast is scaled down by 5% (95%, 90%, 85%...)
• Opacity Animation: Stacked toasts have reduced opacity (85%, 70%, 55%...)
• Stack Offset: 12px vertical offset between stacked toasts
• Native Driver: All animations use native driver for 60fps performance
• Cross-Platform: Works identically on iOS and Android

🧪 Testing

The library includes comprehensive tests. To run tests:

npm test

To run tests with coverage:

npm test -- --coverage

📱 Compatibility

• React Native >= 0.70.0
• React >= 18.0.0
• iOS 13.0+
• Android API 23+
• Expo SDK 49+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Inspired by:

• react-native-toast-message
• Sonner - for web

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the examples directory for more usage examples

🎉 Show Your Support

If this library helped you, please give it a ⭐️ on GitHub!

You can also support the development of this project by buying me a coffee:

---

Made with ❤️ by Noor Mohammad