Snackbars provide brief feedback about an operation through a message at the bottom of the screen. Snackbar by default uses onSurface color from theme.


import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, Snackbar } from 'react-native-paper';

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

  const onToggleSnackBar = () => setVisible(!visible);

  const onDismissSnackBar = () => setVisible(false);

  return (
    <View style={styles.container}>
      <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
          label: 'Undo',
          onPress: () => {
            // Do something
        Hey there! I'm a Snackbar.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',

export default MyComponent;


Type: boolean

Whether the Snackbar is currently visible.

Type: Omit<React.ComponentProps<typeof Button>, 'children'> & { label: string; }

Label and press callback for the action button. It should contain the following properties:

  • label - Label of the action button
  • onPress - Callback that is called when action button is pressed.
Available in v5.x with theme version 3

Icon to display when onIconPress is defined. Default will be close icon.

Available in v5.x with theme version 3
Type: () => void

Function to execute on icon button press. The icon button appears only when this prop is specified.

Available in v5.x with theme version 3
Type: string
Default value: 'Close icon'

Accessibility label for the icon button. This is read by the screen reader when the user taps the button.

Type: number
Default value: 7000

The duration for which the Snackbar is shown.

Type: () => void

Callback called when Snackbar is dismissed. The visible prop needs to be updated when this is called.

Type: React.ReactNode

Text content of the Snackbar.

Available in v5.x with theme version 3
Type: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value
Default value: 2

Changes Snackbar shadow and background on iOS and Android.

Type: React.RefObject<View>
Type: ThemeProp
Edit this page