@ethora/chat-component-rn 26.5.10 → 26.5.11

package/src/components/MessageBubble/Message.tsx

@@ -6,6 +6,7 @@ import {
   findNodeHandle,
   UIManager,
   Text,
+  Keyboard,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -241,8 +242,25 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // onLayout — more accurate than estimating it here, and it's what keeps
   // the menu adjacent to the message instead of floating far above (#13).
   const handleLongPress = () => {
-    const target = bubbleRef.current ?? messageRef.current;
-    if (target) {
+    const target = (bubbleRef.current ?? messageRef.current) as any;
+    if (target?.measureInWindow) {
+      // Use measureInWindow — the SAME API the overlay host uses to find
+      // its own window origin. Both are then in identical window
+      // coordinates, so MessageInteractions' host-local conversion
+      // (subtract origin) is exact. Mixing this with UIManager.measure
+      // (pageX/pageY) drifted on Android (status-bar offset) and pushed the
+      // "below" menu too far from the message.
+      target.measureInWindow(
+        (x: number, y: number, width: number, height: number) => {
+          setContextMenuPosition({
+            left: x,
+            right: x + width,
+            top: y,
+            bottom: y + height,
+          });
+        }
+      );
+    } else if (target) {
       const nodeHandle = findNodeHandle(target);
       if (nodeHandle) {
         UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
@@ -291,7 +309,19 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
       >
         {!isUser && (
           <CustomMessagePhotoContainer
-            onPress={() => handleUserAvatarClick(message.user)}
+            // `disableProfilesInteractions` gates every entry point to the
+            // user-profile popup: this in-bubble avatar AND the chat-title
+            // press in ChatHeader. When disabled we still render the avatar
+            // visually but make it non-interactive (no press, no a11y
+            // affordance) — consumers who want it gone entirely can return
+            // null from a custom message component.
+            onPress={
+              config?.disableProfilesInteractions
+                ? undefined
+                : () => handleUserAvatarClick(message.user)
+            }
+            disabled={!!config?.disableProfilesInteractions}
+            accessible={!config?.disableProfilesInteractions}
           >
             {message.user?.profileImage ? (
               <CustomMessagePhoto source={{ uri: message.user.profileImage }} />
@@ -310,6 +340,17 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             flex: 1,
             alignItems: isUser ? 'flex-end' : 'flex-start',
           }}
+          // A plain tap anywhere on a message bubble dismisses the
+          // keyboard. The FlatList's keyboardShouldPersistTaps="handled"
+          // already dismisses taps on the empty GAPS between bubbles, but
+          // the bubble Pressable itself is a touch responder, so taps that
+          // landed on a message were "handled" and the keyboard stayed —
+          // which is exactly the "closes only every other time" symptom
+          // (hit a gap → close, hit a bubble → stay). Explicitly dismissing
+          // here makes it reliable across the whole list. onPress does NOT
+          // 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={

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -8,7 +8,6 @@ import {
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
 import {
-  Modal,
   Text,
   StyleSheet,
   View,
@@ -18,6 +17,7 @@ import {
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
+import { useInteractionsOverlay } from './InteractionsOverlay';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -47,6 +47,8 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleEditMessage,
 }) => {
   const { showToast } = useToast();
+  const { present, dismiss, originX, originY } = useInteractionsOverlay();
+  const overlayId = useId();
 
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
@@ -130,54 +132,71 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     return { top, left };
   }, [position, menuSize, config?.keyboardVerticalOffset]);
 
-  if (config?.disableInteractions) {return null;}
-
-  return (
-    <Modal
-      transparent
-      animationType="fade"
-      visible={true}
-      onRequestClose={closeMenu}
-    >
-      {!message.isDeleted && (
-        <View style={styles.overlayFill}>
-          <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-          <View
-            style={[styles.contextMenu, memoPosition]}
-            onLayout={handleMenuLayout}
-          >
-            <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-              <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
-              <MESSAGE_INTERACTIONS_ICONS.COPY />
-            </MenuItem>
-            {isUser && (
-              <>
-                {/* Edit only for non-media messages (upstream guard) +
-                    consistent label styling (menuText). */}
-                {message?.isMediafile !== 'true' && (
-                  <>
-                    <Delimeter />
-                    <MenuItem onPress={handleEditMessage}>
-                      <Text style={styles.menuText}>
-                        {MESSAGE_INTERACTIONS.EDIT}
-                      </Text>
-                      <MESSAGE_INTERACTIONS_ICONS.EDIT />
-                    </MenuItem>
-                  </>
-                )}
-                <Delimeter />
-                <MenuItem onPress={handleDeleteMessage}>
-                  <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.DELETE />
-                </MenuItem>
-              </>
-            )}
-          </View>
+  // Window coords (memoPosition) → host-local coords. The overlay host
+  // sits below the status bar / header, so subtract its measured origin.
+  const localPosition = useMemo(() => {
+    if (!memoPosition) {return undefined;}
+    return {
+      ...memoPosition,
+      top: (memoPosition as { top: number }).top - originY,
+      left: (memoPosition as { left: number }).left - originX,
+    };
+  }, [memoPosition, originX, originY]);
+
+  const content =
+    config?.disableInteractions || message.isDeleted ? null : (
+      <View style={styles.overlayFill}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
+        <View
+          style={[styles.contextMenu, localPosition]}
+          onLayout={handleMenuLayout}
+        >
+          <MenuItem onPress={() => handleCopyMessage(message.body!)}>
+            <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
+            <MESSAGE_INTERACTIONS_ICONS.COPY />
+          </MenuItem>
+          {isUser && (
+            <>
+              {/* Edit only for non-media messages (upstream guard) +
+                  consistent label styling (menuText). */}
+              {message?.isMediafile !== 'true' && (
+                <>
+                  <Delimeter />
+                  <MenuItem onPress={handleEditMessage}>
+                    <Text style={styles.menuText}>
+                      {MESSAGE_INTERACTIONS.EDIT}
+                    </Text>
+                    <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                  </MenuItem>
+                </>
+              )}
+              <Delimeter />
+              <MenuItem onPress={handleDeleteMessage}>
+                <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                <MESSAGE_INTERACTIONS_ICONS.DELETE />
+              </MenuItem>
+            </>
+          )}
         </View>
-      )}
+      </View>
+    );
 
-    </Modal>
-  );
+  // Render the menu in the in-tree overlay host instead of a React Native
+  // <Modal>. A Modal opens its own window on Android, which steals focus
+  // from the chat input and dismisses the keyboard when the menu opens;
+  // hosting it in the same view tree keeps the keyboard up. Re-run every
+  // render so menuSize/position updates refresh the hosted node.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (content) {
+      present(overlayId, content);
+    } else {
+      dismiss(overlayId);
+    }
+  });
+  useEffect(() => () => dismiss(overlayId), [dismiss, overlayId]);
+
+  return null;
 };
 
 export default MessageInteractions;

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -1,7 +1,9 @@
 /** @format */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  Animated,
+  Easing,
   Modal,
   Platform,
   StyleSheet,
@@ -20,6 +22,11 @@ interface AttachSheetProps {
   primaryColor?: string;
 }
 
+// Starting translateY for the sheet. Larger than any realistic sheet
+// height so it sits fully below the viewport before opening; the exact
+// number doesn't matter visually because it animates to 0.
+const SHEET_OFFSCREEN = 600;
+
 const AttachSheet: React.FC<AttachSheetProps> = ({
   visible,
   onClose,
@@ -28,22 +35,94 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onDocument,
   primaryColor = '#0052CD',
 }) => {
+  // Pending handler captured on row tap — runs once the EXIT animation
+  // finishes so iOS doesn't try to present an image picker over a
+  // still-dismissing modal (was the original reason for the
+  // platform-split + Modal.onDismiss dance). The animation completion
+  // callback now drives this on both platforms.
   const pendingRef = useRef<(() => void) | null>(null);
 
-  const runPending = () => {
-    const fn = pendingRef.current;
-    pendingRef.current = null;
-    fn?.();
-  };
+  // Local "modal stays mounted while animating out" state. The parent
+  // controls `visible`; we mirror it but delay unmount until the exit
+  // animation has played so the slide-down is actually seen.
+  const [mounted, setMounted] = useState(visible);
 
-  const trigger = (handler: () => void) => () => {
-    if (Platform.OS === 'ios') {
-      pendingRef.current = handler;
-      onClose();
-    } else {
-      onClose();
-      setTimeout(handler, 150);
+  // Two separate Animated values — the whole point of the rewrite:
+  //   • backdropOpacity: fades the dim layer in/out (no slide).
+  //   • sheetTranslateY: slides ONLY the sheet up from below.
+  // RN Modal's built-in `animationType="slide"` slides the entire
+  // contents (backdrop included) so the dim shade entered from the
+  // bottom — what looked "awful". Splitting these gives the standard
+  // bottom-sheet feel.
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const sheetTranslateY = useRef(
+    new Animated.Value(SHEET_OFFSCREEN)
+  ).current;
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      // Reset to starting positions BEFORE the Modal becomes visible so
+      // the first animated frame is below-the-fold (not a flash of the
+      // settled sheet).
+      backdropOpacity.setValue(0);
+      sheetTranslateY.setValue(SHEET_OFFSCREEN);
+      // requestAnimationFrame lets the Modal commit its mount before the
+      // animation starts; without this the first frame can be skipped.
+      const raf = requestAnimationFrame(() => {
+        Animated.parallel([
+          Animated.timing(backdropOpacity, {
+            toValue: 1,
+            duration: 220,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+          Animated.spring(sheetTranslateY, {
+            toValue: 0,
+            // Tuned for a quick-but-not-bouncy entry. tension is the
+            // "stiffness" knob, friction the "damping" knob in RN's
+            // spring config.
+            tension: 90,
+            friction: 14,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      });
+      return () => cancelAnimationFrame(raf);
     }
+    if (!mounted) {return;}
+    // Exit: fade the backdrop, slide the sheet down, then unmount and
+    // fire any pending picker handler.
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 180,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(sheetTranslateY, {
+        toValue: SHEET_OFFSCREEN,
+        duration: 220,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
+      setMounted(false);
+      const fn = pendingRef.current;
+      pendingRef.current = null;
+      fn?.();
+    });
+    return undefined;
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const trigger = (handler: () => void) => () => {
+    // Capture the handler and ask parent to close. The exit-animation
+    // completion above fires `handler` AFTER the sheet has slid away,
+    // so iOS no longer tries to present a picker over a dismissing
+    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
+    pendingRef.current = handler;
+    onClose();
   };
 
   const rows: {
@@ -75,52 +154,66 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   return (
     <Modal
       transparent
-      visible={visible}
-      animationType="slide"
+      visible={mounted}
+      // We drive the animation ourselves — disable RN's built-in slide
+      // (which slid the backdrop too) so the fade + spring above are the
+      // only motion.
+      animationType="none"
       onRequestClose={onClose}
-      onDismiss={runPending}
+      // Hardware-back / iOS gesture also routes through onClose, which
+      // flips `visible` and triggers our exit animation above.
     >
-      <TouchableOpacity
-        style={styles.backdrop}
-        activeOpacity={1}
-        onPress={onClose}
+      <Animated.View
+        style={[styles.backdrop, { opacity: backdropOpacity }]}
       >
-        <TouchableOpacity activeOpacity={1} style={styles.sheet}>
-          <View style={styles.grabber} />
-          <Text style={styles.title}>Attach</Text>
-          {rows.map(({ label, hint, Icon, handler }, idx) => (
-            <TouchableOpacity
-              key={label}
-              activeOpacity={0.6}
-              style={[
-                styles.row,
-                idx < rows.length - 1 && styles.rowDivider,
-              ]}
-              onPress={trigger(handler)}
-            >
-              <View
+        <TouchableOpacity
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <Animated.View
+          style={[
+            styles.sheet,
+            { transform: [{ translateY: sheetTranslateY }] },
+          ]}
+        >
+          <TouchableOpacity activeOpacity={1}>
+            <View style={styles.grabber} />
+            <Text style={styles.title}>Attach</Text>
+            {rows.map(({ label, hint, Icon, handler }, idx) => (
+              <TouchableOpacity
+                key={label}
+                activeOpacity={0.6}
                 style={[
-                  styles.iconBubble,
-                  { backgroundColor: primaryColor + '14' },
+                  styles.row,
+                  idx < rows.length - 1 && styles.rowDivider,
                 ]}
+                onPress={trigger(handler)}
               >
-                <Icon color={primaryColor} width={20} height={20} />
-              </View>
-              <View style={styles.rowText}>
-                <Text style={styles.rowLabel}>{label}</Text>
-                <Text style={styles.rowHint}>{hint}</Text>
-              </View>
+                <View
+                  style={[
+                    styles.iconBubble,
+                    { backgroundColor: primaryColor + '14' },
+                  ]}
+                >
+                  <Icon color={primaryColor} width={20} height={20} />
+                </View>
+                <View style={styles.rowText}>
+                  <Text style={styles.rowLabel}>{label}</Text>
+                  <Text style={styles.rowHint}>{hint}</Text>
+                </View>
+              </TouchableOpacity>
+            ))}
+            <TouchableOpacity
+              activeOpacity={0.6}
+              style={styles.cancelRow}
+              onPress={onClose}
+            >
+              <Text style={styles.cancelLabel}>Cancel</Text>
             </TouchableOpacity>
-          ))}
-          <TouchableOpacity
-            activeOpacity={0.6}
-            style={styles.cancelRow}
-            onPress={onClose}
-          >
-            <Text style={styles.cancelLabel}>Cancel</Text>
           </TouchableOpacity>
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </Animated.View>
+      </Animated.View>
     </Modal>
   );
 };

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -293,11 +293,22 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         <ProfileImagePlaceholder
           name={activeRoom.title || activeRoom.name}
           icon={activeRoom.icon}
+          // Two gates control whether the icon is editable:
+          //   1. role — only non-participants could edit before.
+          //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
+          //      config so a consumer can make the icon read-only for
+          //      everyone (e.g. branded rooms, patient-facing apps).
+          // Both must allow it for the picker/remove affordances to show.
           upload={{
             onUpload,
-            active: activeRoom?.role !== 'participant' ? true : false,
+            active:
+              !config?.disableChatInfo?.disableIconEdit &&
+              activeRoom?.role !== 'participant',
+          }}
+          remove={{
+            enabled: !config?.disableChatInfo?.disableIconEdit,
+            onRemoveClick,
           }}
-          remove={{ enabled: true, onRemoveClick }}
           role={activeRoom?.role}
           size={128}
         />
@@ -377,7 +388,18 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   >
                     <Pressable
                       style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 16 }}
-                      onPress={() => handleUserAvatarClick(user)}
+                      // `disableChatInfo.disableMemberTap` blocks the
+                      // tap entirely so the user-profile popup never
+                      // opens. `disableMemberProfileActions` only hid
+                      // the action buttons INSIDE that popup, leaving
+                      // the popup itself to open on tap — this gate
+                      // closes the door. Customer-reported #16.
+                      onPress={
+                        config?.disableChatInfo?.disableMemberTap
+                          ? undefined
+                          : () => handleUserAvatarClick(user)
+                      }
+                      disabled={!!config?.disableChatInfo?.disableMemberTap}
                     >
                       <ProfileImagePlaceholder
                         name={`${user.firstName} ${user.lastName}`}

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -27,7 +27,7 @@ import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
-import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
+import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
 
 // MIME types Google's gview embed renders reliably. Everything else
 // falls through to the info-card so the user can still download.
@@ -240,7 +240,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype.startsWith('video/'):
         return <ModalVideo uri={activeFile.fileURL} />;
-      case activeFile.mimetype.startsWith('audio/'):
+      // Mirrors the MediaMessage heuristic: treat octet-stream voicemails
+      // with audio-shaped filenames / URLs as audio so the preview shows
+      // the player instead of an "Unsupported" card. Customer-reported
+      // #9 voicemail fix — see isLikelyAudio in mimeToExtension.ts.
+      case isLikelyAudio(
+        activeFile.mimetype,
+        activeFile.fileName,
+        activeFile.fileURL
+      ):
         return (
           <View
             style={{

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -7,6 +7,7 @@ import {
 import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
 import Button from '../styled/Button';
 import { Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
@@ -21,8 +22,14 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   rightMenu,
   leftMenu,
 }) => {
+  // The library's full-screen modals are an absolute-fill overlay inside
+  // ModalBackground (NOT a native Modal), so the OS doesn't apply any
+  // status-bar inset automatically — we have to. SafeAreaProvider is
+  // mounted by ReduxWrapper, so this reads the live per-device inset
+  // (notch / Dynamic Island / nothing).
+  const insets = useSafeAreaInsets();
   return (
-    <HeaderContainer>
+    <HeaderContainer style={{ paddingTop: insets.top + 8 }}>
       <HeaderLeft>
         {leftMenu ? (
           leftMenu

package/src/components/Modals/styledModalComponents.tsx

@@ -72,10 +72,19 @@ export const HeaderContainer = styled.View`
   position: relative;
   top: 0;
   width: 100%;
-  padding: 2px 8px;
-  padding-top: 62px;
-  max-height: 24px;
-  min-height: 24px;
+  /* The previous incarnation had padding-top:62px (hard-coded status-bar
+   * offset) clamped to min/max-height:24px — content overflowed the
+   * visible band and the back arrow hugged the bottom edge. The earlier
+   * fix dropped the clamp but kept a hard-coded 56px top inset, which on
+   * top of this modal's absolute-fill overlay (no system inset is auto-
+   * applied) made the header eat far more space than it should.
+   *
+   * Now: compact 8px vertical padding here; the dynamic top inset for
+   * the status bar / Dynamic Island is supplied by ModalHeaderComponent
+   * via useSafeAreaInsets() — accurate per-device (~59px on a 16 Pro,
+   * 20px on an SE). Together that's status-bar + 8px above the back
+   * button and 8px below — properly sized and properly centered. */
+  padding: 8px 16px;
   background-color: #fff;
   border-bottom-width: 1px;
   border-bottom-color: #f0f0f0;

package/src/components/styled/StyledComponents.ts

@@ -54,11 +54,14 @@ export const ChatContainerHeaderBoxInfo = styled.TouchableOpacity`
   flex: 1;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  /* Left-aligned: the avatar + chat-name row now hugs the left edge of
+   * the header instead of centering itself within the available space.
+   * Was: justify-content:center + max-width:90% which double-centered
+   * with CenterContainer and pushed the title to the middle. */
+  justify-content: flex-start;
+  width: 100%;
   overflow: hidden;
-  max-width: 90%;
   gap: 16px;
-  flex: 1;
 `;
 
 export const ChatContainerHeaderInfo = styled.View`

package/src/components/styled/VideoMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
@@ -48,9 +48,16 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   };
 
   return (
-    <TouchableOpacity
-      onPress={handleOpen}
-      activeOpacity={0.9}
+    // Capture-overlay pattern: VideoView sits underneath without ANY
+    // touch participation; a transparent absolute-fill <Pressable> on
+    // top owns the tap. Previously we wrapped VideoView in a
+    // TouchableOpacity and set `pointerEvents="none"` on the inner
+    // VideoView — but on some expo-video versions / iOS the native
+    // VideoView still intercepted gestures despite that hint, so
+    // tapping the poster did nothing. Customer-reported #9 (video
+    // preview unresponsive). The Pressable now guarantees the tap
+    // reaches `handleOpen`.
+    <View
       style={[styles.wrapper, { width: dims.width, height: dims.height }]}
     >
       <VideoView
@@ -66,7 +73,16 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
           <PlayIcon width={28} height={28} />
         </View>
       </View>
-    </TouchableOpacity>
+      <Pressable
+        onPress={handleOpen}
+        // Sits ON TOP of VideoView + the play-button overlay; transparent
+        // so the poster + play icon show through. Captures the tap and
+        // routes to handleOpen → setActiveModal(FILE_PREVIEW).
+        style={StyleSheet.absoluteFill}
+        accessibilityRole="button"
+        accessibilityLabel="Play video"
+      />
+    </View>
   );
 };