React Native Toast Notify

A lightweight, customizable animated toast notification component for React Native applications. This library provides smooth animations, multiple positions, and different types of notifications to enhance your app's user experience.

Features

• 🚀 Smooth slide and fade animations
• 🎨 Multiple toast types (default, success, error, warning)
• 📍 Flexible positioning (top or bottom)
• ⏱️ Customizable duration
• 🎯 Auto-dismiss with callback function
• 📱 Responsive design
• 💫 Native animations for better performance
• 🎨 Customizable styles for container and text
• ✨ Optional icon support (using react-native-vector-icons)
• ♿ Accessibility support

Installation

1# Using npm
2npm install rn-toast-notifier
3
4# Using yarn
5yarn add rn-toast-notifier

Optional Icon Support

To display icons in your toast notifications, you need to install react-native-vector-icons:

1# or
2yarn add react-native-vector-icons

Follow the react-native-vector-icons installation guide to configure it for your project.

Usage

1import ToastNotification from 'rn-toast-notifier';
2import { useState } from 'react';
3import { Button } from 'react-native';
4
5const App = () => {
6  const [visible, setVisible] = useState(false);
7
8  const showToast = () => {
9    setVisible(true);
10  };
11
12  return (
13    <>
14      {visible && (
15        <ToastNotification
16          message="Success! Your action was completed."
17          type="success"
18          duration={3000}
19          position="top"
20          onHide={() => setVisible(false)}
21          iconName="check-circle" // Optional icon
22        />
23      )}
24      <Button title="Show Toast" onPress={showToast} />
25    </>
26  );
27};

Props

Prop	Type	Default	Description
message	string	required	The text message to display in the toast
duration	number	3000	Duration in milliseconds before the toast disappears
type	string	'default'	Type of toast: 'default', 'success', 'error', 'warning'
position	string	'top'	Position of toast: 'top' or 'bottom'
onHide	function	() => {}	Callback function called when toast is hidden
iconName	string	null	Optional icon name (e.g., 'check-circle' for success toasts)
containerStyle	object	{}	Custom styles for the toast containe
textStyle	object	{}	Custom styles for the toast message text
animationConfig	object	{ duration: 300 }	Custom animation configuration (e.g., { duration: 500 })

Toast Types

The library includes four pre-styled toast types:

• default: Gray background
• success: Green background
• error: Red background
• warning: Yellow background

Examples

Success Toast

1<ToastNotification
2  message="Successfully saved!"
3  type="success"
4  duration={2000}
5/>

Error Toast

1<ToastNotification
2  message="An error occurred"
3  type="error"
4  position="bottom"
5/>

Warning Toast with Custom Duration

1<ToastNotification
2  message="Please check your input"
3  type="warning"
4  duration={5000}
5/>

Customization

The toast notifications are styled using React Native's StyleSheet. You can customize the appearance by passing style props:

Custom Styles

Pass containerStyle and textStyle props to customize the toast's appearance.

1<ToastNotification
2  message="Custom styled toast"
3  containerStyle={{
4    backgroundColor: '#6200EE',
5    borderRadius: 10,
6    padding: 20,
7  }}
8  textStyle={{
9    color: '#FFFFFF',
10    fontSize: 16,
11    fontWeight: 'bold',
12  }}
13/>

Custom Icons

Use the iconName prop to display an icon alongside the message. Icons are supported via react-native-vector-icons.

1<ToastNotification
2  message="Task completed!"
3  type="success"
4  iconName="check-circle" // MaterialIcons icon name
5/>

Custom Animations

Pass an animationConfig object to customize the animation duration and behavior.

1<ToastNotification
2  message="Custom animation"
3  animationConfig={{ duration: 500 }}
4/>

Accessibility

The toast notifications are fully accessible. By default, the component includes:

• accessible={true}

• accessibilityRole="alert"

• accessibilityLabel (based on the message prop)

You can override these props if needed.

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

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please:

• Open an issue
• Submit a pull request
• Contact the maintainers

Author

Your Name

• GitHub: @Hitesh025
• npm: @hiteshnpm0605