# Coming from react-hot-toast

> What carries over from the web library, and what is different.

react-hot-toast renders DOM elements, so it runs only on the web; it cannot
render in a native app. This package rebuilds its API on native views, so toast
code written for a React web app ports by changing the import:

```diff
- import toast, { Toaster } from 'react-hot-toast';
+ import toast, { Toaster } from 'expo-hot-toast';
```

## The same

`toast`, `toast.success`, `toast.error`, `toast.loading`, `toast.custom`,
`toast.promise`, `toast.dismiss`, `toast.remove`, `<Toaster>` with
`position`, `toastOptions` (including per-type buckets) and `reverseOrder`,
`<ToastBar>` inside the Toaster's render function, `iconTheme`, `removeDelay`,
`resolveValue` and `useToaster`.

## Different

| react-hot-toast | expo-hot-toast |
|---|---|
| `className` | No CSS here: use `style`, `textStyle` and `theme` |
| `ariaProps` | `accessibilityLabel` and `important` |
| Up to 20 toasts on screen | 3 per position (`visibleToasts`); the rest queue instead of being dropped |
| `gutter` | `gap` (`gutter` still works) |
| `toastLimit` | `visibleToasts` (`toastLimit` still works) |
| `useToaster(toastOptions, toasterId)` | `useToaster({ toastOptions, toasterId })` |
| `calculateOffset`, `updateHeight` | Not needed: layout places toasts |
| `iconTheme.secondary` fills the icon's mark | Accepted, unused: the built-in glyphs are single strokes |

## New

Things react-hot-toast does not have:

- [`action`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/actions.md) buttons and a [`closeButton`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/actions.md#a-close-button)
- [Rich toasts](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/rich-toasts.md): progress bars, steps, expandable details, Undo countdowns, notifications, banners, a HUD and the island
- `toast.info`, `toast.warning` and [`toast.update`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/toast-api.md#toastupdate)
- [Presets, animations, your own icons, a style or class for each part, and theme adapters](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/customizing.md)
- [Swipe to dismiss](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/actions.md#swipe-to-dismiss), and press and hold to pause
- A [`description`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/toast-types.md#a-description) line, [`richColors`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/theming.md#rich-colours) and a [collapsed stack](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/positions.md#a-collapsed-stack)
- [`dedupeKey`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/timing-and-queue.md#deduplication)
- [`onDismiss`](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/toast-types.md#dismiss-and-remove) with a reason
- Duration presets: `'short'`, `'long'`, `'infinite'`
- A [queue](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/timing-and-queue.md#the-visible-limit) with `maxPending` and `dropPolicy`
- Liquid Glass on iOS 26, and [screen reader, Reduce Motion and text size support](https://vanitascaesar1.github.io/expo-hot-toast/docs/md/accessibility.md)