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

# Using npm
npm install rn-toast-notifier

# Using yarn
yarn add rn-toast-notifier

Optional Icon Support

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

# or
yarn add react-native-vector-icons

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

Usage

import ToastNotification from 'rn-toast-notifier';
import { useState } from 'react';
import { Button } from 'react-native';

const App = () => {
  const [visible, setVisible] = useState(false);

  const showToast = () => {
    setVisible(true);
  };

  return (
    <>
      {visible && (
        <ToastNotification
          message="Success! Your action was completed."
          type="success"
          duration={3000}
          position="top"
          onHide={() => setVisible(false)}
          iconName="check-circle" // Optional icon
        />
      )}
      <Button title="Show Toast" onPress={showToast} />
    </>
  );
};

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

<ToastNotification
  message="Successfully saved!"
  type="success"
  duration={2000}
/>

Error Toast

<ToastNotification
  message="An error occurred"
  type="error"
  position="bottom"
/>

Warning Toast with Custom Duration

<ToastNotification
  message="Please check your input"
  type="warning"
  duration={5000}
/>

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.

<ToastNotification
  message="Custom styled toast"
  containerStyle={{
    backgroundColor: '#6200EE',
    borderRadius: 10,
    padding: 20,
  }}
  textStyle={{
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  }}
/>

Custom Icons

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

<ToastNotification
  message="Task completed!"
  type="success"
  iconName="check-circle" // MaterialIcons icon name
/>

Custom Animations

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

<ToastNotification
  message="Custom animation"
  animationConfig={{ duration: 500 }}
/>

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