1.0.6 • Published 7 months ago

@shivrajkadam/react-native-toast-alerts v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
7 months ago

Toast Notification Library for React Native

A customizable and lightweight toast notification library for React Native. This component supports animations, themes, dynamic positioning, and allows for multiple simultaneous toast notifications.

Features

  • Custom Themes: Built-in themes (success, error, info, warning).
  • Dynamic Positioning: Supports vertical and horizontal positioning (top, center, bottom, left, right).
  • Smooth Animations: Toasts appear and disappear with customizable animations.
  • Multi-Instance Support: Display multiple toasts without overlap.
  • Custom Icons and Styling: Add custom icons and override styles.

Demo



Setup


  1. This library is available on npm. Install it with:
npm install react-native-toast-alerts
  1. Then, you need to install and configure the libraries that are required:
npm install react-native-gesture-handler react-native-reanimated

also, it is recommended to use react-native-vector-icons when using icons:

npm install react-native-vector-icons
  1. For iOS, ensure pod install is run inside the ios directory:
cd ios && pod install

Usage

Since react-native-toast-alerts is a customizable component, it is simple to implement and extend.

Import the Toast Component

import Toast from 'react-native-toast-alerts'; // Adjust the path based on your setup

Example Code

Here's a sample implementation to demonstrate the Toast component:

import React, { useState } from "react";
import { View, Button, ScrollView, StyleSheet } from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import Toast from "react-native-toast-alerts"; // Adjust the path based on your setup

const App = () => {
  const [toasts, setToasts] = useState([]);

  const showToast = (title, message, theme) => {
    const id = Date.now(); // Unique toast ID
    setToasts((prevToasts) => [...prevToasts, { id, title, message, theme }]);

    // Auto-dismiss after 3 seconds
    setTimeout(() => {
      setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
    }, 3000);
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Button
        title="Show Success Toast"
        onPress={() =>
          showToast("Success", "This is a success message!", "success")
        }
      />
      <Button
        title="Show Error Toast"
        onPress={() =>
          showToast("Error", "Something went wrong!", "error")
        }
      />
      <Button
        title="Show Info Toast"
        onPress={() =>
          showToast("Info", "This is an info message!", "info")
        }
      />
      <Button
        title="Show Warning Toast"
        onPress={() =>
          showToast("Warning", "Be cautious about this!", "warning")
        }
      />
      <Button
        title="Show Custom Theme Toast"
        onPress={() =>
          showToast(
            "Custom",
            "This is a custom theme toast!",
            undefined // No predefined theme
          )
        }
      />

      {toasts.map((toast) => (
        <Toast
          key={toast.id}
          id={toast.id}
          visible={true}
          onDismiss={(id) =>
            setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id))
          }
          title={toast.title}
          message={toast.message}
          theme={toast.theme}
          icon={({ color }) => <MaterialIcons name="info" size={20} color={color} />}
          closeIcon={({ color }) => (
            <MaterialIcons name="close" size={20} color={color} />
          )}
          timeout={3000}
          verticalPosition="bottom"
          horizontalPosition="center"
          direction="right"
        />
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
});

export default App;

Props

NameTypeDefaultDescription
visiblebooleanfalseControls the visibility of the toast.
onDismiss(id: number) => voidundefinedCallback when the toast is dismissed.
titlestring""Title text of the toast.
titleColorstringblueColor of the title text.
titleSizenumber16Font size of the title text.
messagestring""Message text of the toast.
messageColorstringblackColor of the message text.
messageSizenumber14Font size of the message text.
maxMessageLengthnumber100Maximum length of the message before truncating with ....
backgroundColorstringwhiteBackground color of the toast.
iconReact.ComponentType<{ color: string }>undefinedCustom component for the icon.
iconColorstringblackColor of the icon.
closeIconReact.ComponentType<{ color: string }>undefinedCustom component for the close icon.
closebooleantrueWhether the close button is shown.
timeoutnumber3000Duration (in ms) before the toast automatically disappears.
verticalPosition'top' | 'center' | 'bottom''bottom'Vertical position of the toast.
horizontalPosition'left' | 'center' | 'right''center'Horizontal position of the toast.
direction'top' | 'bottom' | 'left' | 'right''bottom'Direction of entry/exit animation.
theme'success' | 'error' | 'info' | 'warning'undefinedPredefined theme for the toast.
animationDurationnumber300Duration (in ms) of the entry and exit animations.
containerStyleStyleProp<ViewStyle>undefinedCustom styles for the toast container.
onShow(id: number) => voidundefinedCallback when the toast is shown.
onHide(id: number) => voidundefinedCallback when the toast is hidden.


Use Cases

This library can be used in a variety of mobile app scenarios to enhance user experience:

  1. Form Submission Feedback:

    • Show success messages after a form is submitted successfully.
    • Display error messages if there are validation errors or network failures.
  2. Real-Time Notifications:

    • Inform users about updates, such as new messages or alerts in a chat app.
  3. E-Commerce Applications:

    • Notify users when items are added to the cart, orders are placed, or payment is successful.
  4. Error and Debug Messages:

    • Alert users about runtime errors, such as API request failures or unresponsive features.
  5. Onboarding and Guidance:

    • Provide quick tips or guidance during onboarding without requiring modals or additional screens.
  6. Custom Alerts for Events:

    • Notify users about location-based alerts or reminders in productivity apps.
  7. Gaming Applications:

    • Display notifications for achievements, level-ups, or warnings.

Some Queries:

How do I dismiss a toast programmatically?

Use the onDismiss callback to handle the dismissal of a toast programmatically. Here's an example:

<Toast
  id={toastId}
  visible={true}
  onDismiss={(id) => handleDismiss(id)}
  title="Programmatic Dismiss"
  message="This toast will dismiss on callback."
/>

How do I add custom animations?

Use the animationIn, animationOut, and animationDuration props to customize animations. For example:

<Toast
  animationIn="fadeIn"
  animationOut="fadeOut"
  animationDuration={500}
/>

License

This library is open-source and licensed under the MIT License.

Thank you for checking out the react-native-toast-alerts! If you find this project helpful, please consider giving it a star on GitHub.

1.0.6

7 months ago

1.0.5

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago