REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

Snackbar

A brief notification bar with an optional action button.

Example

Preview

Code

Props

Snackbar Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the snackbar container.

action

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

'info'

The semantic action color of the snackbar.

isVisible

boolean

false

Controls whether the snackbar is displayed.

SnackbarText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the snackbar message text.

SnackbarActionButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the snackbar action button.

onPress

() => void

—

Callback invoked when the action button is pressed.

Usage Guidelines

When to use

Use Snackbar for brief, non-intrusive messages with an optional undo or retry action.

Best practices

•

Keep snackbar messages short and actionable.

•

Auto-dismiss after 4-6 seconds unless the snackbar has an action button.

•

Use Toast for messages that do not require an action; use Snackbar when an action is needed.

Accessibility

Snackbar is announced as a live region. Screen readers will announce the message text when it appears.

Related Components

Toast

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

Alert

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

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License