A heart, star or bookmark that pops and bursts into particles when liked.
Pro<LikeButton />5 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| liked / onChange Controlled state (or use defaultLiked). | boolean | — |
| defaultLiked Initial state when uncontrolled; `count` is the count for this state. | boolean | false |
| variant Heart, star or bookmark icon; also picks the default liked colour and label. | "heart" | "star" | "bookmark" | "heart" |
| count Shows a rolling counter (1.2K formatting). Uncontrolled: the count for defaultLiked; the component adds the user's like. | number | — |
| size Icon size. | number | 26 |
| color Liked colour (per variant default). | string | danger / warning / accent |
| particleColors Colours of the burst dots. | string[] | liked colour + theme |
| haptics Tap when liking. | boolean | true |
| disabled Blocks presses. | boolean | false |
| style Style for the pressable row holding the icon and counter. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Motion
- Liking pops the icon, fills it on a bouncy spring and throws a ring and a burst of coloured dots. The counter rolls up or down to the new number.
- Haptics
- A light impact when it is liked; un-liking is silent.
- Screen readers
- A button labelled "Like", "Favourite" or "Bookmark" (or your label), with a selected state and the count as its value.
- Touch
- Small icons get a hitSlop that brings the target up to 44pt.
Source
Did you like the content?