@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/components/MainComponents/MediaUploadOverlay.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useT } from '../../i18n/useT';
+
+interface MediaUploadOverlayProps {
+  /** `uploading` shows progress; `failed` shows the reason and a Retry. */
+  status: 'uploading' | 'failed';
+  /** 0 to 100, while uploading. */
+  progress?: number;
+  /** Re-runs this file's upload. Only offered for a failed file. */
+  onRetry?: () => void;
+}
+
+/**
+ * Covers one tile of an outgoing media message while its file uploads, and
+ * offers Retry when it did not. The scrim sits on the picture itself, so its
+ * colours are fixed rather than taken from the theme.
+ */
+const MediaUploadOverlay: React.FC<MediaUploadOverlayProps> = ({
+  status,
+  progress = 0,
+  onRetry,
+}) => {
+  const t = useT();
+  const percent = Math.min(100, Math.max(0, Math.round(progress)));
+
+  if (status === 'failed') {
+    return (
+      <View testID="media-upload-overlay" style={styles.overlay}>
+        <Text style={styles.failedText}>{t('attachment.uploadFailed')}</Text>
+        {onRetry && (
+          <Pressable
+            testID="media-upload-retry"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.retryUpload')}
+            onPress={onRetry}
+            style={styles.retry}
+          >
+            <Text style={styles.retryText}>{t('attachment.retryUpload')}</Text>
+          </Pressable>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View testID="media-upload-overlay" style={styles.overlay}>
+      <ActivityIndicator size="small" color="#FFFFFF" />
+      <Text style={styles.progressText}>{`${percent}%`}</Text>
+      <View style={styles.track} accessibilityRole="progressbar">
+        <View style={[styles.fill, { width: `${percent}%` }]} />
+      </View>
+    </View>
+  );
+};
+
+export default MediaUploadOverlay;
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    padding: 8,
+    backgroundColor: 'rgba(8, 12, 24, 0.5)',
+  },
+  progressText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 3,
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  fill: {
+    height: 3,
+    backgroundColor: '#FFFFFF',
+  },
+  failedText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  retry: {
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
+  },
+  retryText: {
+    color: '#111827',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+});

package/src/components/MessageBubble/MediaCaption.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
+
+interface MediaCaptionProps {
+  text?: string;
+  isUser: boolean;
+}
+
+/**
+ * The text sent with a media message, under the media inside the bubble.
+ * Plain text: mention spans are stored on the message but not rendered here.
+ */
+const MediaCaption: React.FC<MediaCaptionProps> = ({ text, isUser }) => {
+  const theme = useTheme();
+  const { config } = useChatSettingState();
+  if (!text) {return null;}
+  const typography = config?.typography?.messageText;
+  return (
+    <Text
+      testID="media-caption"
+      style={[
+        styles.caption,
+        { color: isUser ? theme.messageTextUser : theme.messageText },
+        typography?.fontSize ? { fontSize: typography.fontSize } : null,
+        typography?.fontWeight ? { fontWeight: typography.fontWeight as any } : null,
+      ]}
+    >
+      {text}
+    </Text>
+  );
+};
+
+export default MediaCaption;
+
+const styles = StyleSheet.create({
+  caption: {
+    fontSize: 16,
+    paddingHorizontal: 12,
+    paddingTop: 6,
+    paddingBottom: 2,
+    alignSelf: 'stretch',
+  },
+});

package/src/components/MessageBubble/Message.tsx

@@ -1,4 +1,5 @@
 import React, {
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -15,7 +16,7 @@ import {
   Text,
   Keyboard,
 } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { Avatar } from './Avatar';
 import { BubbleHighlight } from './BubbleHighlight';
@@ -43,7 +44,7 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { chatTextStyle } from '../../helpers/typography';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
-import { DoubleTick, LockIcon, LockOffIcon } from '../../assets/icons';
+import { DoubleTick, LockIcon, LockOffIcon, SingleTick } from '../../assets/icons';
 import { useT } from '../../i18n/useT';
 import { useFileToken } from '../../hooks/useFileToken';
 import {
@@ -66,6 +67,17 @@ import {
   requestUsers,
   subscribeUserResolver,
 } from '../../helpers/userResolver';
+import {
+  deliveredToOthers,
+  describeReceipt,
+  getReceiptStatus,
+  receiptNameFor,
+  selectSeenBy,
+  statusOf,
+} from '../../helpers/readReceipts';
+
+// Shared empty result for the seen-by selector (keeps shallowEqual cheap).
+const NO_RECEIPT_VIEWERS: string[] = [];
 
 // Stable-width stand-in for the sender name while its lookup is pending.
 const SENDER_NAME_PLACEHOLDER = '\u2026';
@@ -507,6 +519,42 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const isPending =
     !isFailed && (idSet.has(message.id) || message?.pending || false);
 
+  // Delivery and read state of our own messages (XEP-0184 / XEP-0333). The
+  // seen list is a small array compared shallowly, so a bubble only renders
+  // again when its own readers change, not on every message in the room.
+  // Same identity the list uses to decide ownership (MessageList passes
+  // xmppUsername || walletAddress), so the tick and the watermark agree.
+  const selfXmppUsername = user?.xmppUsername || user?.walletAddress || '';
+  const seenBy = useSelector(
+    (state: RootState) =>
+      isUser
+        ? selectSeenBy(state, message.roomJid, String(message.id), selfXmppUsername)
+        : NO_RECEIPT_VIEWERS,
+    shallowEqual
+  );
+  const readStatus = statusOf(
+    seenBy,
+    isUser ? deliveredToOthers(message, selfXmppUsername) : []
+  );
+  const reduxStore = useStore<RootState>();
+  // Touch (no hover on mobile): the details sheet names who read or got it.
+  const onReceiptPress = useCallback(() => {
+    const state = reduxStore.getState();
+    const room = state.rooms.rooms[message.roomJid];
+    const details = getReceiptStatus(message, room, selfXmppUsername);
+    Alert.alert(
+      describeReceipt({
+        status: details.status,
+        isGroup: room?.type !== 'private',
+        seenBy: details.seenBy,
+        deliveredTo: details.deliveredTo,
+        nameOf: (xmppUsername) =>
+          receiptNameFor(state.rooms.usersSet, xmppUsername),
+        t,
+      })
+    );
+  }, [reduxStore, message, selfXmppUsername, t]);
+
   const onRetryPress = () => {
     if (isFailed) {retryMessage(message.id);}
   };
@@ -667,7 +715,27 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           {timeLabel}
         </Text>
         {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
-          <DoubleTick />
+          <Pressable
+            onPress={onReceiptPress}
+            hitSlop={10}
+            accessibilityRole="button"
+            accessibilityLabel={
+              readStatus === 'seen'
+                ? t('message.receipt.read')
+                : readStatus === 'delivered'
+                  ? t('message.receipt.delivered')
+                  : t('message.receipt.sent')
+            }
+            testID="message-receipt-tick"
+          >
+            {readStatus === 'sent' ? (
+              <SingleTick stroke={theme.textMuted} />
+            ) : (
+              <DoubleTick
+                stroke={readStatus === 'seen' ? theme.primary : theme.textMuted}
+              />
+            )}
+          </Pressable>
         )}
       </CustomTimestampRow>
 

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -26,6 +26,7 @@ import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import { getEmojiNativeById } from '../../helpers/emoji';
+import { getMessageCaption } from '../../helpers/caption';
 import {
   quickReactionIds,
   reactionPickerEnabled,
@@ -376,7 +377,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               <Delimeter />
             </>
           )}
-          <MenuItem onPress={() => handleCopyMessage(message.body!)}>
+          <MenuItem onPress={() => handleCopyMessage(getMessageCaption(message) ?? message.body!)}>
             <Text style={[styles.menuText, themedStyles.text]}>
               {MESSAGE_INTERACTIONS.COPY}
             </Text>

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

@@ -430,6 +430,17 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
   };
 
+  // An album opens with its siblings; the viewer pages through them.
+  const albumSize = activeFile.siblings?.length ?? 0;
+  const albumIndex = activeFile.index ?? 0;
+  const goToSibling = (next: number) => {
+    const target = activeFile.siblings?.[next];
+    if (!target) {return;}
+    dispatch(
+      setActiveFile({ ...target, siblings: activeFile.siblings, index: next })
+    );
+  };
+
   const closeModal = () => {
     dispatch(
       setActiveFile({
@@ -606,6 +617,39 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         {getMediaComponent}
       </CenterContainer>
 
+      {albumSize > 1 && (
+        <View style={styles.albumNav} testID="file-preview-album-nav">
+          <TouchableOpacity
+            testID="file-preview-prev"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.previous')}
+            disabled={albumIndex <= 0}
+            onPress={() => goToSibling(albumIndex - 1)}
+            hitSlop={12}
+            style={[styles.albumArrow, albumIndex <= 0 && styles.albumArrowOff]}
+          >
+            <Text style={[styles.albumArrowText, { color: theme.text }]}>{'\u2039'}</Text>
+          </TouchableOpacity>
+          <Text style={{ color: theme.textSecondary }}>
+            {t('attachment.position', { index: albumIndex + 1, total: albumSize })}
+          </Text>
+          <TouchableOpacity
+            testID="file-preview-next"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.next')}
+            disabled={albumIndex >= albumSize - 1}
+            onPress={() => goToSibling(albumIndex + 1)}
+            hitSlop={12}
+            style={[
+              styles.albumArrow,
+              albumIndex >= albumSize - 1 && styles.albumArrowOff,
+            ]}
+          >
+            <Text style={[styles.albumArrowText, { color: theme.text }]}>{'\u203A'}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
     </ModalContainerFullScreen>
   );
 };
@@ -629,6 +673,26 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
   },
+  albumNav: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    paddingBottom: 24,
+  },
+  albumArrow: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  albumArrowOff: {
+    opacity: 0.3,
+  },
+  albumArrowText: {
+    fontSize: 32,
+    lineHeight: 36,
+  },
   videoMessage: {
     alignItems: 'center',
     gap: 8,

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -7,12 +7,16 @@ import LastMessageEmoji from './styled/LastMessageEmoji';
 import LastMessageFile from './styled/LastMessageFile';
 import LastAudioMessage from './styled/LastAudioMessage';
 import LastMessageSealed from './styled/LastMessageSealed';
+import { getMessageAttachments } from '../../helpers/attachments';
+import { getMessageCaption } from '../../helpers/caption';
+import { useT } from '../../i18n/useT';
 
 interface LastMessageItemProps {
   lastMessage: LastMessage;
 }
 
 const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
+  const t = useT();
   const { body, emoji, mimetype } = lastMessage;
 
   if (lastMessage?.clientEncrypted === 'true') {
@@ -20,22 +24,29 @@ const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
   }
 
   if (mimetype) {
+    // What the row says about the file: its caption, else how many files
+    // there are; undefined keeps the single file's own name.
+    const count = getMessageAttachments(lastMessage).length;
+    const label =
+      getMessageCaption(lastMessage, { isMedia: true }) ??
+      (count > 1 ? t('attachment.count', { count }) : undefined);
+
     if (mimetype.startsWith('image/')) {
-      return <LastMessagePhoto {...lastMessage} />;
+      return <LastMessagePhoto {...lastMessage} label={label} />;
     }
 
     if (mimetype.startsWith('video/')) {
-      return <LastMessageVideo {...lastMessage} />;
+      return <LastMessageVideo {...lastMessage} label={label} />;
     }
 
     if (
       mimetype.startsWith('audio/') ||
       mimetype.includes('application/octet-stream')
     ) {
-      return <LastAudioMessage {...lastMessage} />;
+      return <LastAudioMessage {...lastMessage} label={label} />;
     }
 
-    return <LastMessageFile {...lastMessage} />;
+    return <LastMessageFile {...lastMessage} label={label} />;
   }
 
   if (emoji) {

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -10,7 +10,10 @@ import { View } from 'react-native';
 import { PlayIcon } from '../../../assets/icons';
 import { useTheme } from '../../../hooks/useTheme';
 
-interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
+interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {
+  /** Replaces the body: the caption, or the count of files. */
+  label?: string;
+}
 
 const PlayButton = styled.View`
   width: 20px;
@@ -29,7 +32,7 @@ const AudioRow = styled.View`
   gap: 6px;
 `;
 
-const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body, label }) => {
   const theme = useTheme();
   return (
     <LastRoomMessageContainer>
@@ -41,7 +44,7 @@ const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
           <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />
         </PlayButton>
         <LastRoomMessageText numberOfLines={1}>
-          {body?.trim() ? body : 'audio'}
+          {label ?? (body?.trim() ? body : 'audio')}
         </LastRoomMessageText>
       </AudioRow>
     </LastRoomMessageContainer>

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -20,7 +20,10 @@ interface LastMessageFileProps
   extends Pick<
     LastMessage,
     'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -31,6 +34,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
   fileName,
   mimetype,
   locationPreview,
+  label,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
   const fileToken = useFileToken();
@@ -69,7 +73,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
         ) : (
           <FileIcon width={20} height={20} />
         )}
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -29,7 +29,10 @@ interface LastMessagePhotoProps
   extends Pick<
     LastMessage,
     'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
@@ -37,6 +40,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   originalName,
   fileName,
   mimetype,
+  label,
 }) => {
   const fileToken = useFileToken();
   // Bug #40: prefer the sender's original name over the stored hash
@@ -60,7 +64,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
             <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -44,7 +44,10 @@ interface LastMessageVideoProps
   extends Pick<
     LastMessage,
     'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
@@ -52,6 +55,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
   originalName,
   fileName,
   mimetype,
+  label,
 }) => {
   const fileToken = useFileToken();
   // Bug #40: prefer the sender's original name over the stored hash
@@ -76,7 +80,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/Thread/ThreadWrapper.tsx

@@ -237,15 +237,11 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   );
 
   const sendMedia = useCallback(
-    (data: any, type: string) => {
-      return sendMessageMedia(
-        data,
-        type,
-        roomJid,
-        true,
-        isChecked,
-        createMainMessageForThread(activeMessage)
-      );
+    (data: any, type: string, caption?: { text: string }) => {
+      const mainMessage = createMainMessageForThread(activeMessage);
+      return caption
+        ? sendMessageMedia(data, type, roomJid, true, isChecked, mainMessage, undefined, caption)
+        : sendMessageMedia(data, type, roomJid, true, isChecked, mainMessage);
     },
     [activeMessage, isChecked, roomJid, sendMessageMedia]
   );

package/src/components/VideoCalls/ActiveCallBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -9,10 +9,24 @@ import { useT } from '../../i18n/useT';
 import { ExpandIcon, HangUpIcon, MicOffIcon, MicOnIcon } from './CallIcons';
 import { toggleCallMic, useCallSession } from './callSessionController';
 import { terminateActiveCall } from './callActions';
-import { registerCallBarHost, setCallMinimized, useCallUi } from './callUiStore';
+import {
+  registerCallBarHost,
+  setCallBarAnchor,
+  setCallMinimized,
+  useCallUi,
+} from './callUiStore';
 import { formatCallDuration, useSharedCallElapsed } from './VideoCallSession';
 
 const DANGER = '#E53935';
+
+/**
+ * The strip's geometry: a floating bubble under the header. Exported so the
+ * collapse animation of the full-screen call lands exactly on it.
+ */
+export const CALL_BAR_HEIGHT = 52;
+export const CALL_BAR_MARGIN_X = 8;
+export const CALL_BAR_MARGIN_TOP = 6;
+export const CALL_BAR_RADIUS = 18;
 const ON_BAR = '#FFFFFF';
 const CONTROL = 'rgba(255, 255, 255, 0.2)';
 
@@ -33,7 +47,7 @@ const useShowCallBar = (): boolean => {
  * Tapping anywhere on it (outside the buttons) brings the call back
  * full-screen, like Telegram's "return to call" bar.
  */
-export const ActiveCallBar: FC<{ topInset?: number }> = ({ topInset = 0 }) => {
+export const ActiveCallBar: FC = () => {
   const t = useT();
   const theme = useTheme();
   const { icons } = useChatSettingState().config?.videoCalls || {};
@@ -60,7 +74,7 @@ export const ActiveCallBar: FC<{ topInset?: number }> = ({ topInset = 0 }) => {
       onPress={expand}
       accessibilityRole="button"
       accessibilityLabel={t('call.action.expand')}
-      style={[styles.bar, { backgroundColor: theme.success, paddingTop: 8 + topInset }]}
+      style={[styles.bar, { backgroundColor: theme.success }]}
     >
       <View style={styles.info}>
         <Text numberOfLines={1} style={styles.name}>
@@ -112,12 +126,31 @@ export const HeaderCallBar: FC = () => {
   const [hostId, setHostId] = useState<number | null>(null);
   const { barHost } = useCallUi();
   const show = useShowCallBar();
+  const anchorRef = useRef<View>(null);
+  const isHost = hostId !== null && barHost === hostId;
 
   // Returns its own unregister, which is the effect's cleanup.
   useEffect(() => registerCallBarHost(setHostId), []);
 
-  if (!show || hostId === null || barHost !== hostId) {return null;}
-  return <ActiveCallBar />;
+  // Where the strip goes on screen, for the collapse animation to aim at.
+  const measure = useCallback(() => {
+    if (hostId === null) {return;}
+    anchorRef.current?.measureInWindow((_x, y) => {
+      if (Number.isFinite(y)) {setCallBarAnchor(hostId, y);}
+    });
+  }, [hostId]);
+
+  useEffect(() => {
+    if (isHost) {measure();}
+  }, [isHost, measure]);
+
+  return (
+    <>
+      {/* Zero-height marker at the top of the strip slot. */}
+      <View ref={anchorRef} collapsable={false} onLayout={measure} style={styles.anchor} />
+      {show && isHost ? <ActiveCallBar /> : null}
+    </>
+  );
 };
 
 /**
@@ -130,8 +163,8 @@ export const DockedCallBar: FC = () => {
   const show = useShowCallBar();
   if (!show || barHost !== null) {return null;}
   return (
-    <View style={styles.docked} pointerEvents="box-none">
-      <ActiveCallBar topInset={insets.top} />
+    <View style={[styles.docked, { paddingTop: insets.top }]} pointerEvents="box-none">
+      <ActiveCallBar />
     </View>
   );
 };
@@ -141,8 +174,21 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 10,
-    paddingHorizontal: 16,
-    paddingBottom: 8,
+    height: CALL_BAR_HEIGHT,
+    marginHorizontal: CALL_BAR_MARGIN_X,
+    marginTop: CALL_BAR_MARGIN_TOP,
+    marginBottom: 2,
+    paddingLeft: 16,
+    paddingRight: 9,
+    borderRadius: CALL_BAR_RADIUS,
+    shadowColor: '#000',
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3,
+  },
+  anchor: {
+    height: 0,
   },
   info: {
     flex: 1,