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