​
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

npx nativecn-ui add Toast

​
Usage

​
Basic usage

import { ToastProvider, ToastVariant, useToast } from './components/Toast';

function DemoToast() {
  const { toast } = useToast();

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

<ToastProvider position="top">
  <DemoToast />
</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);
Tabs