stream-chat-react-native-core 5.34.1-beta.5 → 5.35.0-beta.1

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -6,7 +6,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -25,6 +25,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -40,14 +41,14 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#7A7A7A"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#7A7A7A"
     style={
       [
         {
@@ -56,40 +57,86 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4286216826,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
-      <RNSVGPath
-        clipRule={0}
-        d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+      <RNSVGGroup
+        clipPath="id"
         fill={
           {
-            "payload": 4286216826,
+            "payload": 4278190080,
             "type": 0,
           }
         }
-        fillRule={0}
-        propList={
-          [
-            "fill",
-            "fillRule",
-          ]
-        }
-      />
+      >
+        <RNSVGPath
+          d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
+          fill={
+            {
+              "payload": 4286216826,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+      <RNSVGDefs>
+        <RNSVGClipPath
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          name="id"
+        >
+          <RNSVGRect
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            height={32}
+            matrix={
+              [
+                1,
+                0,
+                0,
+                1,
+                0.191406,
+                0,
+              ]
+            }
+            width={32}
+            x={0}
+            y={0}
+          />
+        </RNSVGClipPath>
+      </RNSVGDefs>
     </RNSVGGroup>
   </RNSVGSvgView>
 </View>
@@ -120,6 +167,7 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -135,14 +183,14 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#7A7A7A"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#7A7A7A"
     style={
       [
         {
@@ -151,40 +199,86 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4286216826,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
-      <RNSVGPath
-        clipRule={0}
-        d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+      <RNSVGGroup
+        clipPath="id"
         fill={
           {
-            "payload": 4286216826,
+            "payload": 4278190080,
             "type": 0,
           }
         }
-        fillRule={0}
-        propList={
-          [
-            "fill",
-            "fillRule",
-          ]
-        }
-      />
+      >
+        <RNSVGPath
+          d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
+          fill={
+            {
+              "payload": 4286216826,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+      <RNSVGDefs>
+        <RNSVGClipPath
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          name="id"
+        >
+          <RNSVGRect
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            height={32}
+            matrix={
+              [
+                1,
+                0,
+                0,
+                1,
+                0.191406,
+                0,
+              ]
+            }
+            width={32}
+            x={0}
+            y={0}
+          />
+        </RNSVGClipPath>
+      </RNSVGDefs>
     </RNSVGGroup>
   </RNSVGSvgView>
 </View>

package/src/components/MessageInput/components/InputGiphySearch.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import { CircleClose, Lightning } from '../../../icons';
+import { CircleClose, GiphyLightning } from '../../../icons';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { AutoCompleteInput } from '../../AutoCompleteInput/AutoCompleteInput';
 import { useCountdown } from '../hooks/useCountdown';
@@ -23,9 +23,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 12,
     flexDirection: 'row',
-    height: 24,
     marginRight: 8,
     paddingHorizontal: 8,
+    paddingVertical: 4,
   },
   giphyText: {
     fontSize: 12,
@@ -80,7 +80,7 @@ export const InputGiphySearch = <
   return (
     <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
       <View style={[styles.giphyContainer, { backgroundColor: accent_blue }, giphyContainer]}>
-        <Lightning height={16} pathFill={white} width={16} />
+        <GiphyLightning fill={white} size={16} />
         <Text style={[styles.giphyText, { color: white }, giphyText]}>GIPHY</Text>
       </View>
 

package/src/components/MessageInput/components/NativeAttachmentPicker.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, LayoutRectangle, Pressable, StyleSheet } from 'react-native';
+
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
+import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
+import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
+
+type NativeAttachmentPickerProps = {
+  onRequestedClose: () => void;
+  attachButtonLayoutRectangle?: LayoutRectangle;
+};
+
+const TOP_PADDING = 4;
+const ATTACH_MARGIN_BOTTOM = 4;
+
+export const NativeAttachmentPicker = ({
+  attachButtonLayoutRectangle,
+  onRequestedClose,
+}: NativeAttachmentPickerProps) => {
+  const size = attachButtonLayoutRectangle?.width ?? 0;
+  const attachButtonItemSize = 40;
+  const NUMBER_OF_BUTTONS = 3;
+  const {
+    theme: {
+      colors: { grey_whisper },
+      messageInput: {
+        nativeAttachmentPicker: {
+          buttonContainer,
+          buttonDimmerStyle: buttonDimmerStyleTheme,
+          container,
+        },
+      },
+    },
+  } = useTheme();
+  const {
+    hasFilePicker,
+    hasImagePicker,
+    pickAndUploadImageFromNativePicker,
+    pickFile,
+    takeAndUploadImage,
+  } = useMessageInputContext();
+
+  const popupHeight =
+    // the top padding
+    TOP_PADDING +
+    // take margins into account
+    ATTACH_MARGIN_BOTTOM * NUMBER_OF_BUTTONS +
+    // the size of the attachment icon items (same size as attach button * amount of attachment button types)
+    attachButtonItemSize * NUMBER_OF_BUTTONS;
+
+  const containerPopupStyle = {
+    borderTopEndRadius: size / 2,
+    // the popup should be rounded as the attach button
+    borderTopStartRadius: size / 2,
+    height: popupHeight,
+    // from the same side horizontal coordinate of the attach button
+    left: attachButtonLayoutRectangle?.x,
+    // we should show the popup right above the attach button and not top of it
+    top: (attachButtonLayoutRectangle?.y ?? 0) - popupHeight,
+    // the width of the popup should be the same as the attach button
+    width: size,
+  };
+
+  const elasticAnimRef = useRef(new Animated.Value(0.5)); // Initial value for scale: 0.5
+
+  useEffect(() => {
+    Animated.timing(elasticAnimRef.current, {
+      duration: 150,
+      easing: Easing.linear,
+      toValue: 1,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const buttonStyle = {
+    borderRadius: attachButtonItemSize / 2,
+    height: attachButtonItemSize,
+    width: attachButtonItemSize,
+  };
+
+  const buttonDimmerStyle = {
+    ...styles.attachButtonDimmer,
+    height: size,
+    // from the same side horizontal coordinate of the attach button
+    left: attachButtonLayoutRectangle?.x,
+    // we should show the popup right on top of the attach button
+    top: attachButtonLayoutRectangle?.y ?? 0 - popupHeight + size,
+    width: size,
+  };
+
+  const onClose = ({ onPressHandler }: { onPressHandler?: () => Promise<void> }) => {
+    if (onPressHandler) {
+      onPressHandler();
+    }
+    Animated.timing(elasticAnimRef.current, {
+      duration: 150,
+      easing: Easing.linear,
+      toValue: 0.2,
+      useNativeDriver: true,
+    }).start(onRequestedClose);
+  };
+
+  const buttons = [];
+
+  if (hasImagePicker) {
+    buttons.push({
+      icon: <ImageSelectorIcon />,
+      id: 'Image',
+      onPressHandler: pickAndUploadImageFromNativePicker,
+    });
+  }
+  if (hasFilePicker) {
+    buttons.push({ icon: <FileSelectorIcon />, id: 'File', onPressHandler: pickFile });
+  }
+  buttons.push({ icon: <CameraSelectorIcon />, id: 'Camera', onPressHandler: takeAndUploadImage });
+
+  return (
+    <>
+      <Pressable
+        onPress={() => {
+          onClose({});
+        }}
+        style={[styles.container, containerPopupStyle, container]}
+      >
+        {/* all the attach buttons */}
+        {buttons.map(({ icon, id, onPressHandler }) => (
+          <Pressable key={id} onPress={() => onClose({ onPressHandler })}>
+            <Animated.View
+              style={[
+                styles.buttonContainer,
+                buttonStyle,
+                {
+                  // temporary background color until we have theming
+                  backgroundColor: grey_whisper,
+                },
+                {
+                  transform: [
+                    {
+                      scaleY: elasticAnimRef.current,
+                    },
+                    {
+                      scaleX: elasticAnimRef.current,
+                    },
+                  ],
+                },
+                buttonContainer,
+              ]}
+            >
+              {icon}
+            </Animated.View>
+          </Pressable>
+        ))}
+      </Pressable>
+      {/* a square view with 50% opacity that semi hides the attach button */}
+      <Pressable onPress={() => onClose({})} style={[buttonDimmerStyle, buttonDimmerStyleTheme]} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  attachButtonDimmer: {
+    opacity: 0,
+    position: 'absolute',
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: ATTACH_MARGIN_BOTTOM,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingTop: TOP_PADDING,
+    position: 'absolute',
+  },
+});

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -12,7 +12,7 @@ import {
   SoundReturnType,
   triggerHaptic,
 } from '../../../native';
-import { File } from '../../../types/types';
+import { File, FileTypes } from '../../../types/types';
 import { resampleWaveformData } from '../utils/audioSampling';
 import { normalizeAudioLevel } from '../utils/normalizeAudioLevel';
 
@@ -255,7 +255,7 @@ export const useAudioController = () => {
       duration: durationInSeconds,
       mimeType: 'audio/aac',
       name: `audio_recording_${date}.aac`,
-      type: 'voiceRecording',
+      type: FileTypes.VoiceRecording,
       uri: typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
       waveform_data: resampledWaveformData,
     };

package/src/components/MessageList/MessageList.tsx

@@ -52,7 +52,7 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
 const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -973,7 +973,7 @@ const MessageListWithContext = <
       if (!isMessageTypeDeleted && message.attachments) {
         return message.attachments.some(
           (attachment) =>
-            attachment.type === 'image' &&
+            attachment.type === FileTypes.Image &&
             !attachment.title_link &&
             !attachment.og_scrape_url &&
             (attachment.image_url || attachment.thumb_url),

package/src/components/Reply/Reply.tsx

@@ -22,7 +22,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { hasOnlyEmojis } from '../../utils/utils';
@@ -94,36 +94,36 @@ const getMessageType = <
 ) => {
   let messageType;
 
-  const isLastAttachmentFile = lastAttachment.type === 'file';
+  const isLastAttachmentFile = lastAttachment.type === FileTypes.File;
 
-  const isLastAttachmentAudio = lastAttachment.type === 'audio';
+  const isLastAttachmentAudio = lastAttachment.type === FileTypes.Audio;
 
-  const isLastAttachmentVoiceRecording = lastAttachment.type === 'voiceRecording';
+  const isLastAttachmentVoiceRecording = lastAttachment.type === FileTypes.VoiceRecording;
 
-  const isLastAttachmentVideo = lastAttachment.type === 'video';
+  const isLastAttachmentVideo = lastAttachment.type === FileTypes.Video;
 
   const isLastAttachmentGiphy =
-    lastAttachment?.type === 'giphy' || lastAttachment?.type === 'imgur';
+    lastAttachment?.type === FileTypes.Giphy || lastAttachment?.type === FileTypes.Imgur;
 
   const isLastAttachmentImageOrGiphy =
-    lastAttachment?.type === 'image' &&
+    lastAttachment?.type === FileTypes.Image &&
     !lastAttachment?.title_link &&
     !lastAttachment?.og_scrape_url;
 
   const isLastAttachmentImage = lastAttachment?.image_url || lastAttachment?.thumb_url;
 
   if (isLastAttachmentFile) {
-    messageType = 'file';
+    messageType = FileTypes.File;
   } else if (isLastAttachmentVideo) {
-    messageType = 'video';
+    messageType = FileTypes.Video;
   } else if (isLastAttachmentAudio) {
-    messageType = 'audio';
+    messageType = FileTypes.Audio;
   } else if (isLastAttachmentVoiceRecording) {
-    messageType = 'voiceRecording';
+    messageType = FileTypes.VoiceRecording;
   } else if (isLastAttachmentImageOrGiphy) {
-    if (isLastAttachmentImage) messageType = 'image';
+    if (isLastAttachmentImage) messageType = FileTypes.Image;
     else messageType = undefined;
-  } else if (isLastAttachmentGiphy) messageType = 'giphy';
+  } else if (isLastAttachmentGiphy) messageType = FileTypes.Giphy;
   else messageType = 'other';
 
   return messageType;
@@ -184,10 +184,10 @@ const ReplyWithContext = <
   const hasImage =
     !error &&
     lastAttachment &&
-    messageType !== 'file' &&
-    messageType !== 'video' &&
-    messageType !== 'audio' &&
-    messageType !== 'voiceRecording' &&
+    messageType !== FileTypes.File &&
+    messageType !== FileTypes.Video &&
+    messageType !== FileTypes.Audio &&
+    messageType !== FileTypes.VoiceRecording &&
     (lastAttachment.image_url || lastAttachment.thumb_url || lastAttachment.og_scrape_url);
 
   const onlyEmojis = !lastAttachment && emojiOnlyText;
@@ -209,7 +209,9 @@ const ReplyWithContext = <
         ]}
       >
         {!error && lastAttachment ? (
-          messageType === 'file' || messageType === 'voiceRecording' || messageType === 'audio' ? (
+          messageType === FileTypes.File ||
+          messageType === FileTypes.Audio ||
+          messageType === FileTypes.VoiceRecording ? (
             <View
               style={[
                 styles.fileAttachmentContainer,
@@ -241,7 +243,7 @@ const ReplyWithContext = <
             />
           ) : null
         ) : null}
-        {messageType === 'video' && !lastAttachment.og_scrape_url ? (
+        {messageType === FileTypes.Video && !lastAttachment.og_scrape_url ? (
           <VideoThumbnail
             imageStyle={[styles.videoThumbnailImageStyle, videoThumbnailImageStyle]}
             style={[styles.videoThumbnailContainerStyle, videoThumbnailContainerStyle]}
@@ -264,13 +266,13 @@ const ReplyWithContext = <
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`
                     : quotedMessage.text
-                  : messageType === 'image'
+                  : messageType === FileTypes.Image
                   ? t('Photo')
-                  : messageType === 'video'
+                  : messageType === FileTypes.Video
                   ? t('Video')
-                  : messageType === 'file' ||
-                    messageType === 'audio' ||
-                    messageType === 'voiceRecording'
+                  : messageType === FileTypes.File ||
+                    messageType === FileTypes.Audio ||
+                    messageType === FileTypes.VoiceRecording
                   ? trimmedLastAttachmentTitle || ''
                   : '',
             }}
@@ -279,7 +281,7 @@ const ReplyWithContext = <
               textContainer: [
                 {
                   marginRight:
-                    hasImage || messageType === 'video'
+                    hasImage || messageType === FileTypes.Video
                       ? Number(
                           stylesProp.imageAttachment?.height ||
                             imageAttachment.height ||
@@ -290,9 +292,9 @@ const ReplyWithContext = <
                             imageAttachment.marginLeft ||
                             styles.imageAttachment.marginLeft,
                         )
-                      : messageType === 'file' ||
-                        messageType === 'audio' ||
-                        messageType === 'voiceRecording'
+                      : messageType === FileTypes.File ||
+                        messageType === FileTypes.Audio ||
+                        messageType === FileTypes.VoiceRecording
                       ? attachmentSize +
                         Number(
                           stylesProp.fileAttachmentContainer?.paddingLeft ||
@@ -307,7 +309,7 @@ const ReplyWithContext = <
               ],
             }}
           />
-          {messageType === 'audio' || messageType === 'voiceRecording' ? (
+          {messageType === FileTypes.Audio || messageType === FileTypes.VoiceRecording ? (
             <Text style={[styles.secondaryText, { color: grey }, secondaryText]}>
               {lastAttachment.duration
                 ? dayjs.duration(lastAttachment.duration, 'second').format('mm:ss')