Reaction picker

Installation

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

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/reaction-picker.

Usage

import { useState } from "react";
import { Text, View } from "react-native";
import { ReactionPicker } from "@/components/goodui-native/reaction-picker/reaction-picker";

export function Update() {
  const [reaction, setReaction] = useState<string | null>(null);
  return (
    <ReactionPicker
      value={reaction}
      onValueChange={setReaction}
      count={12 + (reaction ? 1 : 0)}
    >
      <View style={{ padding: 12, borderRadius: 14 }}>
        <Text>Shipped the new onboarding</Text>
      </View>
    </ReactionPicker>
  );
}

When to use

Examples

<ReactionPicker
  reactions={[
    { key: "clap", emoji: "👏", label: "Applause" },
    { key: "fire", emoji: "🔥", label: "Fire" },
    { key: "party", emoji: "🎉", label: "Celebrate" },
  ]}
  value={reaction}
  onValueChange={setReaction}
>
  {card}
</ReactionPicker>

<ChatBubble side="sent" reaction={m.reaction} onReactionChange={(k) => react(m.id, k)}>{m.text}</ChatBubble>

API reference

Motion and haptics

• •While held the element squeezes to 0.96, then a copy lifts slightly above a dimmed backdrop.
• •The pill grows out of the element's side on the bouncy spring and each emoji springs in 28 ms after the one before it.
• •Sliding: magnification is computed on the UI thread from the finger's distance to each emoji (up to 1.6 times and 16 pt up), easing in as the finger enters the pill's band; the hovered emoji shows its name above it.
• •On release the chosen emoji flies along an arc to the badge in 460 ms, shrinking to badge size; the badge, hidden until then, pops with the bouncy spring. The space for the badge opens under the element on the snappy spring.
• •Reduced motion: no squeeze, lift, stagger or magnification (the hovered emoji grows a little to show focus); the pill fades in, the emoji does not fly and the badge fades in.

• •Haptic: tap when the pill opens
• •Haptic: select for each emoji the finger slides onto, and on the pick (haptic={false} turns them off)

• •Hit-testing and magnification run in worklets against the measured pill; React re-renders on open, on the pick and when the flight lands.
• •The overlay renders through Portal only while open.

Accessibility

• •The element exposes one action per reaction ('React with Love', or 'Remove Love reaction' for the current one) plus 'Show reactions', so screen reader users react without the gesture.
• •Its label gains 'you reacted with Love, 12 reactions' when there is a reaction (the badge itself is hidden from screen readers); picking and removing are announced.
• •On the web a label must contain the visible text, so give accessibilityLabel only when the content has no text (a photo). Text content names the element there, and 'you reacted with Love' follows as visually hidden text.
• •The pill is a menu of menu items, each 44 by 44 pt and labelled, with the current reaction marked selected.
• •On the web the element is a focusable button with a popup: right-click, the context-menu key or Shift+F10 open the pill (Enter and Space too when there is no onPress), focus moves to the first emoji when opened from the keyboard, and Escape closes it. Android's back button closes it.
• •The badge is decorative; its content is in the element's label.

Notes for AI

Related