A slide-to-pay track whose thumb drags a glowing trail and ticks with haptics.
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 |
|---|---|---|
| label Shimmering text in the track. | string | "Slide to confirm" |
| confirmedLabel Text once completed. | string | "Confirmed" |
| onConfirm Fires at the end. Return a promise to show a spinner in the thumb; a rejection shakes the track, flashes the danger colour and slides back. | () => void | Promise<unknown> | — |
| variant Tinted track with a solid thumb, opt-in two-tone gradient track with a white thumb, transparent track with a tinted hairline, or a 48pt slim track. | "default" | "gradient" | "outline" | "compact" | "default" |
| accent Thumb, trail and track colour; only the gradient variant derives a second tone from it. | string | theme accent |
| icon Custom thumb icon. | ReactNode | animated chevrons |
| resetAfter Auto-reset after this many ms. Otherwise call ref.reset(). | number | — |
| threshold Fraction of the track that confirms on release. | number | 0.82 |
| haptics Ticks at 25 / 50 / 75 %, success on confirm, error on failure. | boolean | true |
| disabled Locks the thumb. | boolean | false |
| ref Imperative reset. | { reset(): void } | — |
| style Style for the track (merged over its height, radius and colour). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Drag past the threshold, or flick fast past the halfway point, to confirm; anything less springs back. If onConfirm returns a promise the thumb spins until it settles.
- Motion
- The thumb swells while held and a check draws on success; a rejected promise shakes the track and slides it back.
- Reduced motion
- The idle nudge and the chevron shimmer on the thumb are turned off.
- Haptics
- Selection ticks at 25, 50 and 75 percent of the drag, a medium impact on release, then a success or error notification.
- Screen readers
- A button whose label switches to confirmedLabel when done, with busy and disabled state. The 'activate' action (double tap) confirms without dragging.
Source
Did you like the content?