Components
Toast
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
- Ensure you have both the Toast and ToastContext in your
Components
folder. - Wrap your main component, or the part of your app where you want to use the toast, with the
ToastProvider
. - Import and use the
useToast
hook to get access to thetoast
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);