Snackbar

Snackbar provide brief feedback about an operation through a message at the bottom of the screen.

Usage

import React from 'react';
import { Snackbar, StyleSheet } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    visible: false,
  };

  render() {
    const { visible } = this.state;
    return (
      <View style={styles.container}>
        <Button
          raised
          onPress={() => this.setState(state => ({ visible: !state.visible }))}
        >
          {this.state.visible ? 'Hide' : 'Show'}
        </Button>
        <Snackbar
          visible={this.state.visible}
          onDismiss={() => this.setState({ visible: false })}
          action={{
            label: 'Undo',
            onPress: () => {
              // Do something
            },
          }}
        >
          Hey there! I'm a Snackbar.
        </Snackbar>
      </View>
    );
  }
}

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

Props

visible (required)
Type: boolean

Whether the Snackbar is currently visible.

action
Type: { label: string, onPress: () => mixed, }

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

  • label - Label of the action button
  • onPress - Callback that is called when action button is pressed.
duration
Type: number
Default value: 3500

The duration for which the Snackbar is shown.

onDismiss (required)
Type: () => mixed

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

children (required)
Type: React.Node

Text content of the Snackbar.

style
Type: any
theme
Type: Theme

Static properties

DURATION_SHORT

Show the Snackbar for a short duration.

DURATION_LONG

Show the Snackbar for a long duration.

DURATION_INDEFINITE

Show the Snackbar for indefinite amount of time.