Toast

Extends: Animatable.View
(meaning you can pass the super component's props as well).

PROPS

namedescriptiontypedefault
visibleWhether to show or hide the toastbool
positionThe position of the toast. top or bottomenum'top'
heightThe height of the toastnumber
backgroundColorThe background color of the toaststring
colorthe toast content color (message, actions labels)stringColors.white
messagethe toast messagestring
messageStylea custom style for the toast messageunion
icona left iconnumber
actionsone or two actions for the user to display in the toastarrayOf
onDismisscallback for dismiss actionfunc
autoDismissnumber of milliseconds to automatically invoke the onDismiss callbacknumber
allowDismissshow dismiss actionbool
onAnimationEndcallback for end of component animationfunc
renderContentrender a custom toast content (better use with StyleSheet.absoluteFillObject to support safe area)func
centerMessageshould message be centered in the toastbool
animatedshould the toast appear/disappear with animationbooltrue
enableBlurenable blur effect for Toastbool
blurOptionsblur option for blur effect according to react-native-blur lib (make sure enableBlur is on)object
zIndexcustom zIndex for toastnumber100

LIVE EXAMPLE

CODE SAMPLE

See example here.