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.


Light Mode

Dark Mode

Light Mode (with progress)

Dark Mode (with progress)


npx nativecn-ui add Toast 


Basic usage

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

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

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

<ToastProvider position="top">
  <DemoToast />

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);