React Native Toast Alerts

A customizable toast notification library for React Native that provides an easy way to show success, error, and info messages.

Features

• 🚀 Easy to use with a simple hook
• 🎨 Fully customizable appearance
• 🔄 Swipe to dismiss
• 📱 Safe area compatible
• 📝 TypeScript support
• 🧩 Zero additional dependencies (apart from zustand)

Installation

npm install @hovecapital/react-native-toast-alerts

or

yarn add @hovecapital/react-native-toast-alerts

Peer Dependencies

This library requires the following peer dependencies:

npm install react-native-safe-area-context

or

yarn add react-native-safe-area-context

Usage

1. Wrap your app with ToastProvider:

import { ToastProvider } from '@hovecapital/react-native-toast-alerts';

const App = () => {
  return (
    <ToastProvider>
      {/* Your app content */}
    </ToastProvider>
  );
};

2. Use the toast in any component:

import { useToast } from 'react-native-toast-alerts';

const MyComponent = () => {
  const { showToast } = useToast();

  const handleButtonPress = () => {
    // Show a success toast
    showToast('Operation successful!', 'success');
    
    // Show an error toast
    showToast('Something went wrong', 'error');
    
    // Show an info toast with custom duration (in milliseconds)
    showToast('You must accept the terms and conditions', 'info', 5000);
  };

  return (
    <Button title="Show Toast" onPress={handleButtonPress} />
  );
};

Customization

You can customize the appearance of the toasts by passing a styles prop to the ToastProvider:

import { ToastProvider } from '@hovecapital/react-native-toast-alerts';

const App = () => {
  const customStyles = {
    container: {
      // Custom container styles
    },
    toast: {
      // Custom toast styles
    },
    text: {
      // Custom text styles
    },
    colors: {
      success: '#00C851', // Custom success color
      error: '#FF4444',   // Custom error color
      info: '#33B5E5',    // Custom info color
      text: '#FFFFFF',    // Custom text color
    },
  };

  return (
    <ToastProvider 
      styles={customStyles}
      position="top"         // 'top' or 'bottom'
      maxToasts={3}          // Maximum number of toasts to show at once
      defaultDuration={3000} // Default duration in milliseconds
    >
      {/* Your app content */}
    </ToastProvider>
  );
};

API Reference

ToastProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | styles | ToastStyles | {} | Custom styles for the toasts | | position | 'top' \| 'bottom' | 'top' | Position of the toasts | | maxToasts | number | 3 | Maximum number of toasts to show at once | | defaultDuration | number | 3000 | Default duration in milliseconds |

useToast Hook

The useToast hook returns an object with the following methods:

| Method | Parameters | Description | |--------|------------|-------------| | showToast | (message: string, type?: 'success' \| 'error' \| 'info', duration?: number) | Shows a toast notification |

License

MIT