# Drip Toast — React Native component for Expo

> Toasts that drip out of the top of the screen and get sucked back in.

Toasts that drip out of the top of the screen — on an iPhone, straight out of the Dynamic Island — on a liquid strand that pinches off as the pill settles. A toast with a description or action lets a card drop out of the pill through a liquid neck, folds it back, and is sucked up into the edge when it leaves. mode="single" keeps one pill that gulps the old toast and drips out the next, so drip.promise() turns its spinner straight into the success or error card.

- Docs: https://expokit.in/docs/components/drip-toast
- Tier: Pro (ExpoKit Pro plan)
- Also called: drip toast, dynamic island toast, liquid notification
- Category: Feedback
- Platforms: iOS, Android, web
- Expo Go: yes, no development build needed
- npm dependencies: react-native-svg, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets
- Uses ExpoKit items: kit
- Variants: Stack, Single, Loading, Light Bottom

## Installation

This component is part of ExpoKit Pro. With a Pro plan, log the CLI in once and add it like any other item:

```bash
npx @expokit/cli@latest login
```

Plans: https://expokit.in/pricing

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `drip(title, options?)` | `(string, DripOptions) => id` | — | Global API. Also drip.success / error / warning / info / loading / promise / dismiss(id?). |
| `DripProvider / useDrip()` | `context` | — | Scoped queue: wrap UI + <DripToaster />, call useDrip() instead of the global drip(). |
| `options.description` | `string` | — | Drops a card out of the pill with this text. |
| `options.action` | `{ label, onPress }` | — | Button in the card (dismisses after press). |
| `options.content` | `ReactNode` | — | Your own card content instead of description / action. |
| `options.meta` | `string` | `time` | Small text beside the description (a price, a time). |
| `options.icon` | `ReactNode \| false` | `type icon` | Replace the type icon, or false for none. |
| `options.duration` | `number` | `Toaster duration` | ms before it leaves; Infinity to keep. |
| `options.id` | `string` | `auto` | Reuse to update a toast in place. |
| `options.dismissible` | `boolean` | `true` | Tap and swipe dismiss it. |
| `options.toaster` | `string` | — | Target a <DripToaster id>. |
| `<DripToaster> position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"top-center"` | Edge and side the toasts sit on. Top toasts drip out of the edge; bottom ones rise in. |
| `<DripToaster> mode` | `"stack" \| "single"` | `"stack"` | Pile toasts up (tap to fan out), or keep one pill that gulps each toast and drips out the next. |
| `<DripToaster> appearance` | `"dark" \| "light"` | `"dark"` | Island-black pill or a white one, in either app theme. |
| `<DripToaster> layout` | `"spread" \| "left" \| "center" \| "right"` | `"spread"` | Description and meta on one row, or stacked and aligned. |
| `<DripToaster> duration` | `number` | `5000` | Default time on screen in ms. |
| `<DripToaster> visibleToasts` | `number` | `3` | Toasts drawn in the stack. |
| `<DripToaster> expand` | `boolean` | `false` | Always fanned out. |
| `<DripToaster> offset / gap / inset` | `number` | `8 / 14 / 16` | Edge distance, stack spacing and side space. |
| `<DripToaster> safeArea` | `boolean` | `false` | Clear the notch and home indicator (react-native-safe-area-context's insets, when installed). |
| `<DripToaster> bottomInset` | `number` | `0` | Extra space under a bottom toaster for a tab bar. |
| `<DripToaster> radius` | `number` | `kit` | Card corner radius. |
| `<DripToaster> fill / stroke` | `string` | `appearance` | Surface colours. |
| `<DripToaster> showProgress` | `boolean` | `true` | A line that drains as time runs out. |
| `<DripToaster> showTimestamp` | `boolean` | `true` | Arrival time beside the description. |
| `<DripToaster> swipeToDismiss` | `boolean` | `true` | Swipe to dismiss. |
| `<DripToaster> haptics` | `boolean` | `true` | Notification haptic on success / warning / error. |
| `style` | `StyleProp<ViewStyle>` | — | Style for the host that fills its parent. |

## Behaviour & accessibility

- **Touch**: Tap a lone toast to dismiss it, or a stack to fan it out; swipe any way to dismiss. Timers and the drain line pause while you drag or the stack is open.
- **Motion**: At the top, a toast drips out of the edge on a strand that thins and pinches off, then a card drops out of the pill when there is more to say. Leaving, the card folds up and the pill is sucked back into the edge. In single mode the pill gulps — rises on its strand and drips back with the new toast. At the bottom, toasts rise in. Errors shake once.
- **Reduced motion**: No strand or travel: toasts fade in and out in place, the card snaps open and closed, and the error shake is skipped; fades and the spinner stay.
- **Haptics**: A success, warning or error notification when a toast of that type appears or a promise settles; turn it off with haptics={false}.
- **Screen readers**: Each toast is an alert in a polite live region, labelled by its title and description, with an escape action to dismiss it.

## FAQ

### How do I make a drip toast in React Native?

Use ExpoKit's Drip Toast, a Pro component: with ExpoKit Pro, the ExpoKit CLI copies a ready-made drip toast into your Expo or React Native app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go.

### Does Drip Toast work in Expo Go?

Yes. Drip Toast runs in Expo Go on iOS and Android with no development build — its packages (react-native-svg, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets) are all included in Expo Go.

### How do I add Drip Toast to my Expo app?

With ExpoKit Pro, add it with the ExpoKit CLI: it copies the component's source into your app and installs react-native-svg, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets, so the code is yours to change. The install command is on this page for Pro members.

### Is Drip Toast free?

Drip Toast is part of ExpoKit Pro. With a Pro plan, log the CLI in once and it installs the full source into your app.

### Can I change how Drip Toast looks?

Yes. It takes its colours, radius and light / dark mode from useKit(), so wrapping your app in <KitProvider accent radius> re-skins it with every other ExpoKit component. The code lives in your project, so you can also edit anything directly.

## More

- Live preview, variants and code: https://expokit.in/docs/components/drip-toast
- Every ExpoKit component, screen, template and chart: https://expokit.in/llms.txt
- Install commands and props for every free component: https://expokit.in/llms-full.txt
- Pricing: https://expokit.in/pricing