​
Overview

Toast is a React Native component designed to provide quick feedback in the form of a temporary, dismissible message. It can be customized based on various variants such as default, success, destructive, and info.

​
Preview

Light Mode

Dark Mode

Light Mode (with progress)

Dark Mode (with progress)

​
Installation

  1. Ensure you have both the Toast and ToastContext in your Components folder.
  2. Wrap your main component, or the part of your app where you want to use the toast, with the ToastProvider.
  3. Import and use the useToast hook to get access to the toast function.

​
Usage

​
Basic usage

export function ExampleButtonComponent() {
  const { toast } = useToast();

  return (
    <Button
      label="Show Default Toast"
      onPress={() => {
        toast('This is a default toast');
      }}
    />
  );
}

// Wrapping the ExampleButtonComponent with ToastProvider
<ToastProvider position="top">
  <ExampleButtonComponent />
</ToastProvider>;

​
Custom Usage

// with variant, duration
toast('This is a success toast', 'success', 4000);

// with variant, duration, showProgress
toast('This is a success toast', 'success', 4000, true);
TabsToggle