REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

Toast

A compound notification component for displaying brief, auto-dismissing messages via ToastProvider and the useToast hook.

Example

Preview

Code

Props

Toast Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the toast container.

status

'info' | 'success' | 'warning' | 'error'

'info'

The semantic status that determines the toast color scheme.

variant

'solid' | 'subtle' | 'outline'

'solid'

The visual variant of the toast.

ToastTitle Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the toast title text.

ToastDescription Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the toast description text.

Usage Guidelines

When to use

Use Toast for non-blocking success, info, or error notifications that disappear automatically.

Best practices

•

Use for brief, non-blocking notifications that auto-dismiss.

•

Match the status to the notification type (success for confirmations, error for failures).

•

Avoid showing multiple toasts simultaneously.

Accessibility

Toast notifications are announced by screen readers via live regions. Keep messages brief for quick comprehension.

Related Components

Alert

A compound feedback component for displaying contextual messages with status-based styling, optional icons, and close buttons.

Modal

A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.

Badge

A compound component for displaying short status labels, counts, or tags with semantic color and variant options.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License