@kesha-antonov/react-native-chat 5.0.1 → 6.0.0

package/lib/Bubble/index.js

@@ -1,518 +1,388 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Text } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { Easing, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useChatContext } from '../ChatContext';
-import { ContextMenu } from '../components/ContextMenu';
-import { Icon } from '../components/Icon';
-import { MessageReply } from '../components/MessageReply';
-import { PendingClock, Ticks } from '../components/Ticks';
-import { useIsRTL } from '../hooks/useIsRTL';
-import { useTheme, useThemedStyles } from '../hooks/useTheme';
-import { MessageAudio } from '../MessageAudio';
-import { MessageImage } from '../MessageImage';
-import { MessageLocation } from '../MessageLocation';
-import { MessageText } from '../MessageText';
-import { MessageVideo } from '../MessageVideo';
-import { QuickReplies } from '../QuickReplies';
-import { DEFAULT_REACTION_EMOJIS, MessageReactions, ReactionPicker } from '../Reactions';
-import { mirrorPosition } from '../rtl';
+import { useThemedStyles } from '../hooks/useTheme';
 import { getStyleWithPosition } from '../styles';
-import { Time } from '../Time';
-import { isSameUser, isSameDay, renderComponentOrElement } from '../utils';
+import { renderComponentOrElement } from '../utils';
+import { BubbleBody } from './BubbleBody';
+import { BubbleQuickReplies } from './BubbleContent';
+import { BubbleMenu, useBubbleMenu } from './BubbleMenu';
+import { useBubbleLayout } from './layout';
+import { hiddenStyle, PressableBubbleRow } from './PressableBubbleRow';
 import { createBubbleStyles } from './styles';
 export * from './types';
-const SCALE_PRESSED = 0.85;
-const SCALE_DURATION_IN = 400;
-const SCALE_DURATION_OUT = 200;
-const SCALE_EASING = Easing.inOut(Easing.quad);
 /**
- * The message row as it behaves when a long-press can open something - the reactions picker or the
- * context menu. It owns the press-scale shared value, the animated style over it and the gesture
- * composition, so none of that exists on a row that has neither feature enabled.
- *
- * Those hooks used to sit in `Bubble` itself, where they had to run unconditionally to keep hook
- * order stable, even though the `Animated.View` reading them only renders on this path. That put a
- * shared value and a UI-thread worklet on every message in the conversation for a scale animation
- * most of them could never play.
+ * One message's bubble. It decides its layout once (`useBubbleLayout`) and hands it to its
+ * parts: the body (surface, name, content, time), the quick replies and reactions under it, and
+ * the long-press menu.
  */
-const PressableBubbleRow = ({ isGestureEnabled, onPressMessage, onLongPressStart, measureBubble, context, currentMessage, rowSurfaceStyle, wrapperStyleList, bubbleContainerRef, children, }) => {
-    const messageScale = useSharedValue(1);
-    const bubbleScaleStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: messageScale.value }],
-    }));
-    const tapGesture = useMemo(() => Gesture.Tap()
-        // Keep native subviews (video controls, maps, native buttons) receiving
-        // touches. iOS cancels them by default the moment this recognizer wins.
-        .cancelsTouchesInView(false)
-        .runOnJS(true)
-        .onEnd((_e, success) => {
-        if (success)
-            onPressMessage?.(context, currentMessage);
-    }), [onPressMessage, context, currentMessage]);
-    const longPressGesture = useMemo(() => Gesture.LongPress()
-        .cancelsTouchesInView(false)
-        .onBegin(() => {
-        messageScale.value = withTiming(SCALE_PRESSED, {
-            duration: SCALE_DURATION_IN,
-            easing: SCALE_EASING,
-            reduceMotion: ReduceMotion.System,
-        });
-        runOnJS(measureBubble)();
-    })
-        .onStart(() => {
-        runOnJS(onLongPressStart)();
-    })
-        .onFinalize(() => {
-        messageScale.value = withTiming(1, {
-            duration: SCALE_DURATION_OUT,
-            easing: SCALE_EASING,
-            reduceMotion: ReduceMotion.System,
-        });
-    }), [messageScale, measureBubble, onLongPressStart]);
-    // Exclusive composition: a long-press wins over the tap when held long
-    // enough; a quick lift lets the tap through. Both share the onBegin/onFinalize
-    // scale animation because onBegin always fires before either gesture wins.
-    // The tap is only attached when there is something to call - otherwise it
-    // would compete with interactive content inside the bubble for no reason.
-    const gesture = useMemo(() => onPressMessage
-        ? Gesture.Exclusive(longPressGesture, tapGesture)
-        : longPressGesture, [longPressGesture, tapGesture, onPressMessage]);
-    // `rowSurface` spans the whole message row, so a long-press in the empty
-    // space beside the bubble opens the picker too - the way Telegram behaves.
-    const bubbleRow = (<View style={rowSurfaceStyle}>
-      <Animated.View style={bubbleScaleStyle}>
-        <View style={wrapperStyleList} ref={bubbleContainerRef}>
-          {children}
-        </View>
-      </Animated.View>
-    </View>);
-    if (isGestureEnabled)
-        return (<GestureDetector gesture={gesture}>
-        {bubbleRow}
-      </GestureDetector>);
-    // Gestures are off for this message, so the surface drops *behind*
-    // the bubble: the bubble's own content (native video controls, a
-    // map, a WebView) keeps every touch that lands on it, while the rest
-    // of the row still opens the picker.
-    return (<>
-      <GestureDetector gesture={gesture}>
-        <View style={StyleSheet.absoluteFill}/>
-      </GestureDetector>
-      {bubbleRow}
-    </>);
-};
-export const Bubble = (props) => {
-    const { currentMessage, nextMessage, position, containerToNextStyle, previousMessage, containerToPreviousStyle, onQuickReply, renderQuickReplySend, quickReplyStyle, quickReplyTextStyle, quickReplyContainerStyle, containerStyle, wrapperStyle, bottomContainerStyle, onPressMessage: onPressMessageProp, onLongPressMessage: onLongPressMessageProp, reactions, messageActions, isMessageGestureEnabled = true, } = props;
-    const context = useChatContext();
-    const theme = useTheme();
-    const styles = useThemedStyles(createBubbleStyles);
-    const isRTL = useIsRTL();
-    // Only for physical layout (alignment, corner radii) - `wrapper`'s background
-    // color and every `xStyle?.[position]` consumer override below stay keyed by
-    // the real, unmirrored `position` ("my bubble vs. theirs"), not screen side.
-    const visualPosition = mirrorPosition(position, isRTL);
-    // Resolve the long-press context-menu actions for this message.
-    const menuItems = useMemo(() => {
-        if (!messageActions || !currentMessage)
-            return [];
-        return typeof messageActions === 'function' ? messageActions(currentMessage) : messageActions;
-    }, [messageActions, currentMessage]);
-    const hasMenu = menuItems.length > 0;
-    // A pure video note (round video, no text) drops the bubble background so the
-    // circle floats like in Telegram. Its meta row then has no bubble to sit on,
-    // so it moves into a translucent pill over the circle instead.
-    const isVideoNote = !!currentMessage?.videoNote && !!currentMessage?.video && !currentMessage?.text;
-    // Consumers can hand the touches back to natively interactive content
-    // (video controls, maps, WebViews) on a per-message basis.
-    const isGestureEnabled = useMemo(() => {
-        if (typeof isMessageGestureEnabled === 'function')
-            return currentMessage ? isMessageGestureEnabled(currentMessage) : true;
-        return isMessageGestureEnabled;
-    }, [isMessageGestureEnabled, currentMessage]);
-    const bubbleContainerRef = useRef(null);
-    const [isPickerVisible, setIsPickerVisible] = useState(false);
-    const [pickerAnchor, setPickerAnchor] = useState({
-        pageX: 0,
-        pageY: 0,
-        bubbleWidth: 0,
-        bubbleHeight: 0,
-    });
-    const onPress = useCallback(() => {
-        onPressMessageProp?.(context, currentMessage);
-    }, [onPressMessageProp, context, currentMessage]);
-    const onLongPress = useCallback(() => {
-        onLongPressMessageProp?.(context, currentMessage);
-    }, [
-        currentMessage,
-        context,
-        onLongPressMessageProp,
-    ]);
-    const openPicker = useCallback(() => {
-        setIsPickerVisible(true);
-    }, []);
-    const measureBubble = useCallback(() => {
-        bubbleContainerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-            setPickerAnchor({ pageX, pageY, bubbleWidth: width, bubbleHeight: height });
-        });
-    }, []);
-    const styledBubbleToNext = useMemo(() => {
-        if (currentMessage &&
-            nextMessage &&
-            position &&
-            isSameUser(currentMessage, nextMessage) &&
-            isSameDay(currentMessage, nextMessage))
-            return [
-                getStyleWithPosition(styles, 'containerToNext', visualPosition),
-                containerToNextStyle?.[position],
-            ];
-        return null;
-    }, [
-        currentMessage,
-        nextMessage,
-        position,
-        visualPosition,
-        containerToNextStyle,
-        styles,
-    ]);
-    const styledBubbleToPrevious = useMemo(() => {
-        if (currentMessage &&
-            previousMessage &&
-            position &&
-            isSameUser(currentMessage, previousMessage) &&
-            isSameDay(currentMessage, previousMessage))
-            return [
-                getStyleWithPosition(styles, 'containerToPrevious', visualPosition),
-                containerToPreviousStyle?.[position],
-            ];
-        return null;
-    }, [
-        currentMessage,
-        previousMessage,
-        position,
-        visualPosition,
-        containerToPreviousStyle,
-        styles,
-    ]);
-    const renderQuickReplies = useCallback(() => {
-        if (currentMessage?.quickReplies) {
-            const { 
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            containerStyle, wrapperStyle, 
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            ...quickReplyProps } = props;
-            if (props.renderQuickReplies)
-                return renderComponentOrElement(props.renderQuickReplies, quickReplyProps);
-            return (<QuickReplies currentMessage={currentMessage} onQuickReply={onQuickReply} renderQuickReplySend={renderQuickReplySend} quickReplyStyle={quickReplyStyle} quickReplyTextStyle={quickReplyTextStyle} quickReplyContainerStyle={quickReplyContainerStyle} nextMessage={nextMessage}/>);
-        }
-        return null;
-    }, [
-        currentMessage,
-        onQuickReply,
-        renderQuickReplySend,
-        quickReplyStyle,
-        quickReplyTextStyle,
-        quickReplyContainerStyle,
-        nextMessage,
-        props,
-    ]);
-    const renderMessageText = useCallback(() => {
-        if (currentMessage?.text) {
-            const { 
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            containerStyle, wrapperStyle, messageTextProps, 
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            ...messageTextPropsRest } = props;
-            const combinedProps = {
-                ...messageTextPropsRest,
-                ...messageTextProps,
-            };
-            if (props.renderMessageText)
-                return renderComponentOrElement(props.renderMessageText, combinedProps);
-            return <MessageText {...combinedProps}/>;
-        }
-        return null;
-    }, [props, currentMessage]);
-    const renderMessageImage = useCallback(() => {
-        if (currentMessage?.image) {
-            const { 
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            containerStyle, wrapperStyle, 
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            ...messageImageProps } = props;
-            if (props.renderMessageImage)
-                return renderComponentOrElement(props.renderMessageImage, messageImageProps);
-            return <MessageImage {...messageImageProps}/>;
-        }
-        return null;
-    }, [props, currentMessage]);
-    const renderMessageVideo = useCallback(() => {
-        if (!currentMessage?.video)
-            return null;
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, wrapperStyle, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageVideoProps } = props;
-        if (props.renderMessageVideo)
-            return renderComponentOrElement(props.renderMessageVideo, messageVideoProps);
-        return <MessageVideo {...messageVideoProps}/>;
-    }, [props, currentMessage]);
-    const renderMessageAudio = useCallback(() => {
-        if (!currentMessage?.audio)
-            return null;
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, wrapperStyle, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageAudioProps } = props;
-        if (props.renderMessageAudio)
-            return renderComponentOrElement(props.renderMessageAudio, messageAudioProps);
-        return <MessageAudio {...messageAudioProps}/>;
-    }, [props, currentMessage]);
-    const renderMessageLocation = useCallback(() => {
-        if (!currentMessage?.location)
-            return null;
-        const { 
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle, wrapperStyle, 
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageLocationProps } = props;
-        if (props.renderMessageLocation)
-            return renderComponentOrElement(props.renderMessageLocation, messageLocationProps);
-        return <MessageLocation {...messageLocationProps}/>;
-    }, [props, currentMessage]);
-    const renderTicks = useCallback(() => {
-        const { renderTicks, user, } = props;
-        if (renderTicks && currentMessage)
-            return renderComponentOrElement(renderTicks, currentMessage);
-        if (user &&
-            currentMessage?.user &&
-            currentMessage.user._id !== user._id)
-            return null;
-        if (currentMessage &&
-            (currentMessage.sent || currentMessage.received || currentMessage.pending)) {
-            // Allow a color override via the (legacy) tickStyle prop.
-            const overrideColor = StyleSheet.flatten(props.tickStyle)?.color;
-            // A note's ticks sit on a dark pill over the video, so they are white for
-            // both positions unless the consumer overrode the color.
-            const noteColor = isVideoNote ? styles.noteMetaText.color : undefined;
-            const sentColor = overrideColor ?? noteColor ?? (position === 'right' ? theme.colors.ticksSent : theme.colors.incomingMeta);
-            const readColor = overrideColor ?? noteColor ?? (position === 'right' ? theme.colors.ticksRead : theme.colors.accent);
-            return (<View style={styles.messageStatusContainer}>
-          {currentMessage.pending
-                    ? <Icon name='clock' color={sentColor} size={11} fallback={<PendingClock color={sentColor}/>}/>
-                    : currentMessage.received
-                        ? <Icon name='checkAll' color={readColor} size={14} fallback={<Ticks double color={readColor}/>}/>
-                        : currentMessage.sent
-                            ? <Icon name='check' color={sentColor} size={14} fallback={<Ticks color={sentColor}/>}/>
-                            : null}
-        </View>);
-        }
-        return null;
-    }, [
-        props,
-        currentMessage,
-        position,
-        isVideoNote,
-        theme,
-        styles,
-    ]);
-    const renderTime = useCallback(() => {
-        if (currentMessage?.createdAt) {
-            const { 
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            containerStyle, wrapperStyle, textStyle, 
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            ...timeProps } = props;
-            if (props.renderTime)
-                return renderComponentOrElement(props.renderTime, timeProps);
-            // On a note the meta sits on a dark pill over the video, so it is white
-            // for both positions - the incoming gray would be unreadable there.
-            if (isVideoNote)
-                return (<Time {...timeProps} timeTextStyle={{ left: styles.noteMetaText, right: styles.noteMetaText }}/>);
-            return <Time {...timeProps}/>;
-        }
-        return null;
-    }, [props, currentMessage, isVideoNote, styles]);
-    const renderUsername = useCallback(() => {
-        const { user, renderUsername, } = props;
-        if (props.isUsernameVisible && currentMessage) {
-            if (user && currentMessage.user._id === user._id)
-                return null;
-            if (renderUsername)
-                return renderComponentOrElement(renderUsername, currentMessage.user);
-            return (<View style={styles.usernameContainer}>
-          <Text style={[styles.username, props.usernameStyle]}>
-            {currentMessage.user.name}
-          </Text>
-        </View>);
-        }
-        return null;
-    }, [
-        currentMessage,
-        props,
-        styles,
-    ]);
-    const renderCustomView = useCallback(() => {
-        if (props.renderCustomView)
-            return renderComponentOrElement(props.renderCustomView, props);
-        return null;
-    }, [props]);
-    const renderMessageReply = useCallback(() => {
-        if (!currentMessage?.replyMessage)
-            return null;
-        const { messageReply } = props;
-        const messageReplyProps = {
-            replyMessage: currentMessage.replyMessage,
-            currentMessage,
-            position,
-            onPress: messageReply?.onPress,
-            containerStyle: position === 'left'
-                ? messageReply?.containerStyleLeft ?? messageReply?.containerStyle
-                : messageReply?.containerStyleRight ?? messageReply?.containerStyle,
-            textStyle: position === 'left'
-                ? messageReply?.textStyleLeft ?? messageReply?.textStyle
-                : messageReply?.textStyleRight ?? messageReply?.textStyle,
-            imageStyle: messageReply?.imageStyle,
-        };
-        if (messageReply?.renderMessageReply)
-            return renderComponentOrElement(messageReply.renderMessageReply, messageReplyProps);
-        return <MessageReply {...messageReplyProps}/>;
-    }, [
-        props,
-        currentMessage,
-        position,
-    ]);
-    const renderBubbleContent = useCallback(() => {
-        return (<>
-        {!props.isCustomViewBottom && renderCustomView()}
-        {renderMessageReply()}
-        {renderMessageImage()}
-        {renderMessageVideo()}
-        {renderMessageAudio()}
-        {renderMessageLocation()}
-        {renderMessageText()}
-        {props.isCustomViewBottom && renderCustomView()}
-      </>);
-    }, [
-        renderMessageReply,
-        renderCustomView,
-        renderMessageImage,
-        renderMessageVideo,
-        renderMessageAudio,
-        renderMessageLocation,
-        renderMessageText,
-        props.isCustomViewBottom,
-    ]);
-    const renderBubbleBody = useCallback(() => (<>
-      {renderUsername()}
-      {renderBubbleContent()}
-      <View style={[
-            styles.bottom,
-            isVideoNote && styles.noteMetaPill,
-            bottomContainerStyle?.[position],
-        ]}>
-        <View style={[styles.messageTimeAndStatusContainer, isVideoNote && styles.noteMetaInner]}>
-          {renderTime()}
-          {renderTicks()}
-        </View>
-      </View>
-    </>), [
+export const Bubble = props => {
+  const $ = _c(114);
+  const {
+    currentMessage,
+    position,
+    containerStyle,
+    wrapperStyle,
+    onPressMessage: onPressMessageProp,
+    onLongPressMessage: onLongPressMessageProp,
+    reactions,
+    messageActions,
+    isMessageGestureEnabled: t0
+  } = props;
+  const isMessageGestureEnabled = t0 === undefined ? true : t0;
+  const context = useChatContext();
+  const styles = useThemedStyles(createBubbleStyles);
+  const layout = useBubbleLayout(props);
+  const menu = useBubbleMenu();
+  const {
+    visualPosition,
+    maxWidth,
+    cornerStyle,
+    hasShadow,
+    shadowColor,
+    styledBubbleToNext,
+    styledBubbleToPrevious,
+    hasGradient,
+    isVideoNote,
+    isBigEmoji
+  } = layout;
+  let t1;
+  bb0: {
+    if (!messageActions || !currentMessage) {
+      let t2;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = [];
+        $[0] = t2;
+      } else {
+        t2 = $[0];
+      }
+      t1 = t2;
+      break bb0;
+    }
+    let t2;
+    if ($[1] !== currentMessage || $[2] !== messageActions) {
+      t2 = typeof messageActions === "function" ? messageActions(currentMessage) : messageActions;
+      $[1] = currentMessage;
+      $[2] = messageActions;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    t1 = t2;
+  }
+  const menuItems = t1;
+  const hasMenu = menuItems.length > 0;
+  let t2;
+  if ($[4] !== currentMessage || $[5] !== isMessageGestureEnabled) {
+    t2 = typeof isMessageGestureEnabled === "function" ? currentMessage ? isMessageGestureEnabled(currentMessage) : true : isMessageGestureEnabled;
+    $[4] = currentMessage;
+    $[5] = isMessageGestureEnabled;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const isGestureEnabled = t2;
+  let t3;
+  if ($[7] !== context || $[8] !== currentMessage || $[9] !== onPressMessageProp) {
+    t3 = () => {
+      onPressMessageProp?.(context, currentMessage);
+    };
+    $[7] = context;
+    $[8] = currentMessage;
+    $[9] = onPressMessageProp;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const onPress = t3;
+  let t4;
+  if ($[11] !== context || $[12] !== currentMessage || $[13] !== onLongPressMessageProp) {
+    t4 = () => {
+      onLongPressMessageProp?.(context, currentMessage);
+    };
+    $[11] = context;
+    $[12] = currentMessage;
+    $[13] = onLongPressMessageProp;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const onLongPress = t4;
+  let t5;
+  bb1: {
+    const currentReactions = currentMessage?.reactions;
+    if (!currentReactions || currentReactions.length === 0) {
+      t5 = null;
+      break bb1;
+    }
+    const t6 = props.user?._id;
+    let t7;
+    if ($[15] !== currentMessage || $[16] !== reactions) {
+      t7 = emoji => reactions?.onReactionPress?.(currentMessage, emoji);
+      $[15] = currentMessage;
+      $[16] = reactions;
+      $[17] = t7;
+    } else {
+      t7 = $[17];
+    }
+    const t8 = reactions?.containerStyle;
+    const t9 = reactions?.reactionStyle;
+    const t10 = reactions?.reactionActiveStyle;
+    const t11 = reactions?.reactionTextStyle;
+    const t12 = reactions?.reactionCountStyle;
+    const t13 = reactions?.getUser;
+    const t14 = reactions?.isGroupChat;
+    let t15;
+    if ($[18] !== currentMessage || $[19] !== currentReactions || $[20] !== position || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13 || $[25] !== t14 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8 || $[29] !== t9) {
+      t15 = {
+        message: currentMessage,
+        reactions: currentReactions,
+        currentUserId: t6,
         position,
-        bottomContainerStyle,
-        renderBubbleContent,
-        renderUsername,
-        renderTime,
-        renderTicks,
-        styles,
-        isVideoNote,
-    ]);
-    const wrapperStyleList = useMemo(() => [
-        getStyleWithPosition(styles, 'wrapper', position),
-        styledBubbleToNext,
-        styledBubbleToPrevious,
-        wrapperStyle?.[position],
-        isVideoNote && styles.noteWrapper,
-    ], [position, styledBubbleToNext, styledBubbleToPrevious, wrapperStyle, styles, isVideoNote]);
-    const containerStyleList = useMemo(() => [
-        getStyleWithPosition(styles, 'container', visualPosition),
-        containerStyle?.[position],
-    ], [styles, position, visualPosition, containerStyle]);
-    const rowSurfaceStyle = useMemo(() => getStyleWithPosition(styles, 'rowSurface', visualPosition), [styles, visualPosition]);
-    const renderReactionsDisplay = useCallback(() => {
-        const currentReactions = currentMessage?.reactions;
-        if (!currentReactions || currentReactions.length === 0)
-            return null;
-        const displayProps = {
-            message: currentMessage,
-            reactions: currentReactions,
-            currentUserId: props.user?._id,
-            position,
-            onReactionPress: (emoji) => reactions?.onReactionPress?.(currentMessage, emoji),
-            containerStyle: reactions?.containerStyle,
-            reactionStyle: reactions?.reactionStyle,
-            reactionActiveStyle: reactions?.reactionActiveStyle,
-            reactionTextStyle: reactions?.reactionTextStyle,
-            reactionCountStyle: reactions?.reactionCountStyle,
-        };
-        if (reactions?.renderReactions)
-            return renderComponentOrElement(reactions.renderReactions, displayProps);
-        return <MessageReactions {...displayProps}/>;
-    }, [currentMessage, position, props.user, reactions]);
-    const renderReactionPickerModal = useCallback(() => {
-        if (!reactions?.isEnabled)
-            return null;
-        const emojis = reactions.emojis ?? DEFAULT_REACTION_EMOJIS;
-        const pickerProps = {
-            visible: isPickerVisible,
-            message: currentMessage,
-            emojis,
-            onSelect: (emoji) => reactions?.onReactionPress?.(currentMessage, emoji),
-            onDismiss: () => setIsPickerVisible(false),
-            position,
-            ...pickerAnchor,
-            pickerContainerStyle: reactions.pickerContainerStyle,
-            pickerEmojiStyle: reactions.pickerEmojiStyle,
-        };
-        if (reactions.renderReactionPicker)
-            return renderComponentOrElement(reactions.renderReactionPicker, pickerProps);
-        return <ReactionPicker {...pickerProps}/>;
-    }, [reactions, isPickerVisible, currentMessage, position, pickerAnchor]);
-    const renderContextMenu = useCallback(() => {
-        const reactionsRow = reactions?.isEnabled
-            ? {
-                emojis: reactions.emojis ?? DEFAULT_REACTION_EMOJIS,
-                onSelect: (emoji) => reactions?.onReactionPress?.(currentMessage, emoji),
-            }
-            : undefined;
-        return (<ContextMenu visible={isPickerVisible} items={menuItems} onDismiss={() => setIsPickerVisible(false)} position={position} {...pickerAnchor} reactions={reactionsRow}/>);
-    }, [reactions, menuItems, isPickerVisible, position, pickerAnchor, currentMessage]);
-    // Overlay path: a long-press opens either the Telegram-style context menu
-    // (when messageActions are provided, optionally with a reactions row) or the
-    // reactions quick-picker. The Animated.View carries only the scale transform.
-    if (reactions?.isEnabled || hasMenu)
-        // `rowSurface` spans the whole message row, so a long-press in the empty
-        // space beside the bubble opens the picker too - the way Telegram behaves.
-        return (<Animated.View style={containerStyleList}>
-        <PressableBubbleRow isGestureEnabled={isGestureEnabled} onPressMessage={onPressMessageProp} onLongPressStart={openPicker} measureBubble={measureBubble} context={context} currentMessage={currentMessage} rowSurfaceStyle={rowSurfaceStyle} wrapperStyleList={wrapperStyleList} bubbleContainerRef={bubbleContainerRef}>
-          {renderBubbleBody()}
-        </PressableBubbleRow>
-        {renderQuickReplies()}
-        {renderReactionsDisplay()}
-        {hasMenu ? renderContextMenu() : renderReactionPickerModal()}
-      </Animated.View>);
-    // Default path: unchanged behaviour for existing users, preserving
-    // touchableProps, native press feedback, and the onLongPressMessage callback.
-    return (<View style={containerStyleList}>
-      <View style={wrapperStyleList}>
-        {isGestureEnabled
-            ? (<Pressable onPress={onPress} onLongPress={onLongPress} {...props.touchableProps}>
-              {renderBubbleBody()}
-            </Pressable>)
-            : renderBubbleBody()}
-      </View>
-      {renderQuickReplies()}
-    </View>);
+        onReactionPress: t7,
+        containerStyle: t8,
+        reactionStyle: t9,
+        reactionActiveStyle: t10,
+        reactionTextStyle: t11,
+        reactionCountStyle: t12,
+        getUser: t13,
+        isGroupChat: t14
+      };
+      $[18] = currentMessage;
+      $[19] = currentReactions;
+      $[20] = position;
+      $[21] = t10;
+      $[22] = t11;
+      $[23] = t12;
+      $[24] = t13;
+      $[25] = t14;
+      $[26] = t6;
+      $[27] = t7;
+      $[28] = t8;
+      $[29] = t9;
+      $[30] = t15;
+    } else {
+      t15 = $[30];
+    }
+    t5 = t15;
+  }
+  const reactionsDisplay = t5;
+  let t6;
+  if ($[31] !== position || $[32] !== styles) {
+    t6 = getStyleWithPosition(styles, "wrapper", position);
+    $[31] = position;
+    $[32] = styles;
+    $[33] = t6;
+  } else {
+    t6 = $[33];
+  }
+  let t7;
+  if ($[34] !== maxWidth) {
+    t7 = {
+      maxWidth
+    };
+    $[34] = maxWidth;
+    $[35] = t7;
+  } else {
+    t7 = $[35];
+  }
+  let t8;
+  if ($[36] !== hasShadow || $[37] !== shadowColor) {
+    t8 = hasShadow && {
+      boxShadow: [{
+        offsetX: 0,
+        offsetY: 1,
+        blurRadius: 0.5,
+        color: shadowColor
+      }]
+    };
+    $[36] = hasShadow;
+    $[37] = shadowColor;
+    $[38] = t8;
+  } else {
+    t8 = $[38];
+  }
+  const t9 = wrapperStyle?.[position];
+  const t10 = hasGradient && styles.gradientWrapper;
+  const t11 = isVideoNote && styles.noteWrapper;
+  const t12 = isBigEmoji && styles.emojiWrapper;
+  let t13;
+  if ($[39] !== cornerStyle || $[40] !== styledBubbleToNext || $[41] !== styledBubbleToPrevious || $[42] !== t10 || $[43] !== t11 || $[44] !== t12 || $[45] !== t6 || $[46] !== t7 || $[47] !== t8 || $[48] !== t9) {
+    t13 = [t6, t7, cornerStyle, t8, styledBubbleToNext, styledBubbleToPrevious, t9, t10, t11, t12];
+    $[39] = cornerStyle;
+    $[40] = styledBubbleToNext;
+    $[41] = styledBubbleToPrevious;
+    $[42] = t10;
+    $[43] = t11;
+    $[44] = t12;
+    $[45] = t6;
+    $[46] = t7;
+    $[47] = t8;
+    $[48] = t9;
+    $[49] = t13;
+  } else {
+    t13 = $[49];
+  }
+  const wrapperStyleList = t13;
+  let t14;
+  if ($[50] !== styles || $[51] !== visualPosition) {
+    t14 = getStyleWithPosition(styles, "container", visualPosition);
+    $[50] = styles;
+    $[51] = visualPosition;
+    $[52] = t14;
+  } else {
+    t14 = $[52];
+  }
+  const t15 = containerStyle?.[position];
+  let t16;
+  if ($[53] !== t14 || $[54] !== t15) {
+    t16 = [t14, t15];
+    $[53] = t14;
+    $[54] = t15;
+    $[55] = t16;
+  } else {
+    t16 = $[55];
+  }
+  const containerStyleList = t16;
+  let t17;
+  if ($[56] !== styles || $[57] !== visualPosition) {
+    t17 = getStyleWithPosition(styles, "rowSurface", visualPosition);
+    $[56] = styles;
+    $[57] = visualPosition;
+    $[58] = t17;
+  } else {
+    t17 = $[58];
+  }
+  const rowSurfaceStyle = t17;
+  let t18;
+  if ($[59] !== layout || $[60] !== props || $[61] !== reactionsDisplay) {
+    t18 = <BubbleBody bubble={props} layout={layout} reactionsDisplay={reactionsDisplay} />;
+    $[59] = layout;
+    $[60] = props;
+    $[61] = reactionsDisplay;
+    $[62] = t18;
+  } else {
+    t18 = $[62];
+  }
+  const body = t18;
+  let t19;
+  if ($[63] !== reactions || $[64] !== reactionsDisplay) {
+    t19 = reactions?.renderReactions && reactionsDisplay ? renderComponentOrElement(reactions.renderReactions, reactionsDisplay) : null;
+    $[63] = reactions;
+    $[64] = reactionsDisplay;
+    $[65] = t19;
+  } else {
+    t19 = $[65];
+  }
+  const customReactions = t19;
+  let t20;
+  if ($[66] !== customReactions || $[67] !== menu) {
+    t20 = customReactions && menu.isLifted ? <View style={hiddenStyle}>{customReactions}</View> : customReactions;
+    $[66] = customReactions;
+    $[67] = menu;
+    $[68] = t20;
+  } else {
+    t20 = $[68];
+  }
+  const reactionsBelow = t20;
+  if (reactions?.isEnabled || hasMenu) {
+    let t21;
+    if ($[69] !== body || $[70] !== context || $[71] !== currentMessage || $[72] !== isGestureEnabled || $[73] !== menu.bubbleContainerRef || $[74] !== menu.isLifted || $[75] !== menu.measureBubble || $[76] !== menu.open || $[77] !== onPressMessageProp || $[78] !== rowSurfaceStyle || $[79] !== wrapperStyleList) {
+      t21 = <PressableBubbleRow isGestureEnabled={isGestureEnabled} isLifted={menu.isLifted} onPressMessage={onPressMessageProp} onLongPressStart={menu.open} measureBubble={menu.measureBubble} context={context} currentMessage={currentMessage} rowSurfaceStyle={rowSurfaceStyle} wrapperStyleList={wrapperStyleList} bubbleContainerRef={menu.bubbleContainerRef}>{body}</PressableBubbleRow>;
+      $[69] = body;
+      $[70] = context;
+      $[71] = currentMessage;
+      $[72] = isGestureEnabled;
+      $[73] = menu.bubbleContainerRef;
+      $[74] = menu.isLifted;
+      $[75] = menu.measureBubble;
+      $[76] = menu.open;
+      $[77] = onPressMessageProp;
+      $[78] = rowSurfaceStyle;
+      $[79] = wrapperStyleList;
+      $[80] = t21;
+    } else {
+      t21 = $[80];
+    }
+    let t22;
+    if ($[81] !== props) {
+      t22 = <BubbleQuickReplies bubble={props} />;
+      $[81] = props;
+      $[82] = t22;
+    } else {
+      t22 = $[82];
+    }
+    let t23;
+    if ($[83] !== hasMenu || $[84] !== layout || $[85] !== menu || $[86] !== menuItems || $[87] !== props || $[88] !== reactions?.renderReactionPicker || $[89] !== reactionsDisplay || $[90] !== wrapperStyleList) {
+      t23 = (menu.hasOpenedMenu || !hasMenu && !!reactions?.renderReactionPicker) && <BubbleMenu bubble={props} layout={layout} menu={menu} menuItems={menuItems} wrapperStyleList={wrapperStyleList} reactionsDisplay={reactionsDisplay} />;
+      $[83] = hasMenu;
+      $[84] = layout;
+      $[85] = menu;
+      $[86] = menuItems;
+      $[87] = props;
+      $[88] = reactions?.renderReactionPicker;
+      $[89] = reactionsDisplay;
+      $[90] = wrapperStyleList;
+      $[91] = t23;
+    } else {
+      t23 = $[91];
+    }
+    let t24;
+    if ($[92] !== containerStyleList || $[93] !== reactionsBelow || $[94] !== t21 || $[95] !== t22 || $[96] !== t23) {
+      t24 = <Animated.View style={containerStyleList}>{t21}{t22}{reactionsBelow}{t23}</Animated.View>;
+      $[92] = containerStyleList;
+      $[93] = reactionsBelow;
+      $[94] = t21;
+      $[95] = t22;
+      $[96] = t23;
+      $[97] = t24;
+    } else {
+      t24 = $[97];
+    }
+    return t24;
+  }
+  let t21;
+  if ($[98] !== body || $[99] !== isGestureEnabled || $[100] !== onLongPress || $[101] !== onPress || $[102] !== props.touchableProps) {
+    t21 = isGestureEnabled ? <Pressable onPress={onPress} onLongPress={onLongPress} {...props.touchableProps}>{body}</Pressable> : body;
+    $[98] = body;
+    $[99] = isGestureEnabled;
+    $[100] = onLongPress;
+    $[101] = onPress;
+    $[102] = props.touchableProps;
+    $[103] = t21;
+  } else {
+    t21 = $[103];
+  }
+  let t22;
+  if ($[104] !== t21 || $[105] !== wrapperStyleList) {
+    t22 = <View style={wrapperStyleList}>{t21}</View>;
+    $[104] = t21;
+    $[105] = wrapperStyleList;
+    $[106] = t22;
+  } else {
+    t22 = $[106];
+  }
+  let t23;
+  if ($[107] !== props) {
+    t23 = <BubbleQuickReplies bubble={props} />;
+    $[107] = props;
+    $[108] = t23;
+  } else {
+    t23 = $[108];
+  }
+  let t24;
+  if ($[109] !== containerStyleList || $[110] !== reactionsBelow || $[111] !== t22 || $[112] !== t23) {
+    t24 = <View style={containerStyleList}>{t22}{t23}{reactionsBelow}</View>;
+    $[109] = containerStyleList;
+    $[110] = reactionsBelow;
+    $[111] = t22;
+    $[112] = t23;
+    $[113] = t24;
+  } else {
+    t24 = $[113];
+  }
+  return t24;
 };
 //# sourceMappingURL=index.js.map