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
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/toast-light.png)
Light Mode
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/toast-dark.png)
Dark Mode
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/toast-light-progress.png)
Light Mode (with progress)
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/toast-dark-progress.png)
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);