@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/components/MessageBubble/Message.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Animated,
   View,
   Pressable,
   StyleSheet,
@@ -14,6 +15,7 @@ import { Avatar } from './Avatar';
 import MessageInteractions from './MessageInteractions';
 import { BottomReplyContainer } from './BottomReplyContainer';
 import { MessageReply } from './MessageReply';
+import { parseMessageReference } from '../../helpers/parseMessageReference';
 import { DeletedMessage } from './DeletedMessage';
 import {
   setActiveModal,
@@ -38,7 +40,10 @@ import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
-import { MessageFooter } from '../styled/StyledComponents';
+import { EmojiPickerSheet } from './EmojiPickerSheet';
+import { reactionsEnabled } from '../../helpers/reactionsConfig';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { hapticTap } from '../../helpers/haptics';
 import { useTheme } from '../../hooks/useTheme';
 
 const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
@@ -141,6 +146,20 @@ const CustomTimestampRow = styled.View<{media: boolean}>`
   padding-right: ${({media}) => media ? '10px': 0};
 `;
 
+const clockCache = new Map<string, string>();
+const formatClock = (date: string | Date): string => {
+  const key = String(date);
+  const cached = clockCache.get(key);
+  if (cached !== undefined) {return cached;}
+  const d = new Date(date);
+  const label = Number.isNaN(d.getTime())
+    ? ''
+    : `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  if (clockCache.size > 5000) {clockCache.clear();}
+  clockCache.set(key, label);
+  return label;
+};
+
 const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
@@ -222,10 +241,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const { retryMessage } = useSendMessage();
 
   const [isPressed, setIsPressed] = useState(false);
-
-  if (__DEV__ && message.id && !(globalThis as any).__loggedMsg?.[message.id]) {
-    ((globalThis as any).__loggedMsg ||= {})[message.id] = true;
-  }
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
   const [contextMenuPosition, setContextMenuPosition] = useState<{
     left: number;
@@ -243,15 +259,20 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     dispatch(setSelectedUser(user));
   };
 
+  const replyRef = parseMessageReference(message);
+
   const handleReplyMessage = () => {
     dispatch(setEditAction({ isEdit: false }));
 
-    if (!isReply && message.mainMessage) {
-      const messageCore = JSON.parse(message.mainMessage);
+    // An in-channel reply opens its PARENT's thread.
+    const parent = !isReply ? parseMessageReference(message) : null;
+    if (parent) {
       dispatch(
-        setActiveMessage({ id: messageCore.id, chatJID: messageCore.roomJid })
+        setActiveMessage({
+          id: parent.id,
+          chatJID: parent.roomJid || message.roomJid,
+        })
       );
-
       return setIsPressed(false);
     }
 
@@ -290,37 +311,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // };
 
   const handleReactionMessage = (emoji: string) => {
-    if (!message.reaction) {
-      return client?.sendMessageReactionStanza(
-        message.id,
-        message.roomJid,
-        [emoji],
-        `${user.firstName} ${user.lastName}` as any
-      );
-    }
-    if (
-      message.reaction &&
-      message.reaction[user.xmppUsername || ''] &&
-      message.reaction[user.xmppUsername || '']?.emoji.includes(emoji)
-    ) {
-      const filterEmoji = message.reaction[user.xmppUsername || '']?.emoji.filter(
-        (reaction: any) => reaction !== emoji
-      );
-
-      return client?.sendMessageReactionStanza(
-        message.id,
-        message.roomJid,
-        filterEmoji,
-        `${user.firstName} ${user.lastName}` as any
-      );
-    }
-
-    client?.sendMessageReactionStanza(
-      message.id,
-      message.roomJid,
-      [...(message.reaction[user.xmppUsername || '']?.emoji || []), emoji],
-      `${user.firstName} ${user.lastName}` as any
-    );
+    if (!reactionsEnabled(config) || config?.disableInteractions) {return;}
+    const sender = { firstName: user.firstName, lastName: user.lastName };
+    const own = message.reaction?.[user.xmppUsername || '']?.emoji || [];
+    const next = own.includes(emoji)
+      ? own.filter((reaction) => reaction !== emoji)
+      : [...own, emoji];
+    client?.sendMessageReactionStanza(message.id, message.roomJid, next, sender);
   };
 
   // Long-press → capture the bubble's on-screen bounding box. The actual
@@ -363,6 +360,38 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     setIsPressed(true);
   };
 
+  // Long-press is a NATIVE recognizer over the whole bubble column, not the
+  // Pressable's JS timer: the timer was lost whenever an inner responder
+  // (link text, media, reply quote, reactions) took the touch first, or the
+  // list stole it on the slightest drift — "works every other time". The
+  // recognizer fires wherever the finger lands, and once it does the touch
+  // is cancelled for everything underneath, so no tap handler fires on top.
+  const longPress = useMemo(
+    () =>
+      Gesture.LongPress()
+        .runOnJS(true)
+        .minDuration(350)
+        .maxDistance(12)
+        .enabled(!config?.disableInteractions)
+        .onStart(() => {
+          hapticTap();
+          handleLongPress();
+        }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config?.disableInteractions]
+  );
+
+  // The bubble lifts a touch while its menu is open, and settles back.
+  const lift = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    Animated.spring(lift, {
+      toValue: isPressed ? 1.03 : 1,
+      useNativeDriver: true,
+      speed: 30,
+      bounciness: 6,
+    }).start();
+  }, [isPressed, lift]);
+
   // Body text size/weight is set on the parser's leaf <Text>s — the markdown
   // wraps content in <View>s which break Text-style inheritance, so the bubble
   // wrapper's fontSize alone never reached the actual text.
@@ -383,13 +412,19 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const bodyToRender = showInlineTranslation
     ? translationDisplay.displayText
     : message.body;
-  const messageText = config?.messageTextFilter?.enabled
-    ? parseMessageBody(
-        config?.messageTextFilter.filterFunction(bodyToRender),
-        bodyTextStyle,
-        theme
-      )
-    : parseMessageBody(bodyToRender, bodyTextStyle, theme);
+  const textFilter = config?.messageTextFilter;
+  const messageText = useMemo(
+    () =>
+      textFilter?.enabled
+        ? parseMessageBody(
+            textFilter.filterFunction(bodyToRender),
+            bodyTextStyle,
+            theme
+          )
+        : parseMessageBody(bodyToRender, bodyTextStyle, theme),
+    [textFilter, bodyToRender, bodyTextStyle, theme]
+  );
+  const timeLabel = useMemo(() => formatClock(message.date), [message.date]);
 
   const isFailed = failedIdSet.has(message.id);
   const isPending =
@@ -408,12 +443,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           styles.customMessageContainer,
           {
             justifyContent: isUser ? 'flex-end' : 'flex-start',
-            marginBottom: !!message?.reply?.length || message?.reaction && !!Object.keys(message?.reaction)?.length
-             ? 20 : 0,
+            marginBottom: 0,
           },
-          isPressed
-            ? { transform: [{ scale: 1.05 }], paddingRight: 16 }
-            : undefined,
           // justify-content: ${({ isUser }) => (isUser ? "flex-end" : "flex-start")},
           // margin-bottom: ${(props) => !!props.reply && "20px"},
         ]}
@@ -441,6 +472,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             )}
           </CustomMessagePhotoContainer>
         )}
+        <GestureDetector gesture={longPress}>
         <Pressable
           // The Pressable fills the row's content area, so the bubble
           // inside must be aligned to the sender's side — otherwise it
@@ -462,13 +494,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           // fire when onLongPress fires, so opening MessageInteractions via
           // long-press never triggers this dismiss.
           onPress={() => Keyboard.dismiss()}
-          // disableInteractions hides the long-press → context menu
-          // (delete / edit / reply / react). Mirrors web's config gate.
-          onLongPress={
-            config?.disableInteractions ? undefined : handleLongPress
-          }
-          delayLongPress={500}
         >
+          <Animated.View style={{ transform: [{ scale: lift }] }}>
           <CustomMessageBubble
             {...({ ref: bubbleRef, collapsable: false } as any)}
             isUser={isUser}
@@ -488,11 +515,12 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 {senderDisplayName}
               </CustomUserName>
             )}
-            {!isReply && message.mainMessage && (
+            {!isReply && !!replyRef?.text && (
               <MessageReply
                 handleReplyMessage={handleReplyMessage}
                 isUser={isUser}
-                text={JSON.parse(message.mainMessage).text}
+                text={replyRef.text}
+                userName={replyRef.userName}
                 color={theme.primary}
               />
             )}
@@ -567,39 +595,45 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
               )}
               <Text style={[styles.timestampText, themedStyles.muted]}>
-                {new Date(message.date).toLocaleTimeString([], {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
+                {timeLabel}
               </Text>
               {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
                 <DoubleTick />
               )}
             </CustomTimestampRow>
 
-          {message?.reply?.length && message?.reply?.length > 0 ? (
-              <BottomReplyContainer
-                isUser={isUser}
-                onClick={handleReplyMessage}
-                reply={message?.reply}
-              />
-            ) : (
-              <View />
-            )}
-
-          <MessageFooter isUser={isUser}>
-
-            {message.reaction && !config?.disableReactions && (
-              <MessageReaction
-                reaction={message.reaction}
-                changeReaction={handleReactionMessage}
-                color={theme.primary}
-                userName={`${user.firstName} ${user.lastName}`}
-              />
-            )}
-          </MessageFooter>
           </CustomMessageBubble>
+          {/* One row on the bubble's bottom edge: the thread pill (as on
+              web) and the reaction chips side by side. */}
+          {((!isReply && (message?.reply?.length || 0) > 0) ||
+            (!!message.reaction && reactionsEnabled(config))) && (
+            <View
+              style={[
+                styles.reactionRow,
+                isUser ? styles.reactionRowUser : styles.reactionRowOther,
+              ]}
+            >
+              {!isReply && (message?.reply?.length || 0) > 0 && (
+                <BottomReplyContainer
+                  isUser={isUser}
+                  onClick={handleReplyMessage}
+                  reply={message.reply!}
+                />
+              )}
+              {message.reaction && reactionsEnabled(config) && (
+                <MessageReaction
+                  reaction={message.reaction}
+                  changeReaction={handleReactionMessage}
+                  color={theme.primary}
+                  userName={`${user.firstName || ''} ${user.lastName || ''}`.trim()}
+                  interactive={!config?.disableInteractions}
+                />
+              )}
+            </View>
+          )}
+          </Animated.View>
         </Pressable>
+        </GestureDetector>
       </View>
       {!config?.disableInteractions && isPressed && (
         <MessageInteractions
@@ -612,13 +646,22 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           handleDeleteMessage={handleDeleteMessage}
           handleEditMessage={handleEditMessage}
           handleReactionMessage={handleReactionMessage}
+          onOpenEmojiPicker={() => setEmojiPickerOpen(true)}
+        />
+      )}
+      {emojiPickerOpen && (
+        <EmojiPickerSheet
+          visible
+          onClose={() => setEmojiPickerOpen(false)}
+          onPick={handleReactionMessage}
         />
       )}
     </View>
   );
 };
 
-export { Message };
+const MemoMessage = React.memo(Message);
+export { MemoMessage as Message };
 
 const styles = StyleSheet.create({
   customMessageContainer: {
@@ -627,6 +670,22 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     position: 'relative',
   },
+  reactionRow: {
+    marginTop: -10,
+    zIndex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6,
+  },
+  reactionRowUser: {
+    alignSelf: 'flex-end',
+    marginRight: 8,
+  },
+  reactionRowOther: {
+    alignSelf: 'flex-start',
+    marginLeft: 8,
+  },
   overlay: {
     ...StyleSheet.absoluteFill,
     position: 'absolute',

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -8,6 +8,7 @@ import {
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
 import {
+  Animated,
   Text,
   StyleSheet,
   View,
@@ -20,6 +21,12 @@ import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
+import { getEmojiNativeById } from '../../helpers/emoji';
+import {
+  quickReactionIds,
+  reactionPickerEnabled,
+  reactionsEnabled,
+} from '../../helpers/reactionsConfig';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -36,6 +43,8 @@ interface MessageInteractionsProps {
   handleDeleteMessage: () => void;
   handleEditMessage: () => void;
   handleReactionMessage: (id: string) => void;
+  /** Opens the full emoji picker (the "+" in the reaction row). */
+  onOpenEmojiPicker?: () => void;
 }
 
 const MessageInteractions: React.FC<MessageInteractionsProps> = ({
@@ -47,6 +56,8 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleReplyMessage: replyMessage,
   handleDeleteMessage,
   handleEditMessage,
+  handleReactionMessage,
+  onOpenEmojiPicker,
 }) => {
   const { showToast } = useToast();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
@@ -65,6 +76,27 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   );
 
   const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+  const [barSize, setBarSize] = useState({ width: 0, height: 0 });
+  const showReactions = reactionsEnabled(config);
+  const quickIds = useMemo(() => quickReactionIds(config), [config]);
+  const showPicker = reactionPickerEnabled(config) && !!onOpenEmojiPicker;
+
+  // Entrance: the menu pops out of its anchor (scale + fade) and the chat
+  // dims a touch behind it. Started once the menu has been measured and
+  // placed — before that it sits invisible at a provisional spot.
+  const reveal = useRef(new Animated.Value(0)).current;
+  const placed = !!position && !!menuSize.width && !!menuSize.height;
+  useEffect(() => {
+    if (!placed) {
+      return;
+    }
+    Animated.spring(reveal, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 24,
+      bounciness: 7,
+    }).start();
+  }, [placed, reveal]);
 
   // Live keyboard height so the menu knows the REAL space below the message.
   // Without this the position math used the full screen height and happily
@@ -88,6 +120,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     return () => subs.forEach((s) => s.remove());
   }, []);
 
+  const handleBarLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width && height && (width !== barSize.width || height !== barSize.height)) {
+      setBarSize({ width, height });
+    }
+  };
+
   const handleMenuLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
     if (
@@ -132,12 +171,15 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     if (!menuSize.width || !menuSize.height) {
       return { top: position.bottom, left: position.left, opacity: 0 };
     }
+    const barReserve = showReactions && barSize.height ? barSize.height + 10 : 0;
 
     const { width: screenWidth, height: screenHeight } =
       Dimensions.get('window');
     const bottomReserve = (config?.keyboardVerticalOffset ?? 0) + 24;
     const topReserve = 16;
     const sideMargin = 8;
+    // Breathing room between the bubble and the menu.
+    const gap = 10;
 
     // The keyboard occludes the bottom `keyboardHeight` px, so the real
     // visible bottom edge is above it. Measuring space below against this
@@ -145,14 +187,14 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     // when the keyboard is open and the message sits near the input.
     const visibleBottom = screenHeight - keyboardHeight;
 
-    const spaceBelow = visibleBottom - position.bottom - bottomReserve;
-    const spaceAbove = position.top - topReserve;
+    const spaceBelow = visibleBottom - position.bottom - gap - bottomReserve;
+    const spaceAbove = position.top - gap - topReserve - barReserve;
 
     let top: number;
     if (spaceBelow >= menuSize.height) {
-      top = position.bottom;
+      top = position.bottom + gap;
     } else if (spaceAbove >= menuSize.height) {
-      top = position.top - menuSize.height;
+      top = position.top - gap - menuSize.height;
     } else {
       top = Math.max(
         topReserve,
@@ -171,7 +213,37 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     );
 
     return { top, left };
-  }, [position, menuSize, config?.keyboardVerticalOffset, keyboardHeight]);
+  }, [position, menuSize, barSize.height, showReactions, config?.keyboardVerticalOffset, keyboardHeight]);
+
+  const barPosition = useMemo(() => {
+    if (!position || !showReactions) {return undefined;}
+    if (!barSize.width || !barSize.height) {
+      return { top: position.top, left: position.left, opacity: 0 };
+    }
+    const { width: screenWidth } = Dimensions.get('window');
+    const sideMargin = 8;
+    const gap = 8;
+    const rightAligned = screenWidth - position.right < position.left;
+    let left = rightAligned ? position.right - barSize.width : position.left;
+    left = Math.max(sideMargin, Math.min(left, screenWidth - barSize.width - sideMargin));
+    const above = position.top - gap - barSize.height;
+    const menuTop = (memoPosition as { top?: number } | undefined)?.top;
+    const top =
+      above >= 16
+        ? above
+        : (menuTop ?? position.bottom) + (menuSize.height || 0) + gap;
+    return { top, left };
+  }, [position, showReactions, barSize, memoPosition, menuSize.height]);
+
+  const localBarPosition = useMemo(() => {
+    if (!barPosition) {return undefined;}
+    return {
+      ...barPosition,
+      top: (barPosition as { top: number }).top - originY,
+      left: (barPosition as { left: number }).left - originX,
+    };
+  }, [barPosition, originX, originY]);
+
 
   // Window coords (memoPosition) → host-local coords. The overlay host
   // sits below the status bar / header, so subtract its measured origin.
@@ -187,16 +259,106 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   const content =
     config?.disableInteractions || message.isDeleted ? null : (
       <View style={styles.overlayFill}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-        <View
-          style={[styles.contextMenu, themedStyles.menu, localPosition]}
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu}>
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.dim, { opacity: reveal }]}
+          />
+        </Pressable>
+        {showReactions && (
+          <Animated.View
+            testID="reaction-bar"
+            onLayout={handleBarLayout}
+            style={[
+              styles.reactionBar,
+              { backgroundColor: theme.surface, shadowColor: theme.shadow },
+              localBarPosition,
+              placed && barSize.height
+                ? {
+                    opacity: reveal,
+                    transform: [
+                      {
+                        scale: reveal.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0.6, 1],
+                        }),
+                      },
+                    ],
+                  }
+                : null,
+            ]}
+          >
+            {quickIds.map((id) => (
+              <Pressable
+                key={id}
+                testID={`quick-reaction-${id}`}
+                onPress={() => {
+                  handleReactionMessage(id);
+                  closeMenu();
+                }}
+                style={({ pressed }) => [
+                  styles.reactionItem,
+                  pressed && { backgroundColor: theme.surfaceHighlight },
+                ]}
+              >
+                <Text style={styles.reactionGlyph}>{getEmojiNativeById(id)}</Text>
+              </Pressable>
+            ))}
+            {showPicker && (
+              <Pressable
+                testID="quick-reaction-more"
+                onPress={() => {
+                  closeMenu();
+                  onOpenEmojiPicker?.();
+                }}
+                style={({ pressed }) => [
+                  styles.reactionMore,
+                  { backgroundColor: theme.surfaceSecondary },
+                  pressed && { backgroundColor: theme.surfaceHighlight },
+                ]}
+              >
+                <Text style={[styles.reactionMoreText, { color: theme.text }]}>+</Text>
+              </Pressable>
+            )}
+          </Animated.View>
+        )}
+        <Animated.View
+          style={[
+            styles.contextMenu,
+            themedStyles.menu,
+            localPosition,
+            placed
+              ? {
+                  opacity: reveal,
+                  transform: [
+                    {
+                      scale: reveal.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0.6, 1],
+                      }),
+                    },
+                  ],
+                }
+              : null,
+          ]}
           onLayout={handleMenuLayout}
         >
+          {!isReply && !config?.disableReplies && (
+            <>
+              <MenuItem testID="menu-reply" onPress={handleReplyMessage}>
+                <Text style={[styles.menuText, themedStyles.text]}>
+                  {MESSAGE_INTERACTIONS.REPLY}
+                </Text>
+                <MESSAGE_INTERACTIONS_ICONS.REPLY color={theme.text} />
+              </MenuItem>
+              <Delimeter />
+            </>
+          )}
           <MenuItem onPress={() => handleCopyMessage(message.body!)}>
             <Text style={[styles.menuText, themedStyles.text]}>
               {MESSAGE_INTERACTIONS.COPY}
             </Text>
-            <MESSAGE_INTERACTIONS_ICONS.COPY />
+            <MESSAGE_INTERACTIONS_ICONS.COPY color={theme.text} />
           </MenuItem>
           {isUser && (
             <>
@@ -209,7 +371,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                     <Text style={[styles.menuText, themedStyles.text]}>
                       {MESSAGE_INTERACTIONS.EDIT}
                     </Text>
-                    <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                    <MESSAGE_INTERACTIONS_ICONS.EDIT color={theme.text} />
                   </MenuItem>
                 </>
               )}
@@ -222,7 +384,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               </MenuItem>
             </>
           )}
-        </View>
+        </Animated.View>
       </View>
     );
 
@@ -251,6 +413,45 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFill,
     backgroundColor: 'transparent',
   },
+  dim: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.18)',
+  },
+  reactionBar: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 28,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  reactionItem: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reactionGlyph: {
+    fontSize: 26,
+  },
+  reactionMore: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 2,
+  },
+  reactionMoreText: {
+    fontSize: 22,
+    lineHeight: 24,
+    fontWeight: '400',
+  },
   contextMenu: {
     position: 'absolute',
     backgroundColor: 'white',