@ethora/chat-component-rn 26.8.6 → 26.8.8

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -11,6 +11,8 @@ import {
   setConfig,
   setPushEnabled,
   setThemePreference,
+  setUiLocale,
+  setLangSource,
 } from '../../roomStore/chatSettingsSlice';
 import {loadPreferences} from '../../helpers/preferencesStorage';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
@@ -22,6 +24,7 @@ import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
 import {installPushTokenHook} from '../../services/pushRegistration';
+import {setE2eeEnabled} from '../../e2ee';
 
 // Mount-time, dev-only — wire a global unhandled-promise-rejection
 // tracker so any future leak surfaces with a real stack trace in Metro
@@ -57,6 +60,10 @@ const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
     if (!config) {return;}
     dispatch(setConfig(config));
   }, [config, dispatch]);
+  const e2eeEnabled = config?.e2ee?.enabled === true;
+  React.useEffect(() => {
+    setE2eeEnabled(e2eeEnabled);
+  }, [e2eeEnabled]);
   return null;
 };
 
@@ -85,6 +92,10 @@ const ChatThemeProvider: React.FC<{config?: IConfig; children: React.ReactNode}>
       if (typeof prefs.pushEnabled === 'boolean') {
         dispatch(setPushEnabled(prefs.pushEnabled));
       }
+      // The user's languages, as last picked here; the profile's values
+      // take over once the session is up (see languageSettings).
+      if (prefs.uiLocale) {dispatch(setUiLocale(prefs.uiLocale));}
+      if (prefs.chatLanguage) {dispatch(setLangSource(prefs.chatLanguage as any));}
     });
   }, [dispatch]);
 

package/src/components/MainComponents/SealedAttachment.tsx

@@ -0,0 +1,251 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { LockIcon } from '../../assets/icons';
+import FileDownload from '../styled/UnsupportedType';
+import CustomMessageImage from '../styled/MessageImage';
+import CustomMessageVideo from '../styled/VideoMessage';
+import AudioMessage from '../styled/AudioMessage';
+import {
+  BackgroundFile,
+  FileInformation,
+  FileName,
+  FileSize,
+  FileSizeContainer,
+  UnsupportedContainer,
+} from '../styled/StyledInputComponents/MediaComponents';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { IMessage } from '../../types/types';
+import { withFileToken } from '../../helpers/secureFileUrl';
+import type { OpenedFile } from '../../e2ee/sealedFiles';
+
+const sealedFiles = () =>
+  require('../../e2ee/sealedFiles') as typeof import('../../e2ee/sealedFiles');
+
+interface SealedRef {
+  location: string;
+  size?: string | number;
+}
+
+export const sealedAttachmentsOf = (message?: IMessage | null): SealedRef[] => {
+  if (!message) {return [];}
+  let raw: unknown = (message as any).attachments;
+  if (typeof raw === 'string') {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      raw = undefined;
+    }
+  }
+  if (Array.isArray(raw) && raw.length > 0) {
+    return raw
+      .filter((item) => item && typeof item.location === 'string' && item.location)
+      .map((item) => ({ location: item.location, size: item.size }));
+  }
+  return message.location
+    ? [{ location: message.location, size: message.size }]
+    : [];
+};
+
+const formatBytes = (value?: string | number): string => {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) {return '';}
+  if (bytes < 1024) {return `${bytes} B`;}
+  if (bytes < 1024 * 1024) {return `${(bytes / 1024).toFixed(0)} KB`;}
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+type CardState = 'idle' | 'working' | 'failed';
+
+const SealedItem: React.FC<{
+  attachment: SealedRef;
+  keyMaterial?: string;
+  isUser: boolean;
+}> = ({ attachment, keyMaterial, isUser }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config } = useChatSettingState();
+  const [state, setState] = useState<CardState>('idle');
+  const [progress, setProgress] = useState(0);
+  const [opened, setOpened] = useState<OpenedFile | null>(null);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  const { location } = attachment;
+
+  useEffect(() => {
+    if (!keyMaterial || !location) {return;}
+    let active = true;
+    sealedFiles()
+      .findOpened(location)
+      .then((found) => {
+        if (active && found) {setOpened(found);}
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [keyMaterial, location]);
+
+  const handlePress = useCallback(async () => {
+    if (opened || !keyMaterial || !location || state === 'working') {return;}
+    setState('working');
+    setProgress(0);
+    try {
+      const file = await sealedFiles().openSealedAttachment(
+        location,
+        withFileToken(location),
+        keyMaterial,
+        (fraction) => {
+          if (mounted.current) {setProgress(fraction);}
+        }
+      );
+      if (!mounted.current) {return;}
+      setOpened(file);
+      setState('idle');
+    } catch (error) {
+      console.warn('sealed attachment could not be opened', error);
+      if (mounted.current) {setState('failed');}
+    }
+  }, [keyMaterial, location, opened, state]);
+
+  if (opened) {
+    if (opened.mimetype.startsWith('image/')) {
+      return (
+        <View testID="sealed-attachment-image">
+          <CustomMessageImage
+            fileName={opened.name}
+            originalName={opened.name}
+            fileURL={opened.uri}
+            locationPreview={opened.uri}
+            mimetype={opened.mimetype}
+          />
+        </View>
+      );
+    }
+    if (opened.mimetype.startsWith('video/')) {
+      return (
+        <CustomMessageVideo
+          fileName={opened.name}
+          originalName={opened.name}
+          fileURL={opened.uri}
+          mimetype={opened.mimetype}
+        />
+      );
+    }
+    if (opened.mimetype.startsWith('audio/')) {
+      return (
+        <AudioMessage
+          src={opened.uri}
+          mimeType={opened.mimetype}
+          fileName={opened.name}
+          originalName={opened.name}
+        />
+      );
+    }
+    return (
+      <View testID="sealed-attachment">
+        <FileDownload
+          fileURL={opened.uri}
+          fileName={opened.name}
+          originalName={opened.name}
+          mimetype={opened.mimetype}
+          isUser={isUser}
+        />
+      </View>
+    );
+  }
+
+  const canOpen = !!keyMaterial && !!location;
+  const working = state === 'working';
+  const note = !canOpen
+    ? t(
+        config?.e2ee?.enabled === true
+          ? 'media.sealedUnavailable'
+          : 'media.sealedUnsupported'
+      )
+    : working
+      ? `${t('media.sealedDownloading')} ${Math.round(progress * 100)}%`
+      : state === 'failed'
+        ? t('media.sealedDownloadFailed')
+        : formatBytes(attachment.size) || t('media.sealedDownload');
+
+  return (
+    <UnsupportedContainer
+      isUser={isUser}
+      onPress={handlePress}
+      disabled={!canOpen || working}
+      activeOpacity={canOpen && !working ? 0.7 : 1}
+      testID="sealed-attachment"
+      accessibilityRole="button"
+      accessibilityLabel={t(canOpen ? 'media.sealedDownload' : 'media.sealedFile')}
+    >
+      <BackgroundFile>
+        {working ? (
+          <ActivityIndicator size="small" color={theme.textSecondary} />
+        ) : (
+          <LockIcon width={26} height={26} color={theme.textSecondary} />
+        )}
+      </BackgroundFile>
+      <FileInformation>
+        <FileName
+          numberOfLines={1}
+          isUser={isUser}
+          colorIsUser={config?.colors?.primary}
+          colorUsers={config?.colors?.secondary}
+        >
+          {t('media.sealedFile')}
+        </FileName>
+        <FileSizeContainer style={styles.note}>
+          <FileSize
+            numberOfLines={2}
+            style={state === 'failed' && canOpen ? { color: theme.danger } : undefined}
+          >
+            {note}
+          </FileSize>
+        </FileSizeContainer>
+      </FileInformation>
+    </UnsupportedContainer>
+  );
+};
+
+const SealedAttachment: React.FC<{ message?: IMessage; isUser: boolean }> = ({
+  message,
+  isUser,
+}) => {
+  const attachments = sealedAttachmentsOf(message);
+  const keys = message?.e2eeKeys;
+  if (attachments.length === 0) {
+    return <SealedItem attachment={{ location: '' }} isUser={isUser} />;
+  }
+  return (
+    <View style={styles.stack}>
+      {attachments.map((attachment, index) => (
+        <SealedItem
+          key={attachment.location || index}
+          attachment={attachment}
+          keyMaterial={keys?.[index]}
+          isUser={isUser}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default SealedAttachment;
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 8,
+  },
+  note: {
+    flexShrink: 1,
+    borderRadius: 10,
+  },
+});

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -30,14 +30,27 @@ import {
   shouldDismissOnDrag,
 } from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
+import { useT } from '../../i18n/useT';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
 
-const DEFAULT_LOGOUT_LABEL = 'Sign out';
+/** The sign-out copy in the UI language; a host's `logout.label` etc. win. */
+export interface LogoutStrings {
+  label: string;
+  message: string;
+  cancel: string;
+}
+
+const DEFAULT_LOGOUT_STRINGS: LogoutStrings = {
+  label: 'Sign out',
+  message: 'Are you sure you want to sign out?',
+  cancel: 'Cancel',
+};
 
 const confirmLogout = (
   confirm: LogoutConfig['confirm'],
-  label: string
+  label: string,
+  strings: LogoutStrings
 ): Promise<boolean> => {
   if (confirm === false) {
     return Promise.resolve(true);
@@ -46,10 +59,10 @@ const confirmLogout = (
   return new Promise<boolean>((resolve) => {
     Alert.alert(
       copy.title ?? label,
-      copy.message ?? 'Are you sure you want to sign out?',
+      copy.message ?? strings.message,
       [
         {
-          text: copy.cancelText ?? 'Cancel',
+          text: copy.cancelText ?? strings.cancel,
           style: 'cancel',
           onPress: () => resolve(false),
         },
@@ -66,10 +79,15 @@ const confirmLogout = (
 
 export const runLogoutFlow = async (
   logoutConfig: LogoutConfig,
-  performLogout: () => Promise<void>
+  performLogout: () => Promise<void>,
+  strings: LogoutStrings = DEFAULT_LOGOUT_STRINGS
 ): Promise<void> => {
-  const label = logoutConfig.label ?? DEFAULT_LOGOUT_LABEL;
-  const confirmed = await confirmLogout(logoutConfig.confirm ?? true, label);
+  const label = logoutConfig.label ?? strings.label;
+  const confirmed = await confirmLogout(
+    logoutConfig.confirm ?? true,
+    label,
+    strings
+  );
   if (!confirmed) {
     return;
   }
@@ -112,7 +130,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
   const performLogout = useLogout();
+  const t = useT();
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
+  const logoutStrings = useMemo<LogoutStrings>(
+    () => ({
+      label: t('menu.logout'),
+      message: t('menu.logoutConfirm'),
+      cancel: t('action.cancel'),
+    }),
+    [t]
+  );
   const theme = useTheme();
   const primaryColor = theme.primary;
   const iconColor = theme.icon;
@@ -246,7 +273,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       styles?: { color: string };
     }[] = [
       {
-        label: 'New Chat',
+        label: t('menu.newChat'),
         icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
@@ -254,14 +281,14 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         styles: { color: labelColor },
       },
       {
-        label: 'Profile',
+        label: t('menu.profile'),
         icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
         },
       },
       {
-        label: 'Settings',
+        label: t('menu.settings'),
         icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
@@ -270,16 +297,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     ];
     if (logoutConfig) {
       options.push({
-        label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
+        label: logoutConfig.label ?? logoutStrings.label,
         icon: <LogoutIcon color={iconColor} />,
         styles: { color: primaryColor },
         onClick: () => {
-          runLogoutFlow(logoutConfig, performLogout).catch(() => {});
+          runLogoutFlow(logoutConfig, performLogout, logoutStrings).catch(() => {});
         },
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
+  }, [dispatch, logoutConfig, logoutStrings, performLogout, primaryColor, iconColor, labelColor, t]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was

package/src/components/MenuRoom/MenuRoom.tsx

@@ -2,16 +2,18 @@ import { FC, useMemo } from 'react';
 import DropdownMenu from '../DropdownMenu/DropdownMenu';
 import Button from '../styled/Button';
 import { LeaveIcon, MoreIcon, ReportIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
 
 interface RoomMenuProps {
   handleLeaveClick: () => void;
 }
 
 export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
+  const t = useT();
   const menuOptions = useMemo(
     () => [
       {
-        label: 'Report',
+        label: t('action.report'),
         icon: <ReportIcon />,
         onClick: () => {
           console.log('Report clicked');
@@ -19,7 +21,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
       {
-        label: 'Leave',
+        label: t('action.leave'),
         icon: <LeaveIcon />,
         onClick: () => {
           handleLeaveClick();
@@ -27,7 +29,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
     ],
-    [handleLeaveClick]
+    [handleLeaveClick, t]
   );
 
   return (

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react';
+import { composeName } from '../../helpers/displayName';
 import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
@@ -68,7 +69,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
     const raw = String(u?.id || '');
     const entry = usersSet?.[raw.split('@')[0]] || usersSet?.[raw];
     const full = entry
-      ? `${entry.firstName || ''} ${entry.lastName || ''}`.trim() || entry.name
+      ? composeName(entry.firstName, entry.lastName) || entry.name
       : '';
     return full || u?.name || '';
   };

package/src/components/MessageBubble/Message.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   Animated,
   View,
   Pressable,
@@ -36,7 +37,16 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { chatTextStyle } from '../../helpers/typography';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
-import { DoubleTick } from '../../assets/icons';
+import { DoubleTick, LockIcon, LockOffIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
+import { composeName } from '../../helpers/displayName';
+import { useFileToken } from '../../hooks/useFileToken';
+import {
+  appendFileToken,
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
+import { placeholderKey } from '../../e2ee/stanza';
 import { useXmppClient } from '../../context/xmppProvider';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
@@ -168,6 +178,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // only per-render allocations added for theming (memoized on the theme
   // object, which useTheme keeps stable across renders).
   const theme = useTheme();
+  const t = useT();
   const themedStyles = useMemo(
     () => ({
       muted: { color: theme.textMuted },
@@ -226,7 +237,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // (which may carry senderFirstName/senderLastName from the wire) only when
   // usersSet has never seen this sender.
   const senderDisplayName = senderEntry
-    ? `${senderEntry.firstName ?? ''} ${senderEntry.lastName ?? ''}`.trim() ||
+    ? composeName(senderEntry.firstName, senderEntry.lastName) ||
       senderEntry.name ||
       senderLocal
     : message.user?.name || senderLocal || 'Unknown';
@@ -235,8 +246,18 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // ends at 50 characters of hex. Captioning a bubble with that tells the
   // reader strictly less than showing nothing.
   const hasRealSenderName = !isUnresolvedSenderId(senderDisplayName);
+  const fileToken = useFileToken();
+  const [avatarFailed, setAvatarFailed] = useState<string | null>(null);
+  const rawProfileImage = String(
+    senderEntry?.profileImage ||
+      message.user?.profileImage ||
+      (message.user as any)?.photoURL ||
+      ''
+  ).trim();
   const senderProfileImage =
-    senderEntry?.profileImage || message.user?.profileImage || '';
+    rawProfileImage && rawProfileImage !== 'none' && rawProfileImage !== avatarFailed
+      ? appendFileToken(rawProfileImage, fileToken)
+      : '';
   const { idSet, failedIdSet } = useMessageHeapState();
   const { retryMessage } = useSendMessage();
 
@@ -407,8 +428,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   );
   // In auto mode, render the translation as the primary body — but NEVER for
   // the reader's own messages (they wrote it; no point translating it back).
+  const isUndecryptable =
+    message.undecryptable === 'true' && !message.isDeleted;
   const showInlineTranslation =
-    isAutoTranslate && translationDisplay.hasTranslation && !isUser;
+    isAutoTranslate &&
+    translationDisplay.hasTranslation &&
+    !isUser &&
+    !isUndecryptable;
   const bodyToRender = showInlineTranslation
     ? translationDisplay.displayText
     : message.body;
@@ -460,13 +486,32 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             onPress={
               config?.disableProfilesInteractions
                 ? undefined
-                : () => handleUserAvatarClick(message.user)
+                : () =>
+                    handleUserAvatarClick({
+                      ...message.user,
+                      ...(senderEntry
+                        ? {
+                            firstName: senderEntry.firstName,
+                            lastName: senderEntry.lastName,
+                            profileImage: senderEntry.profileImage,
+                            description: senderEntry.description,
+                          }
+                        : {}),
+                      name: hasRealSenderName ? senderDisplayName : '',
+                    } as IUser)
             }
             disabled={!!config?.disableProfilesInteractions}
             accessible={!config?.disableProfilesInteractions}
           >
             {senderProfileImage ? (
-              <CustomMessagePhoto source={{ uri: senderProfileImage }} />
+              <CustomMessagePhoto
+                testID="message-sender-avatar"
+                source={{ uri: senderProfileImage }}
+                onError={() => {
+                  if (isSecureFileUrl(rawProfileImage)) {requestFileTokenRecovery();}
+                  setAvatarFailed(rawProfileImage);
+                }}
+              />
             ) : (
               <Avatar username={senderDisplayName} />
             )}
@@ -537,6 +582,26 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               <>
                 {message.isDeleted && message.id !== 'delimiter-new' ? (
                   <DeletedMessage />
+                ) : isUndecryptable ? (
+                  <View style={styles.undecryptable}>
+                    <LockIcon
+                      width={15}
+                      height={15}
+                      color={theme.textSecondary}
+                    />
+                    <Text
+                      style={[
+                        styles.undecryptableText,
+                        themedStyles.muted,
+                        {
+                          fontSize:
+                            config?.typography?.messageText?.fontSize ?? 15,
+                        },
+                      ]}
+                    >
+                      {t(placeholderKey(message.e2eeError))}
+                    </Text>
+                  </View>
                 ) : (
                   <CustomMessageText
                     isUser={isUser}
@@ -565,6 +630,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 renders the translation inline in the body above). Never on
                 the reader's own messages. */}
             {!isUser &&
+              !isUndecryptable &&
               isTranslatesEnabled &&
               effectiveTranslateMode === 'manual' && (
                 <MessageTranslate
@@ -578,7 +644,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (
                 <Text style={[styles.timestampText, themedStyles.muted]}>
-                  sending...
+                  {t('message.sending')}
                 </Text>
               )}
               {!config?.disableSentLogic && isUser && isFailed && (
@@ -588,11 +654,25 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                   accessibilityRole="button"
                   accessibilityLabel="Retry sending message"
                 >
-                  ! Failed — tap to retry
+                  {t('message.failedRetry')}
                 </Text>
               )}
               {message?.isEdited && !message?.isDeleted && (
-                <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
+                <Text style={[styles.editedText, themedStyles.muted]}>{t('message.edited')}</Text>
+              )}
+              {message?.unencrypted && !message?.isDeleted && (
+                <Pressable
+                  hitSlop={10}
+                  accessibilityRole="button"
+                  accessibilityLabel={t('e2ee.notEncrypted')}
+                  accessibilityHint={t('e2ee.notEncryptedHint')}
+                  testID="message-not-encrypted"
+                  onPress={() =>
+                    Alert.alert(t('e2ee.notEncrypted'), t('e2ee.notEncryptedHint'))
+                  }
+                >
+                  <LockOffIcon width={13} height={13} color={theme.danger} />
+                </Pressable>
               )}
               <Text style={[styles.timestampText, themedStyles.muted]}>
                 {timeLabel}
@@ -718,6 +798,16 @@ const styles = StyleSheet.create({
     marginTop: 4,
     gap: 4,
   },
+  undecryptable: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 6,
+    maxWidth: 260,
+  },
+  undecryptableText: {
+    flexShrink: 1,
+    fontStyle: 'italic',
+  },
   timestampText: {
     fontSize: 12,
     lineHeight: 16,