docs/public/1.0/snackbar.html
Snackbar provide brief feedback about an operation through a message at the bottom of the screen.
import React from 'react';
import { StyleSheet } from 'react-native';
import { Snackbar } 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',
},
});
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 contain the following properties:
label - Label of the action buttononPress - 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
Show the Snackbar for a short duration.
Show the Snackbar for a long duration.
Show the Snackbar for indefinite amount of time.