Snackbar
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
Snackbar by default uses 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
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 buttononPress
- Callback that is called when action button is pressed.
icon
Available in v5.x with theme version 3
Type:
IconSource
Icon to display when onIconPress
is defined. Default will be close
icon.
onIconPress
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.
iconAccessibilityLabel
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:
() => void
Callback called when Snackbar is dismissed. The visible
prop needs to be updated when this is called.
elevation
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