Theme tokens: expo-hot-toast docs

Override any of these with <Toaster theme> or a toast’s theme option. See Theming for how.

Surface

fallbackBackgroundLight: #FFFFFFDark: #2C2C2E

Fill of the opaque surface

backgroundLight: rgba(255,255,255,0.72)Dark: rgba(28,28,30,0.72)

Fill of the frosted glass on the web

borderLight: rgba(255,255,255,0.6)Dark: rgba(255,255,255,0.14)

Border of the opaque surface and the frosted glass

frostBlurLight: 18Dark: same

Web only: backdrop blur, in px

frostSaturationLight: 180Dark: same

Web only: backdrop saturation, in percent

frostHighlightLight: rgba(255,255,255,0.9)Dark: rgba(255,255,255,0.3)

Web only: light in the glass rim

borderWidthLight: 0 on 3x screens, else 1Dark: same

radiusLight: 22Dark: same

Corner radius

shadowColorLight: #000000Dark: same

Opaque surface and frosted glass

shadowOpacityLight: 0.12Dark: 0.3

shadowRadiusLight: 16Dark: same

shadowOffsetYLight: 6Dark: same

elevationLight: 8Dark: same

Android shadow

Liquid Glass draws its own material and ignores the fill, border and shadow.

Layout

paddingVerticalDefault: 14

paddingHorizontalDefault: 18

maxWidthDefault: 340

A toast grows with its message up to this width

gapDefault: 10

Space between the icon, message and buttons

iconSizeDefault: 22

fillDefault: false

true stretches the toast to its stack’s width, as a snackbar does

Text

colorLight: #1c1c1eDark: #f2f2f7

Message and spinner

fontSizeLight: 15Dark: same

lineHeightLight: 20Dark: same

fontWeightLight: '500'Dark: same

maxFontSizeMultiplierLight: 2Dark: same

Cap on system text size; null removes it

descriptionColorLight: rgba(60,60,67,0.78)Dark: rgba(235,235,245,0.68)

The description line

descriptionFontSizeLight: 13Dark: same

descriptionLineHeightLight: 18Dark: same

fontFamilyLight: systemDark: same

The message’s font

descriptionFontFamilyLight: fontFamilyDark: same

actionFontFamilyLight: fontFamilyDark: same

The action and cancel labels

maxLinesLight: 3Dark: same

Lines of message before it truncates; 0 for no limit

descriptionMaxLinesLight: 3Dark: same

With Bold Text on (iOS), every weight steps up one notch, as system text does.

Buttons

actionColorLight: #0A84FFDark: same

Action button label

actionPaddingHorizontalLight: 12Dark: same

closeButtonBackgroundLight: rgba(0,0,0,0.07)Dark: rgba(255,255,255,0.18)

Circle behind the ×

Rich colours

Used by toasts with richColors. Override one field without losing the rest: theme={{ rich: { error: { tint: 'rgba(255,0,0,0.3)' } } }}.

rich.success.backgroundLight: #ECFDF3Dark: #032313

Opaque surface

rich.success.borderLight: #BFF5D6Dark: #0B4425

rich.success.colorLight: #00702ADark: #5FE39A

Message and description

rich.success.tintLight: rgba(52,199,89,0.22)Dark: rgba(48,209,88,0.26)

Tint over Liquid Glass and frosted glass

rich.error.backgroundLight: #FFF0F0Dark: #2E0809

rich.error.borderLight: #FFD9DADark: #561317

rich.error.colorLight: #C8000FDark: #FF8F92

rich.error.tintLight: rgba(255,59,48,0.22)Dark: rgba(255,69,58,0.26)

rich.info.backgroundLight: #EEF6FFDark: #06203D

rich.info.borderLight: #C9E2FFDark: #0E3A6B

rich.info.colorLight: #0058C4Dark: #7DB9FF

rich.info.tintLight: rgba(10,132,255,0.2)Dark: rgba(10,132,255,0.26)

rich.warning.backgroundLight: #FFF8EBDark: #2B1B02

rich.warning.borderLight: #FFE2B0Dark: #4D3205

rich.warning.colorLight: #9A5B00Dark: #FFC56B

rich.warning.tintLight: rgba(255,159,10,0.24)Dark: rgba(255,159,10,0.28)

Motion

Durations are in milliseconds. Set any subset with theme={{ motion: { … } }}.

enterDefault: 350

Enter animation

exitDefault: 400

Exit animation

queueShiftDefault: 230

The stack moving when a toast joins or leaves

iconPopDefault: 300

Icon pop

iconPopDelayDefault: 120

Delay before the icon pops

staggerDefault: 320

Extra time per position further from the edge

staggerMaxDefault: 900

Cap on that extra time

enterTranslateDefault: 0.2

Enter travel, as a fraction of the toast’s height

exitTranslateDefault: 0.15

Exit travel

enterScaleDefault: 0.6

Scale a toast enters from

exitScaleDefault: 0.6

Scale a toast leaves to

enterEasingDefault: Easing.bezier(0.21, 1.02, 0.73, 1)

Overshoots slightly, as react-hot-toast does

exitEasingDefault: Easing.bezier(0.06, 0.71, 0.55, 1)

Decelerates, without a bounce

iconEasingDefault: Easing.bezier(0.175, 0.885, 0.32, 1.275)

Easings are Reanimated easing functions.