Snackbar

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

Usage

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>
      <Snackbar
        visible={visible}
        onDismiss={onDismissSnackBar}
        action={{
          label: 'Undo',
          onPress: () => {
            // Do something
          },
        }}>
        Hey there! I'm a Snackbar.
      </Snackbar>
    </View>
  );
};

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

export default MyComponent;

Props

visible (required) Type: boolean

Whether the Snackbar is currently visible.

action Type: { label: string; accessibilityLabel?: string; onPress: () => void; }

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.

duration Type: number

Default value: 7000

The duration for which the Snackbar is shown.

onDismiss (required) Type: () => void

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

children (required) Type: React.ReactNode

Text content of the Snackbar.

wrapperStyle Type: StyleProp<ViewStyle>

Style for the wrapper of the snackbar

style Type: StyleProp<ViewStyle>

ref Type: React.RefObject<View>

theme Type: Theme

Static properties

These properties can be accessed on Snackbar by using the dot notation, e.g. Snackbar.DURATION_SHORT.

DURATION_SHORT

Show the Snackbar for a short duration.

DURATION_MEDIUM

Show the Snackbar for a medium duration.

DURATION_LONG

Show the Snackbar for a long duration.

Edit this page