Snackbar
The Snackbar component provides brief messages about app processes at the bottom or top of the screen. It appears temporarily and can include an optional action button for quick interactions.
It provides:
- Brief, non-intrusive messages
- Optional action button
- Auto-dismiss with configurable duration
- Customizable position (top/bottom)
- Multiple line support with ellipsis
- Theme support (light/dark/auto)
Usage Playground
import { Snackbar } from "@react-native-blossom-ui/overlays";
function Usage() {
return (
<Snackbar/>
);
}
Usage
The basic usage shows a snackbar with a message and an optional action button. The snackbar automatically dismisses after a default duration.
function SnackbarUsage() {
return (
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
})
}}>
Show Snackbar
</Button>
)
}
Duration
Control how long the snackbar stays visible using the duration prop. Set shorter durations for simple notifications or longer durations for important messages that require user attention.
function SnackbarDuration() {
return (
<View>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
duration: 500,
})
}}>
Short Lived Snackbar
</Button>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
duration: 50000,
})
}}>
Long Lived Snackbar
</Button>
</View>
)
}
Position
Display snackbar at the top or bottom of the screen. Bottom positioning is the default and follows Android default snackbar UI design, while top positioning can be useful for specific UI layouts.
function SnackbarPosition() {
return (
<View>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
position: 'top',
duration: 3000,
})
}}>
Show Top Snackbar
</Button>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
position: 'bottom',
duration: 4000,
})
}}>
Show Bottom Snackbar
</Button>
</View>
)
}
Number of Lines
Control text wrapping with the numberOfLines prop. Use single-line for brief messages with ellipsis, or multiple lines for longer content that needs to be fully visible.
function SnackbarNumberOfLines() {
return (
<View>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!'.repeat(10),
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
numberOfLines: 1,
})
}}>
Snackbar with 1 line & Ellipses
</Button>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message! '.repeat(10),
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
numberOfLines: 4,
offset: 200,
})
}}>
Long Snackbar with 4 lines
</Button>
</View>
)
}
Themes
Choose between light, dark, or auto themes. The auto theme automatically adapts to the current app theme, ensuring consistent appearance across your app.
function SnackbarThemes() {
const [theme, setTheme] = useState<SnackbarTheme>('auto')
return (
<View>
<SegmentedButton
data={[{title: 'auto'}, {title: 'light'}, {title: 'dark'}]}
onPress={(value) => {
setTheme(value as SnackbarTheme)
}}
/>
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
theme,
})
}}>
Show Snackbar
</Button>
</View>
)
}
Custom
Customize the snackbar with different colors, text styles, and action button appearances to match your app's design system.
function SnackbarCustom() {
return (
<Button
onPress={() => {
Snackbar.show({
text: 'This is a Snackbar message!',
actionText: 'Undo',
onActionPress: () => {
console.log('Snackbar action pressed!')
},
textStyle: {color: 'yellow'},
actionTextStyle: {color: 'cyan'},
containerStyle: {backgroundColor: 'purple'},
})
}}>
Show Snackbar
</Button>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | SnackbarViewProps | -- | Inherits properties from SnackbarViewProps |
| offset | number | 100 | The offset from the top or bottom of the screen where the snackbar should appear. |
| duration | number | 2000 | The duration for which the snackbar should be visible, in milliseconds.If not provided, it will default to 2000 milliseconds (2 seconds). |
| position | "top" | "bottom" | bottom | The position of the snackbar on the screen. |
| onShow | () => void | -- | Callback when a snackbar is shown |
| onHide | () => void | -- | Callback when a snackbar is going to hide |
| text | string | -- | The main message to be displayed in the snackbar. |
| textStyle | StyleProp<TextStyle> | -- | Text style for the main message in the snackbar. |
| numberOfLines | number | -- | Control the number of lines for the main message in the snackbar. |
| theme | SnackbarTheme | auto | The theme of the snackbar, which can be 'light', 'dark', or 'auto' to match the system theme. |
| actionText | string | -- | The label for the action button in the snackbar. If not provided, the action button will not be displayed. |
| actionTextStyle | StyleProp<TextStyle> | -- | Text style for the action button in the snackbar. |
| onActionPress | () => void | -- | Callback function that is called when the action button in the snackbar is pressed. |
| containerStyle | StyleProp<ViewStyle> | -- | Custom style for the snackbar container. |