Snackbar

Brief messages about app processes displayed at the bottom of the screen.

Import

tsx

import { Snackbar } from '@tac-ui/native';

Playground

Interactively configure the Snackbar props below.

This is a snackbar message.

Variant

Message

tsx

<Snackbar
  variant="default"
  message="This is a snackbar message."
  visible
  onDismiss={() => setVisible(false)}
/>

Variants

Five semantic variants communicate the nature of the notification: default, success, error, warning, and info. Non-default variants show a colored dot indicator.

Default notification.

Item has been saved successfully.

Failed to delete item. Please try again.

Storage is almost full.

New version available. Refresh to update.

tsx

<Snackbar variant="default" message="Default notification." visible />
<Snackbar variant="success" message="Item has been saved successfully." visible />
<Snackbar variant="error" message="Failed to delete item. Please try again." visible />
<Snackbar variant="warning" message="Storage is almost full." visible />
<Snackbar variant="info" message="New version available. Refresh to update." visible />

Interactive

Toggle the visible prop to trigger the spring entrance and fade exit animations. Use a Pressable or Button to show the snackbar on demand.

tsx

const [visible, setVisible] = React.useState(false);

<Pressable onPress={() => setVisible(true)}>
  <Text>Show Snackbar</Text>
</Pressable>

<Snackbar
  variant="success"
  message="Item has been saved successfully."
  visible={visible}
  duration={3000}
  onDismiss={() => setVisible(false)}
/>

With Action

Pass an action label and onPress handler to render an inline action button alongside the message.

Item moved to trash.

Undo

tsx

<Snackbar
  message="Item moved to trash."
  variant="default"
  visible
  action={{ label: 'Undo', onPress: () => console.log('Undo pressed') }}
/>

With Icon

Pass an icon node to render it before the message text. Use any React Native compatible icon component.

tsx

import { CheckCircle } from '@tac-ui/icon-native';

<Snackbar
  variant="success"
  message="Profile updated successfully."
  icon={<CheckCircle size={16} color="green" />}
  visible
/>

Dismissible

Set dismissible along with an onDismiss handler to render a close button at the trailing edge of the snackbar.

This can be manually dismissed.

tsx

<Snackbar
  message="This can be manually dismissed."
  visible
  dismissible
  onDismiss={() => console.log('dismissed')}
/>

API Reference

Prop	Type	Default	Description
message	string	-	The notification text displayed in the snackbar.
variant	"default" \| "success" \| "error" \| "warning" \| "info"	"default"	Visual style variant of the snackbar.
visible	boolean	true	Controls visibility. Animates in on true, out on false.
duration	number	4000	Auto-dismiss delay in milliseconds. Set to 0 to disable auto-dismiss.
onDismiss	() => void	-	Called after the auto-dismiss duration elapses or when the dismiss button is pressed.
action	{ label: string; onPress: () => void }	-	Action button rendered to the right of the message.
icon	React.ReactNode	-	Optional icon node rendered before the message.
dismissible	boolean	-	When true, renders a close button at the trailing edge. Requires onDismiss to function.
style	ViewStyle	-	Additional styles applied to the animated container.