Home / Components / reaction-picker

Reaction PickeriOS

iMessage-style long-press emoji bar — anchors above the message, finger-scrub selection, spring pop per emoji

$ npx lumioui add reaction-picker

import { ReactionPicker } from "@/components/ui/reaction-picker/reaction-picker";

Props5

reactions?	string[]	Emojis shown in the bar. Default 👍❤️😂😮😢🙏
onSelect?	(emoji: string) => void	Fired with the picked emoji on release.
children?	React.ReactNode	Child content the bar anchors above — typically a message bubble.
holdMs?	number	Hold duration before the bar springs in (ms). Default 280.
className?	string

Reaction Pickerchat.tsx

reaction-picker/variants/chat.tsx open

iMessage-style long-press emoji bar — anchors above the message, finger-scrub selection, spring pop per emoji

import { ReactionChat } from "@/components/ui/reaction-picker/variants/chat";

export function Example() {
  return (
    <ReactionChat />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ReactionPicker } from "../reaction-picker";
import { Ambient, Avatar, Glass, Text } from "@lumioui/ui";

/** ReactionChat — long-press Priya's message to spring the emoji bar. */
export function ReactionChat() {
  const [reaction, setReaction] = React.useState<string | null>(null);
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="reaction-picker-chat" />
      <View className="w-full gap-3 p-4">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-2.5">
            <Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=12" }} fallback="PN" alt="Priya Nair" />
            <View className="flex-1">
              <Text variant="small" className="font-semibold">Priya Nair</Text>
              <Text variant="muted" className="text-xs">Kyoto trip · 2m ago</Text>
            </View>
          </View>

          <ReactionPicker
            reactions={["❤️", "😂", "🍜", "🙌", "🔥", "😮"]}
            onSelect={setReaction}
            className="self-start max-w-[85%]"
          >
            <View>
              <Glass interactive curvature="edge" className="rounded-2xl rounded-bl-sm px-3.5 py-2.5">
                <Text variant="small">Sakura Ramen got a Michelin mention — we HAVE to go back</Text>
              </Glass>
              {reaction ? (
                <Glass interactive curvature="edge" className="absolute -bottom-3 -left-1 rounded-full px-1.5 py-0.5">
                  <Text className="text-xs">{reaction}</Text>
                </Glass>
              ) : null}
            </View>
          </ReactionPicker>

          <View className="self-end max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-3.5 py-2.5">
            <Text variant="small" className="text-primary-foreground">Already booked the train 🚄</Text>
          </View>

          <Text variant="muted" className="text-xs text-center">
            {reaction ? `You reacted ${reaction} · just now` : "Priya is online now"}
          </Text>
        </Glass>
      </View>
    </View>
  );
}