React-native-toastbox NPM

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.

demo

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.

import { ToastProvider } from 'react-native-toastbox';

function Section() {
  return (
    <ToastProvider>
      {/* children */}
    </ToastProvider>
  );
}

Use the useToast hook

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

import { useToast } from './path-to-your-toast-files';

function MyComponent() {
  const { showToast, hideToast } = useToast();

  const handleClick = () => {
    showToast({
      id: 'unique-id',
      text1: 'This is a toast!',
    });
  };

  return <Button onClick={handleClick}>Show Toast</Button>;
}

API

Toast Customization

Modifiable attributes of a toast.

type Toast = {
  id: string;
  type?: 'info' | 'error' | 'success';
  text1: string;
  text2?: string;
  autoHide?: boolean;
  visibilityTime?: number;
  animationConfig?: {
    duration?: number;
    tension?: number;
    friction?: number;
  };
};