Toast

Overlay

An auto-dismissing notification with swipe-to-dismiss, action button, progress bar countdown, persistent mode, and a useToast hook.

GitHub

Installation

bash

npx native-mate add toast

Examples

#FAFAFA

Radius100%

Usage

tsx

import { useToast, ToastProvider } from '~/components/ui/toast'

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>

// Inside any component
const { show } = useToast()

show({ message: 'Saved!', variant: 'success' })
show({ message: 'Deleted', action: { label: 'Undo', onPress: handleUndo } })
show({ message: 'No internet', variant: 'warning', persistent: true })

Props

Prop	Type	Default	Description
message	string	—	Primary notification text.
description	string	—	Secondary text below the message.
variant	"default" \| "success" \| "destructive" \| "warning"	"default"	Sets the icon and color scheme.
duration	number	3000	Auto-dismiss delay in milliseconds.
position	"top" \| "bottom"	"bottom"	Screen edge.
action	{ label: string; onPress: () => void }	—	Optional action button shown in the toast.
showProgress	boolean	false	Shows a countdown progress bar at the bottom.
persistent	boolean	false	Disables auto-dismiss. Shows a close × button.
visible	boolean	—	Controls visibility.
onHide	() => void	—	Called when dismissed.

Example

tsx

import { useToast } from '~/components/ui/toast'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'

export function ToastExample() {
  const { show } = useToast()

  return (
    <View style={{ gap: 12, padding: 16 }}>
      <Button onPress={() => show({ message: 'Changes saved', variant: 'success', showProgress: true })}>
        Success (with progress)
      </Button>
      <Button variant="destructive" onPress={() => show({ message: 'Upload failed', variant: 'destructive' })}>
        Error toast
      </Button>
      <Button variant="outline" onPress={() =>
        show({ message: 'Item deleted', action: { label: 'Undo', onPress: () => {} }, duration: 4000 })
      }>
        With undo action
      </Button>
      <Button variant="outline" onPress={() =>
        show({ message: 'No internet connection', variant: 'warning', persistent: true })
      }>
        Persistent
      </Button>
    </View>
  )
}

Skeleton

Radio