React-Native-Toastbox

A toast notification system for React Native applications. This system supports different types of toasts (info, error, and success) and has built-in animations to enhance user experience.

Table of Contents

• Installation
• Usage
  • Wrap your App with ToastProvider
  • Use the useToast hook
• API
  • Toast Customization
• Contributing
• License

Installation

//To do

Usage

Wrap your App with ToastProvider

To get started, you must wrap the part of your application where you want to display toasts with the ToastProvider.

1import { ToastProvider } from 'react-native-toastbox';
2
3function Section() {
4  return (
5    <ToastProvider>
6      {/* children */}
7    </ToastProvider>
8  );
9}

Use the useToast hook

Wherever you want to display a toast, use the useToast hook.

1import { useToast } from './path-to-your-toast-files';
2
3function MyComponent() {
4  const { showToast, hideToast } = useToast();
5
6  const handleClick = () => {
7    showToast({
8      id: 'unique-id',
9      text1: 'This is a toast!',
10    });
11  };
12
13  return <Button onClick={handleClick}>Show Toast</Button>;
14}

API

Toast Customization

Modifiable attributes of a toast.

1type Toast = {
2  id: string;
3  type?: 'info' | 'error' | 'success';
4  text1: string;
5  text2?: string;
6  autoHide?: boolean;
7  visibilityTime?: number;
8  animationConfig?: {
9    duration?: number;
10    tension?: number;
11    friction?: number;
12  };
13};
14

Contributing

We welcome contributions! If you find a bug or want to add a feature, please open an issue or submit a pull request.

License

MIT