Incubator.Toast
A toast component for displaying non-disruptive messages to the user
(code example)
#
Usage<Toast visible={isVisible} position={'top'} autoDismiss={5000} onDismiss={onDismiss}>
#
API#
actionA single action for the user (showLoader will override this)
ButtonProps
#
autoDismissTime of milliseconds to automatically invoke the onDismiss callback
number
#
backgroundColorThe toast background color
string
#
centerMessageShould message be centered in the toast
boolean
#
containerStyleToast container style
ViewStyle
#
elevation#
Android onlyCustom elevation
number
#
enableHapticFeedbackWhether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency)
boolean
#
iconA custom icon to render on the left side of the toast
ImageSourcePropType
#
iconColorThe icon color
string
#
messageToast message
string
#
messagePropsToast message props
TextProps
#
messageStyleToast message style
StyleProp<TextStyle>
#
onAnimationEndCallback for end of toast animation
(visible?: boolean) => void
#
onDismissCallback for the toast dismissal
() => void
#
positionThe position of the toast. 'top' or 'bottom'.
'top' | 'bottom'
#
presetPass to have preset UI
ToastPreset ('success' | 'failure' | 'general' | 'offline')
#
renderAttachmentRender a custom view that will appear permanently above or below a Toast, depends on the Toast's position and animate with it when the Toast is made visible or dismissed
() => JSX.Element | undefined
#
showLoaderWhether to show a loader
boolean
#
styleToast style
ViewStyle
#
swipeableWhether to support dismissing the toast with a swipe gesture. Requires to pass onDismiss method to control visibility
boolean
#
testIDThe component test id
string
#
visibleWhether to show or hide the toast
boolean
#
zIndexCustom zIndex for toast
number