Like button

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/like-button.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/like-button.

Usage

import { LikeButton } from "@/components/goodui-native/like-button/like-button";

export function PostActions({ post }: { post: Post }) {
  return (
    <LikeButton
      defaultLiked={post.likedByMe}
      count={post.likes}
      format={{ notation: "compact" }}
      onLikedChange={(liked) => api.setLike(post.id, liked)}
    />
  );
}

When to use

Examples

<LikeButton variant="soft" tone="danger" size="sm" count={12} defaultLiked={false} />

<LikeButton
  liked={starred}
  onLikedChange={async (next) => {
    await api.star(repo, next);
    setStarred(next);
  }}
  accessibilityLabel="Star"
  icon={({ liked, color, size }) => <StarIcon filled={liked} color={color} size={size} />}
/>

API reference

Motion and haptics

• •Like: the icon drops to 0.55 and springs back on the bouncy spring while the filled icon crossfades in; a ring expands from 0.4 to 1.6 and fades, and eight particles in long and short rays fly out, slow down and fade over 600 ms.
• •Unlike: the icon dips to 0.82 and returns on the snappy spring, no burst.
• •The count rolls through rolling-number: up on like, down on unlike or rollback.
• •Press scales the button to 0.94 from touch down; a rejected request shakes it.
• •The animation plays whenever the shown state changes, including a `liked` prop set from elsewhere (for example a double tap on a photo).
• •Reduced motion: no burst, ring, squash, press scale or shake; the icon crossfades and the count changes in place.

• •Haptic: pop on toggle (configurable with the haptic prop)
• •Haptic: error when the request rejects

• •The burst is nine views driven by one shared value on the UI thread, mounted only when burst is on and motion is not reduced.
• •React renders on toggle, on settle and when count changes.

Accessibility

• •Role button with accessibilityLabel (default 'Like'); selected in accessibilityState says whether it is liked; busy while the request is pending.
• •The formatted count is the accessibilityValue; the rolling digits are hidden.
• •A failed request is announced: 'Couldn't update. Try again.'
• •A vertical hitSlop brings the target to 44 pt.
• •On the web it is a toggle (aria-pressed) named by visually hidden text that includes the count ('Like, 1,284'), so the name always matches what is on screen.

Notes for AI

Related