Saltar al contenido principal

Snackbar

Mensajes en cola abajo (o arriba) con acción opcional. Monta SnackbarProvider una vez y usa useSnackbar() debajo. Se muestran uno tras otro. call useSnackbar() anywhere below it. Messages are shown one after another.

API

const {show, hide, clear} = useSnackbar();

show('Saved'); // returns an id
show({text: 'Deleted', action: {text: 'Undo', onPress}, duration: 5000});
hide(); // hides the current one
hide(id); // removes a specific one (queued or shown)
clear(); // drops the queue

SnackbarProvider props

NombreTipoPor defectoDescripción
position'top' | 'bottom'bottomWhere snackbars appear.
offsetnumber24Distance from the screen edge.
durationnumber3000Default auto-hide in milliseconds.
testIDstringRoot testID (${testID}-action for the action).

show() options

NombreTipoPor defectoDescripción
textstringMessage.
durationnumberprovider durationAuto-hide. 0 keeps it until dismissed.
action{text: string; onPress: () => void}Action button. Pressing it hides the snackbar.
iconIconPropLeading icon.
backgroundColorstring#1F2937Background.
textColorstring#FFFFFFText color.
actionColorstringtheme primaryAction text color.