stream-chat-react-native-core 5.22.0-beta.6 → 5.22.0-beta.8

package/lib/typescript/i18n/it.json

@@ -1,9 +1,9 @@
 {
-    "1 Reply": "1 Risposta",
+    "1 Reply": "",
     "1 Thread Reply": "",
-    "Allow access to your Gallery": "Consenti l'accesso alla tua galleria",
-    "Allow camera access in device settings": "Consenti l'accesso alla fotocamera nelle impostazioni del dispositivo",
-    "Also send to channel": "Invia anche al canale",
+    "Allow access to your Gallery": "",
+    "Allow camera access in device settings": "",
+    "Also send to channel": "",
     "Are you sure you want to permanently delete this message?": "",
     "Block User": "",
     "Cancel": "",
@@ -11,11 +11,11 @@
     "Copy Message": "",
     "Delete": "",
     "Delete Message": "",
-    "Device camera is used to take photos or videos.": "La fotocamera del dispositivo viene utilizzata per scattare foto o video.",
+    "Device camera is used to take photos or videos.": "",
     "Do you want to send a copy of this message to a moderator for further investigation?": "",
     "Edit Message": "",
     "Editing Message": "",
-    "Emoji matching": "",
+    "Emoji matching": "Abbinamento emoji",
     "Empty message...": "",
     "Error loading": "",
     "Error loading channel list...": "",
@@ -26,50 +26,50 @@
     "Flag Message": "",
     "Flag action failed either due to a network issue or the message is already flagged": "",
     "How about sending your first message to a friend?": "",
-    "Instant Commands": "",
+    "Instant Commands": "Comandi Istantanei",
     "Let's start chatting!": "",
     "Links are disabled": "",
     "Loading channels...": "",
     "Loading messages...": "",
     "Loading...": "",
     "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
-    "Message Reactions": "Reazioni ai Messaggi",
+    "Message Reactions": "",
     "Message deleted": "",
     "Message flagged": "",
     "Mute User": "",
-    "Not supported": "",
+    "Not supported": "non supportato",
     "Nothing yet...": "",
     "Ok": "",
     "Only visible to you": "",
-    "Open Settings": "Apri Impostazioni",
-    "Photo": "",
-    "Photos and Videos": "Foto e Video",
+    "Open Settings": "",
+    "Photo": "Foto",
+    "Photos and Videos": "",
     "Pin to Conversation": "",
     "Pinned by": "",
-    "Please enable access to your photos and videos so you can share them.": "Abilita l'accesso alle tue foto e ai tuoi video in modo da poterli condividere.",
-    "Please select a channel first": "Seleziona un canale",
+    "Please enable access to your photos and videos so you can share them.": "",
+    "Please select a channel first": "",
     "Reconnecting...": "",
     "Reply": "",
     "Reply to Message": "",
     "Resend": "",
-    "Search GIFs": "",
-    "Select More Photos": "Seleziona Altre foto",
-    "Send a message": "",
+    "Search GIFs": "Cerca GIF",
+    "Select More Photos": "",
+    "Send a message": "Mandare un messaggio",
     "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
+    "Slow mode ON": "Slowmode attiva",
     "The message has been reported to a moderator.": "",
     "Thread Reply": "",
     "Unblock User": "",
-    "Unknown User": "Utente sconosciuto",
+    "Unknown User": "",
     "Unmute User": "",
     "Unpin from Conversation": "",
-    "Unread Messages": "Messaggi non letti",
-    "Video": "",
+    "Unread Messages": "",
+    "Video": "Video",
     "You": "",
     "You can't send messages in this channel": "",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} e altri {{ nonSelfUserLength }} stanno scrivendo",
-    "{{ index }} of {{ photoLength }}": "{{ index }} di {{ photoLength }}",
-    "{{ replyCount }} Replies": "{{ replyCount }} Risposte",
+    "{{ index }} of {{ photoLength }}": "",
+    "{{ replyCount }} Replies": "",
     "{{ replyCount }} Thread Replies": "",
     "{{ user }} is typing": "{{ user }} sta scrivendo",
     "🏙 Attachment...": ""

package/lib/typescript/i18n/nl.json

@@ -1,9 +1,9 @@
 {
-    "1 Reply": "1 Antwoord",
+    "1 Reply": "",
     "1 Thread Reply": "",
-    "Allow access to your Gallery": "Geef toegang tot uw galerij",
-    "Allow camera access in device settings": "Sta cameratoegang toe in de apparaatinstellingen",
-    "Also send to channel": "Stuur ook naar kanaal",
+    "Allow access to your Gallery": "",
+    "Allow camera access in device settings": "",
+    "Also send to channel": "",
     "Are you sure you want to permanently delete this message?": "",
     "Block User": "",
     "Cancel": "",
@@ -11,11 +11,11 @@
     "Copy Message": "",
     "Delete": "",
     "Delete Message": "",
-    "Device camera is used to take photos or videos.": "De camera van het apparaat wordt gebruikt om foto's of video's te maken.",
+    "Device camera is used to take photos or videos.": "",
     "Do you want to send a copy of this message to a moderator for further investigation?": "",
     "Edit Message": "",
     "Editing Message": "",
-    "Emoji matching": "",
+    "Emoji matching": "Emoji-overeenkomsten",
     "Empty message...": "",
     "Error loading": "",
     "Error loading channel list...": "",
@@ -26,50 +26,50 @@
     "Flag Message": "",
     "Flag action failed either due to a network issue or the message is already flagged": "",
     "How about sending your first message to a friend?": "",
-    "Instant Commands": "",
+    "Instant Commands": "Directe Opdrachten",
     "Let's start chatting!": "",
     "Links are disabled": "",
     "Loading channels...": "",
     "Loading messages...": "",
     "Loading...": "",
     "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
-    "Message Reactions": "Bericht Reacties",
+    "Message Reactions": "",
     "Message deleted": "",
     "Message flagged": "",
     "Mute User": "",
-    "Not supported": "",
+    "Not supported": "niet ondersteund",
     "Nothing yet...": "",
     "Ok": "",
     "Only visible to you": "",
-    "Open Settings": "Open instellingen",
-    "Photo": "",
-    "Photos and Videos": "Foto's en video's",
+    "Open Settings": "",
+    "Photo": "Foto",
+    "Photos and Videos": "",
     "Pin to Conversation": "",
     "Pinned by": "",
-    "Please enable access to your photos and videos so you can share them.": "Schakel toegang tot uw foto's en video's in zodat u ze kunt delen.",
-    "Please select a channel first": "Selecteer eerst een kanaal",
+    "Please enable access to your photos and videos so you can share them.": "",
+    "Please select a channel first": "",
     "Reconnecting...": "",
     "Reply": "",
     "Reply to Message": "",
     "Resend": "",
-    "Search GIFs": "",
-    "Select More Photos": "Selecteer Meer foto's",
-    "Send a message": "",
+    "Search GIFs": "Zoek GIF's",
+    "Select More Photos": "",
+    "Send a message": "Stuur een bericht",
     "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
+    "Slow mode ON": "Langzame modus aan",
     "The message has been reported to a moderator.": "",
     "Thread Reply": "",
     "Unblock User": "",
-    "Unknown User": "Onbekende gebruiker",
+    "Unknown User": "",
     "Unmute User": "",
     "Unpin from Conversation": "",
-    "Unread Messages": "Ongelezen Berichten",
-    "Video": "",
+    "Unread Messages": "",
+    "Video": "Video",
     "You": "",
     "You can't send messages in this channel": "",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} en {{ nonSelfUserLength }} anderen zijn aan het typen",
-    "{{ index }} of {{ photoLength }}": "{{ index }} van {{ photoLength }}",
-    "{{ replyCount }} Replies": "{{ replyCount }} Antwoorden",
+    "{{ index }} of {{ photoLength }}": "",
+    "{{ replyCount }} Replies": "",
     "{{ replyCount }} Thread Replies": "",
     "{{ user }} is typing": "{{ user }} is aan het typen",
     "🏙 Attachment...": ""

package/lib/typescript/i18n/ru.json

@@ -1,9 +1,9 @@
 {
-    "1 Reply": "1 Ответ",
+    "1 Reply": "",
     "1 Thread Reply": "",
-    "Allow access to your Gallery": "Разрешить доступ к вашей галерее",
-    "Allow camera access in device settings": "Разрешите доступ к камере в настройках устройства.",
-    "Also send to channel": "Также отправить на канал",
+    "Allow access to your Gallery": "",
+    "Allow camera access in device settings": "",
+    "Also send to channel": "",
     "Are you sure you want to permanently delete this message?": "",
     "Block User": "",
     "Cancel": "",
@@ -11,11 +11,11 @@
     "Copy Message": "",
     "Delete": "",
     "Delete Message": "",
-    "Device camera is used to take photos or videos.": "Камера устройства используется для съемки фотографий или видео.",
+    "Device camera is used to take photos or videos.": "",
     "Do you want to send a copy of this message to a moderator for further investigation?": "",
     "Edit Message": "",
     "Editing Message": "",
-    "Emoji matching": "",
+    "Emoji matching": "Соответствие эмодзи",
     "Empty message...": "",
     "Error loading": "",
     "Error loading channel list...": "",
@@ -26,50 +26,50 @@
     "Flag Message": "",
     "Flag action failed either due to a network issue or the message is already flagged": "",
     "How about sending your first message to a friend?": "",
-    "Instant Commands": "",
+    "Instant Commands": "Мгновенные Команды",
     "Let's start chatting!": "",
     "Links are disabled": "",
     "Loading channels...": "",
     "Loading messages...": "",
     "Loading...": "",
     "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
-    "Message Reactions": "Сообщения Реакции",
+    "Message Reactions": "",
     "Message deleted": "",
     "Message flagged": "",
     "Mute User": "",
-    "Not supported": "",
+    "Not supported": "не поддерживается",
     "Nothing yet...": "",
     "Ok": "",
     "Only visible to you": "",
-    "Open Settings": "Открыть настройки",
-    "Photo": "",
-    "Photos and Videos": "Фото и видео",
+    "Open Settings": "",
+    "Photo": "Фото",
+    "Photos and Videos": "",
     "Pin to Conversation": "",
     "Pinned by": "",
-    "Please enable access to your photos and videos so you can share them.": "Разрешите доступ к своим фотографиям и видео, чтобы вы могли ими поделиться.",
-    "Please select a channel first": "Пожалуйста, сначала выберите канал",
+    "Please enable access to your photos and videos so you can share them.": "",
+    "Please select a channel first": "",
     "Reconnecting...": "",
     "Reply": "",
     "Reply to Message": "",
     "Resend": "",
-    "Search GIFs": "",
-    "Select More Photos": "Выбрать больше фотографий",
-    "Send a message": "",
+    "Search GIFs": "Поиск GIF",
+    "Select More Photos": "",
+    "Send a message": "Отправить сообщение",
     "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
+    "Slow mode ON": "Медленный режим включен",
     "The message has been reported to a moderator.": "",
     "Thread Reply": "",
     "Unblock User": "",
-    "Unknown User": "Неизвестный пользователь",
+    "Unknown User": "",
     "Unmute User": "",
     "Unpin from Conversation": "",
-    "Unread Messages": "Непрочитанные Сообщения",
-    "Video": "",
+    "Unread Messages": "",
+    "Video": "видео",
     "You": "",
     "You can't send messages in this channel": "",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} и еще {{ nonSelfUserLength }} пишут",
-    "{{ index }} of {{ photoLength }}": "{{ index }} из {{ photoLength }}",
-    "{{ replyCount }} Replies": "{{ replyCount }} Ответов",
+    "{{ index }} of {{ photoLength }}": "",
+    "{{ replyCount }} Replies": "",
     "{{ replyCount }} Thread Replies": "",
     "{{ user }} is typing": "{{ user }} пишет",
     "🏙 Attachment...": ""

package/lib/typescript/i18n/tr.json

@@ -1,9 +1,9 @@
 {
-    "1 Reply": "1 Cevap",
+    "1 Reply": "",
     "1 Thread Reply": "",
-    "Allow access to your Gallery": "Galerinize erişime izin verin",
-    "Allow camera access in device settings": "Cihaz ayarlarında kamera erişimine izin ver",
-    "Also send to channel": "Kanala da gönder",
+    "Allow access to your Gallery": "",
+    "Allow camera access in device settings": "",
+    "Also send to channel": "",
     "Are you sure you want to permanently delete this message?": "",
     "Block User": "",
     "Cancel": "",
@@ -11,11 +11,11 @@
     "Copy Message": "",
     "Delete": "",
     "Delete Message": "",
-    "Device camera is used to take photos or videos.": "Cihaz kamerası fotoğraf veya video çekmek için kullanılır.",
+    "Device camera is used to take photos or videos.": "",
     "Do you want to send a copy of this message to a moderator for further investigation?": "",
     "Edit Message": "",
     "Editing Message": "",
-    "Emoji matching": "",
+    "Emoji matching": "Emoji eşleştirme",
     "Empty message...": "",
     "Error loading": "",
     "Error loading channel list...": "",
@@ -26,50 +26,50 @@
     "Flag Message": "",
     "Flag action failed either due to a network issue or the message is already flagged": "",
     "How about sending your first message to a friend?": "",
-    "Instant Commands": "",
+    "Instant Commands": "Anlık Komutlar",
     "Let's start chatting!": "",
     "Links are disabled": "",
     "Loading channels...": "",
     "Loading messages...": "",
     "Loading...": "",
     "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
-    "Message Reactions": "Mesaj Tepkileri",
+    "Message Reactions": "",
     "Message deleted": "",
     "Message flagged": "",
     "Mute User": "",
-    "Not supported": "",
+    "Not supported": "Desteklenmiyor",
     "Nothing yet...": "",
     "Ok": "",
     "Only visible to you": "",
-    "Open Settings": "Ayarları aç",
-    "Photo": "",
-    "Photos and Videos": "Fotoğraflar ve Videolar",
+    "Open Settings": "",
+    "Photo": "Fotoğraf",
+    "Photos and Videos": "",
     "Pin to Conversation": "",
     "Pinned by": "",
-    "Please enable access to your photos and videos so you can share them.": "Paylaşım yapabilmek için lutfen fotoğraflarınıza ve videolarınıza erişimi etkinleştirin.",
-    "Please select a channel first": "Lütfen önce bir kanal seçiniz",
+    "Please enable access to your photos and videos so you can share them.": "",
+    "Please select a channel first": "",
     "Reconnecting...": "",
     "Reply": "",
     "Reply to Message": "",
     "Resend": "",
-    "Search GIFs": "",
-    "Select More Photos": "Daha Fazla Fotoğraf Seçin",
-    "Send a message": "",
+    "Search GIFs": "GIF Ara",
+    "Select More Photos": "",
+    "Send a message": "Mesaj gönder",
     "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
+    "Slow mode ON": "Yavaş Mod Açık",
     "The message has been reported to a moderator.": "",
     "Thread Reply": "",
     "Unblock User": "",
-    "Unknown User": "Bilinmeyen kullanıcı",
+    "Unknown User": "",
     "Unmute User": "",
     "Unpin from Conversation": "",
-    "Unread Messages": "Okunmamış Mesajlar",
-    "Video": "",
+    "Unread Messages": "",
+    "Video": "Video",
     "You": "",
     "You can't send messages in this channel": "",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} ve {{ nonSelfUserLength }} kişi daha yazıyor",
-    "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
-    "{{ replyCount }} Replies": "{{ replyCount }} Cevap",
+    "{{ index }} of {{ photoLength }}": "",
+    "{{ replyCount }} Replies": "",
     "{{ replyCount }} Thread Replies": "",
     "{{ user }} is typing": "{{ user }} yazıyor",
     "🏙 Attachment...": ""

package/lib/typescript/types/types.d.ts

@@ -1,28 +1,25 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 export declare type Asset = {
-    duration: number | null;
-    filename: string;
+    duration: number;
     height: number;
+    name: string;
     source: 'camera' | 'picker';
     type: string;
     uri: string;
     width: number;
-    fileSize?: number;
     id?: string;
-    size?: number | string;
+    size?: number;
 };
-export declare type FileAssetType = {
+export declare type File = {
     name: string;
+    duration?: number;
+    id?: string;
     mimeType?: string;
-    size?: number | string;
+    size?: number;
     uri?: string;
 };
-export declare type File = FileAssetType & {
-    duration?: string | null;
-    id?: string;
-};
 export declare type DefaultAttachmentType = UnknownType & {
-    file_size?: number | string;
+    file_size?: number;
     mime_type?: string;
     originalFile?: File;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.22.0-beta.6",
+  "version": "5.22.0-beta.8",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -71,15 +71,15 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     const localAssetURI = Platform.OS === 'ios' && asset.id && (await getLocalAssetUri(asset.id));
     const uri = localAssetURI || asset.uri || '';
     // We need a mime-type to upload a video file.
-    const mimeType = lookup(asset.filename) || 'multipart/form-data';
+    const mimeType = lookup(asset.name) || 'multipart/form-data';
     return [
       ...files,
       {
-        duration: durationLabel,
+        duration: asset.duration,
         id: asset.id,
         mimeType,
-        name: asset.filename,
-        size: asset.fileSize,
+        name: asset.name,
+        size: asset.size,
         uri,
       },
     ];

package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts

@@ -0,0 +1,23 @@
+import { generateMarkdownText } from './generateMarkdownText';
+
+describe('generateMarkdownText', () => {
+  it.each([
+    ['', null],
+    ['  test message  ', 'test message'],
+    ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
+    [
+      'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',
+      '[https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&...](https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=)',
+    ],
+    ['Hi @getstream.io', 'Hi @getstream.io'],
+    [
+      'Hi test@gmail.com @test@gmail.com',
+      'Hi [test@gmail.com](mailto:test@gmail.com) @test@gmail.com',
+    ],
+    ['Hi @getstream.io getstream.io', 'Hi @getstream.io [getstream.io](http://getstream.io)'],
+    ['Hi <Stream>', 'Hi \\<Stream\\>'],
+  ])('Returns the generated markdown text for %p and %p', (text, expected) => {
+    const result = generateMarkdownText(text);
+    expect(result).toBe(expected);
+  });
+});

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -2,16 +2,12 @@ import truncate from 'lodash/truncate';
 
 import { parseLinksFromText } from './parseLinks';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
-
-export const generateMarkdownText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: MessageType<StreamChatGenerics>,
-) => {
-  const { text } = message;
+// If you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a backslash in front of it.
+function escapeRegExp(text: string) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
 
+export const generateMarkdownText = (text?: string) => {
   if (!text) return null;
 
   // Trim the extra spaces from the text.
@@ -26,18 +22,21 @@ export const generateMarkdownText = <
       omission: '...',
     });
     // Convert raw links/emails in the text to respective markdown syntax.
-    // Eg: Hi getstream.io -> Hi [getstream.io](getstream.io).
-    const normalRegEx = new RegExp(linkInfo.raw, 'g');
+    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.encodedUrl})`;
     resultText = text.replace(normalRegEx, markdown);
 
     // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
     // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com.
-    const mentionsRegex = new RegExp(`@\\[${displayLink}\\]\\(${linkInfo.encodedUrl}\\)`, 'g');
+    const mentionsRegex = new RegExp(
+      `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.encodedUrl)}\\)`,
+      'g',
+    );
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<&"'>]/g, '\\$&');
+  resultText = resultText.replace(/[<"'>]/g, '\\$&');
 
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -100,8 +100,9 @@ export const renderText = <
     onPress: onPressParam,
     preventPress,
   } = params;
+  const { text } = message;
 
-  const markdownText = generateMarkdownText<StreamChatGenerics>(message);
+  const markdownText = generateMarkdownText(text);
 
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
@@ -141,8 +142,17 @@ export const renderText = <
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
   };
 
+  let previousLink: string | undefined;
   const linkReact: ReactNodeOutput = (node, output, { ...state }) => {
-    const url = node.target;
+    let url: string;
+    // Some long URLs with `&` separated parameters are trimmed and the url only until first param is taken.
+    // This is done because of internal link been taken from the original URL in react-native-markdown-package. So, we check for `withinLink` and take the previous full URL.
+    if (state?.withinLink && previousLink) {
+      url = previousLink;
+    } else {
+      url = node.target;
+      previousLink = node.target;
+    }
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import dayjs from 'dayjs';
+
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
@@ -101,6 +103,19 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
+  const ONE_HOUR_IN_SECONDS = 3600;
+  let durationLabel = '00:00';
+  const videoDuration = item.file.duration;
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -117,7 +132,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/MessageInput.tsx

@@ -288,7 +288,7 @@ const MessageInputWithContext = <
     // Check if the file size of the image exceeds the threshold of 100MB
     if (
       imageToUpload &&
-      Number(imageToUpload.fileSize) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
+      Number(imageToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
     ) {
       Alert.alert(
         t(

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   ActivityIndicator,
   GestureResponderEvent,
@@ -24,7 +24,7 @@ export type UploadProgressIndicatorProps = {
   type?: 'in_progress' | 'retry' | 'not_supported' | 'inactive' | null;
 };
 
-export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (props) => {
+export const UploadProgressIndicator = (props: PropsWithChildren<UploadProgressIndicatorProps>) => {
   const { action, children, style, type } = props;
 
   const {

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -39,12 +39,12 @@ describe('MessageInput', () => {
       selectedImages: [
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 500000000,
+          size: 500000000,
           uri: 'https://picsum.photos/200/300',
         }),
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 600000000,
+          size: 600000000,
           uri: 'https://picsum.photos/200/300',
         }),
       ],