This is an illustration of Toast component.
action
variant
function Example() {
const toast = useToast()
return (
<Button
onPress={() => {
toast.show({
placement: "top",
render: ({ id }) => {
const toastId = "toast-" + id
return (
<Toast nativeID={toastId} action="attention" variant="solid">
<VStack space="xs">
<ToastTitle>New Message</ToastTitle>
<ToastDescription>
Hey, just wanted to touch base and see how you're doing.
Let's catch up soon!
</ToastDescription>
</VStack>
</Toast>
)
},
})
}}
>
<ButtonText>Press Me</ButtonText>
</Button>
)
}

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/toast

Step 2: Copy and paste the following code into your project.

import { createToast, createToastHook } from "@gluestack-ui/toast"
import {
AnimatePresence,
AnimatedView,
} from "@gluestack-style/animation-resolver"
import { styled } from "@gluestack-style/react"
import { Text, View } from "react-native"
const StyledRoot = styled(
View,
{
px: "$4",
py: "$3",
borderRadius: "$sm",
flexDirection: "row",
variants: {
action: {
error: {
bg: "$backgroundError",
borderColor: "$error300",
_icon: {
color: "$error500",
},
},
warning: {
bg: "$backgroundWarning",
borderColor: "$warning300",
_icon: {
color: "$warning500",
},
},
success: {
bg: "$backgroundSuccess",
borderColor: "$success300",
_icon: {
color: "$success500",
},
},
info: {
bg: "$backgroundInfo",
borderColor: "$info300",
_icon: {
color: "$info500",
},
},
attention: {
bg: "$backgroundMuted",
borderColor: "$secondary300",
_icon: {
color: "$secondary600",
},
},
},
variant: {
solid: {},
outline: {
borderWidth: "$1",
bg: "$white",
},
accent: {
borderLeftWidth: "$4",
},
},
},
m: "$3",
_web: {
pointerEvents: "auto",
},
defaultProps: {
hardShadow: "5",
variant: "solid",
action: "attention",
},
},
{ descendantStyle: ["_icon", "_title", "_description"] }
)
const StyledTitle = styled(
Text,
{
color: "$text700",
fontWeight: "$medium",
fontFamily: "$body",
fontStyle: "normal",
letterSpacing: "$md",
variants: {
isTruncated: {
true: {
props: {
// @ts-ignore
numberOfLines: 1,
ellipsizeMode: "tail",
},
},
},
bold: {
true: {
fontWeight: "$bold",
},
},
underline: {
true: {
textDecorationLine: "underline",
},
},
strikeThrough: {
true: {
textDecorationLine: "line-through",
},
},
size: {
"2xs": {
fontSize: "$2xs",
},
xs: {
fontSize: "$xs",
},
sm: {
fontSize: "$sm",
},
md: {
fontSize: "$md",
},
lg: {
fontSize: "$lg",
},
xl: {
fontSize: "$xl",
},
"2xl": {
fontSize: "$2xl",
},
"3xl": {
fontSize: "$3xl",
},
"4xl": {
fontSize: "$4xl",
},
"5xl": {
fontSize: "$5xl",
},
"6xl": {
fontSize: "$6xl",
},
},
sub: {
true: {
fontSize: "$xs",
},
},
italic: {
true: {
fontStyle: "italic",
},
},
highlight: {
true: {
bg: "$yellow500",
},
},
},
props: {
size: "md",
},
},
{ ancestorStyle: ["_title"] }
)
const StyledDescription = styled(
Text,
{
color: "$text700",
fontWeight: "$normal",
fontFamily: "$body",
fontStyle: "normal",
letterSpacing: "$md",
variants: {
isTruncated: {
true: {
props: {
// @ts-ignore
numberOfLines: 1,
ellipsizeMode: "tail",
},
},
},
bold: {
true: {
fontWeight: "$bold",
},
},
underline: {
true: {
textDecorationLine: "underline",
},
},
strikeThrough: {
true: {
textDecorationLine: "line-through",
},
},
size: {
"2xs": {
fontSize: "$2xs",
},
xs: {
fontSize: "$xs",
},
sm: {
fontSize: "$sm",
},
md: {
fontSize: "$md",
},
lg: {
fontSize: "$lg",
},
xl: {
fontSize: "$xl",
},
"2xl": {
fontSize: "$2xl",
},
"3xl": {
fontSize: "$3xl",
},
"4xl": {
fontSize: "$4xl",
},
"5xl": {
fontSize: "$5xl",
},
"6xl": {
fontSize: "$6xl",
},
},
sub: {
true: {
fontSize: "$xs",
},
},
italic: {
true: {
fontStyle: "italic",
},
},
highlight: {
true: {
bg: "$yellow500",
},
},
},
props: {
size: "sm",
},
},
{ ancestorStyle: ["_description"] }
)
const AnimationWrapper = styled(AnimatedView, {})
export const useToast = createToastHook(AnimationWrapper, AnimatePresence)
export const Toast = createToast({
Root: StyledRoot,
Title: StyledTitle,
Description: StyledDescription,
})
export const ToastTitle = Toast.Title
export const ToastDescription = Toast.Description

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { useToast, Toast } from "@/components/ui/Toast"
export default () => (
<Toast>
<ToastTitle />
<ToastDescription />
</Toast>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Toast

It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
duration
number or null
5000
The delay before the toast hides (in milliseconds). If set to null, toast will never dismiss.
onCloseComplete
()=>{}
-
Callback function to run side effects after the toast has closed.
placement
'top'| 'top right' | 'top left' | 'bottom' | 'bottom left' | 'bottom right'
bottom
Position of toast on the web page.
render?: (props: any)
ReactNode
-
Renders a toast component
avoidKeyboard
bool
false
If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.
containerStyle
ViewStyle
-
Container style object for the toast.
Descendants Styling Props Props to style child components.
Sx Prop
Description
_icon
Prop to style Icon Component
_title
Prop to style AlertTitle Component
_description
Prop to style AlertDescription Component

ToastTitle

Contains all Text related layout style props and actions. It inherits all the properties of React Native's Text component.

ToastDescription

Contains all Text related layout style props and actions. It inherits all the properties of React Native's Text component.

Accessibility

We have outlined the various features that ensure the Toast component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the WAI-ARIA design pattern.

Keyboard

  • Tab + Enter: Triggers the toast's action.

Screen Reader

  • VoiceOver: When the toast is focused, the screen reader will announce the toast's title.

Props

Toast component is created using View component from react-native. It extends all the props supported by React Native View, utility props and the props mentioned below.

Toast

Name
Value
Default
action
error | warning | success | info | attention
attention
variant
solid | outline | accent
solid

Spec Doc

Explore the comprehensive details of the Toast in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.