stream-chat-react-native-core 5.21.0 → 5.22.0-beta.10

package/src/components/Attachment/FileAttachment.tsx

@@ -24,8 +24,8 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {
@@ -35,7 +35,6 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   details: {
-    maxWidth: vw(60),
     paddingLeft: 16,
   },
   size: {
@@ -94,6 +93,7 @@ const FileAttachmentWithContext = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -134,7 +134,16 @@ const FileAttachmentWithContext = <
     >
       <View style={[styles.container, { backgroundColor: white }, container, stylesProp.container]}>
         <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentSize} />
-        <View style={[styles.details, details, stylesProp.details]}>
+        <View
+          style={[
+            styles.details,
+            {
+              maxWidth: vw(60),
+            },
+            details,
+            stylesProp.details,
+          ]}
+        >
           <Text numberOfLines={2} style={[styles.title, { color: black }, title, stylesProp.title]}>
             {attachment.title}
           </Text>

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -20,13 +20,13 @@ import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../hooks/useViewport';
 import {
   getPhotos,
   iOS14RefreshGallerySelection,
   oniOS14GalleryLibrarySelectionChange,
 } from '../../native';
 import type { Asset } from '../../types/types';
-import { vh } from '../../utils/utils';
 
 dayjs.extend(duration);
 
@@ -36,7 +36,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
 export type AttachmentPickerProps = {
@@ -106,6 +105,9 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedPicker,
       topInset,
     } = useAttachmentPickerContext();
+    const { vh } = useViewport();
+
+    const screenHeight = vh(100);
 
     const [currentIndex, setCurrentIndex] = useState(-1);
     const endCursorRef = useRef<string>();

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

@@ -8,10 +8,10 @@ import { lookup } from 'mime-types';
 
 import type { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
 import { getLocalAssetUri } from '../../../native';
 import type { Asset, File } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 type AttachmentPickerItemType = Pick<
   AttachmentPickerContextValue,
@@ -39,6 +39,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     selectedFiles,
     setSelectedFiles,
   } = props;
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -70,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,
       },
     ];
@@ -152,6 +153,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
       colors: { overlay },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 

package/src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Alert, Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { takePhoto } from '../../../native';
 
@@ -29,6 +30,7 @@ export const AttachmentSelectionBar: React.FC = () => {
     setSelectedImages,
     setSelectedPicker,
   } = useAttachmentPickerContext();
+  const { t } = useTranslationContext();
 
   const { compressImageQuality, hasFilePicker, imageUploads, pickFile } = useMessageInputContext();
 
@@ -57,6 +59,16 @@ export const AttachmentSelectionBar: React.FC = () => {
     setSelectedPicker(undefined);
     closePicker();
     const photo = await takePhoto({ compressImageQuality });
+    if (photo.askToOpenSettings) {
+      Alert.alert(
+        t('Allow camera access in device settings'),
+        t('Device camera is used to take photos or videos.'),
+        [
+          { style: 'cancel', text: t('Cancel') },
+          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+        ],
+      );
+    }
     if (!photo.cancelled) {
       setSelectedImages((images) => [...images, photo]);
     }

package/src/components/Channel/Channel.tsx

@@ -78,6 +78,7 @@ import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
+import { compressedImageURI } from '../../utils/compressImage';
 import { DBSyncManager } from '../../utils/DBSyncManager';
 import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
 import { removeReactionFromLocalState } from '../../utils/removeReactionFromLocalState';
@@ -589,6 +590,13 @@ const ChannelWithContext = <
 
   const { setTargetedMessage, targetedMessage } = useTargetedMessage();
 
+  /**
+   * This ref will hold the abort controllers for
+   * requests made for uploading images/files in the messageInputContext
+   * Its a map of filename to AbortController
+   */
+  const uploadAbortControllerRef = useRef<Map<string, AbortController>>(new Map());
+
   const channelId = channel?.id || '';
   useEffect(() => {
     const initChannel = () => {
@@ -1290,20 +1298,28 @@ const ChannelWithContext = <
     if (updatedMessage.attachments?.length) {
       for (let i = 0; i < updatedMessage.attachments?.length; i++) {
         const attachment = updatedMessage.attachments[i];
+        const image = attachment.originalImage;
         const file = attachment.originalFile;
         // check if image_url is not a remote url
         if (
           attachment.type === 'image' &&
-          file?.uri &&
+          image?.uri &&
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          const filename = file.name ?? file.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          const filename = image.name ?? image.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          // if any upload is in progress, cancel it
+          const controller = uploadAbortControllerRef.current.get(filename);
+          if (controller) {
+            controller.abort();
+            uploadAbortControllerRef.current.delete(filename);
+          }
+          const compressedUri = await compressedImageURI(image, compressImageQuality);
           const contentType = lookup(filename) || 'multipart/form-data';
 
           const uploadResponse = doImageUploadRequest
-            ? await doImageUploadRequest(file, channel)
-            : await channel.sendImage(file.uri, filename, contentType);
+            ? await doImageUploadRequest(image, channel)
+            : await channel.sendImage(compressedUri, filename, contentType);
 
           attachment.image_url = uploadResponse.file;
           delete attachment.originalFile;
@@ -1321,6 +1337,12 @@ const ChannelWithContext = <
           isLocalUrl(attachment.asset_url) &&
           file?.uri
         ) {
+          // if any upload is in progress, cancel it
+          const controller = uploadAbortControllerRef.current.get(file.name);
+          if (controller) {
+            controller.abort();
+            uploadAbortControllerRef.current.delete(file.name);
+          }
           const response = doDocUploadRequest
             ? await doDocUploadRequest(file, channel)
             : await channel.sendFile(file.uri, file.name, file.mimeType);
@@ -1587,15 +1609,16 @@ const ChannelWithContext = <
       : client.updateMessage(updatedMessage);
 
   const setEditingState: MessagesContextValue<StreamChatGenerics>['setEditingState'] = (
-    message,
+    messageOrBoolean,
   ) => {
-    setEditing(message);
+    clearQuotedMessageState();
+    setEditing(messageOrBoolean);
   };
 
   const setQuotedMessageState: MessagesContextValue<StreamChatGenerics>['setQuotedMessageState'] = (
-    message,
+    messageOrBoolean,
   ) => {
-    setQuotedMessage(message);
+    setQuotedMessage(messageOrBoolean);
   };
 
   const clearEditingState: InputMessageInputContextValue<StreamChatGenerics>['clearEditingState'] =
@@ -1851,6 +1874,7 @@ const ChannelWithContext = <
     StickyHeader,
     targetedMessage,
     threadList,
+    uploadAbortControllerRef,
     watcherCount,
     watchers,
   });

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -36,6 +36,7 @@ export const useCreateChannelContext = <
   StickyHeader,
   targetedMessage,
   threadList,
+  uploadAbortControllerRef,
   watcherCount,
   watchers,
 }: ChannelContextValue<StreamChatGenerics>) => {
@@ -79,6 +80,7 @@ export const useCreateChannelContext = <
       StickyHeader,
       targetedMessage,
       threadList,
+      uploadAbortControllerRef,
       watcherCount,
       watchers,
     }),

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -53,7 +53,7 @@ export const useCreateInputMessageInputContext = <
    */
   channelId?: string;
 }) => {
-  const editingExists = !!editing;
+  const editingDep = typeof editing === 'boolean' ? editing : editing?.id;
   const quotedMessageId = quotedMessage
     ? typeof quotedMessage === 'boolean'
       ? ''
@@ -103,14 +103,7 @@ export const useCreateInputMessageInputContext = <
       ShowThreadMessageInChannelButton,
       UploadProgressIndicator,
     }),
-    [
-      compressImageQuality,
-      channelId,
-      editingExists,
-      initialValue,
-      maxMessageLength,
-      quotedMessageId,
-    ],
+    [compressImageQuality, channelId, editingDep, initialValue, maxMessageLength, quotedMessageId],
   );
 
   return inputMessageInputContext;

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -19,8 +19,8 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {
@@ -45,8 +45,6 @@ const styles = StyleSheet.create({
   title: { fontSize: 14, fontWeight: '700' },
 });
 
-const maxWidth = vw(80) - 16 - 40;
-
 export type ChannelPreviewMessengerPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &
@@ -120,6 +118,9 @@ const ChannelPreviewMessengerWithContext = <
     PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
+  const { vw } = useViewport();
+
+  const maxWidth = vw(80) - 16 - 40;
 
   const {
     theme: {

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -3,11 +3,9 @@ import { useEffect, useState } from 'react';
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useViewport } from '../../../hooks/useViewport';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
-
-const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
 
 const ELLIPSIS = `...`;
 
@@ -81,6 +79,9 @@ export const useChannelPreviewDisplayName = <
   characterLength?: number,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
+  const { vw } = useViewport();
+
+  const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
 
   const currentUserId = client?.userID;
   const members = channel?.state?.members;

package/src/components/ImageGallery/ImageGallery.tsx

@@ -55,18 +55,16 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import { isVideoPackageAvailable, VideoType } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
-import { vh, vw } from '../../utils/utils';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
-const measuredScreenHeight = vh(100);
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
+
 const MARGIN = 32;
 
 export enum HasPinched {
@@ -162,6 +160,12 @@ export const ImageGallery = <
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
+  const { vh, vw } = useViewport();
+
+  const measuredScreenHeight = vh(100);
+  const screenWidth = vw(100);
+  const halfScreenWidth = vw(50);
+
   /**
    * Height constants
    */
@@ -571,21 +575,7 @@ export const ImageGallery = <
                     simultaneousHandlers={[pinchRef]}
                   >
                     <Animated.View style={StyleSheet.absoluteFill}>
-                      <Animated.View
-                        style={[
-                          styles.animatedContainer,
-                          pagerStyle,
-                          pager,
-                          {
-                            transform: [
-                              { scaleX: -1 }, // Also only here for opening, wrong direction when not included
-                              {
-                                translateX: translationX.value, // Only here for opening, wrong index when this is not included
-                              },
-                            ],
-                          },
-                        ]}
-                      >
+                      <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
                         {imageGalleryAttachments.map((photo, i) =>
                           photo.type === 'video' ? (
                             <AnimatedGalleryVideo
@@ -669,6 +659,7 @@ export const ImageGallery = <
           photoLength={imageGalleryAttachments.length}
           progress={imageGalleryAttachments[selectedIndex].progress || 0}
           selectedIndex={selectedIndex}
+          videoRef={videoRef}
           visible={headerFooterVisible}
           {...imageGalleryCustomComponents?.footer}
         />

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
-import { vw } from '../../../utils/utils';
+import { useViewport } from '../../../hooks/useViewport';
 
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 type Props = {
@@ -40,6 +38,10 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
       translateX,
       translateY,
     } = props;
+    const { vw } = useViewport();
+
+    const screenWidth = vw(100);
+    const halfScreenWidth = vw(50);
 
     /**
      * The current image, designated by selected is scaled and translated

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
+import { useViewport } from '../../../hooks/useViewport';
 import {
   isVideoPackageAvailable,
   PlaybackStatus,
@@ -12,11 +13,8 @@ import {
   VideoType,
 } from '../../../native';
 
-import { vw } from '../../../utils/utils';
 import { Spinner } from '../../Spinner/Spinner';
 
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 export type AnimatedGalleryVideoType = {
@@ -74,6 +72,10 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
       translateY,
       videoRef,
     } = props;
+    const { vw } = useViewport();
+
+    const screenWidth = vw(100);
+    const halfScreenWidth = vw(50);
 
     const onLoadStart = () => {
       setOpacity(1);

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -7,7 +7,7 @@ import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
-import { deleteFile, saveFile, shareImage } from '../../../native';
+import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
@@ -67,6 +67,7 @@ export type ImageGalleryFooterVideoControlProps = {
   onPlayPause: (status?: boolean) => void;
   paused: boolean;
   progress: number;
+  videoRef: React.RefObject<VideoType>;
 };
 
 export type ImageGalleryFooterVideoControlComponent = ({
@@ -100,6 +101,7 @@ type ImageGalleryFooterPropsWithContext<
   photoLength: number;
   progress: number;
   selectedIndex: number;
+  videoRef: React.RefObject<VideoType>;
   visible: Animated.SharedValue<number>;
 };
 
@@ -125,6 +127,7 @@ export const ImageGalleryFooterWithContext = <
     selectedIndex,
     ShareIcon,
     videoControlElement,
+    videoRef,
     visible,
   } = props;
 
@@ -181,13 +184,14 @@ export const ImageGalleryFooterWithContext = <
       <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
         {photo.type === 'video' ? (
           videoControlElement ? (
-            videoControlElement({ duration, onPlayPause, paused, progress })
+            videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
           ) : (
             <ImageGalleryVideoControl
               duration={duration}
               onPlayPause={onPlayPause}
               paused={paused}
               progress={progress}
+              videoRef={videoRef}
             />
           )
         ) : null}

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 
 export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(
   (props) => {
-    const { duration, onPlayPause, paused, progress } = props;
+    const { duration, onPlayPause, paused, progress, videoRef } = props;
 
     const videoDuration = duration
       ? duration / 3600 >= 1
@@ -60,14 +60,19 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
       },
     } = useTheme();
 
+    const handlePlayPause = async () => {
+      if (progress === 1) {
+        // For expo CLI
+        if (videoRef.current?.setPositionAsync) {
+          await videoRef.current.setPositionAsync(0);
+        }
+      }
+      onPlayPause();
+    };
+
     return (
       <View style={[styles.videoContainer, videoContainer]}>
-        <TouchableOpacity
-          accessibilityLabel='Play Pause Button'
-          onPress={() => {
-            onPlayPause();
-          }}
-        >
+        <TouchableOpacity accessibilityLabel='Play Pause Button' onPress={handlePlayPause}>
           <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
               <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -5,8 +5,8 @@ import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 import type { Photo } from '../ImageGallery';
 
@@ -71,6 +71,7 @@ const GridImage = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
   const { imageComponent, ...restItem } = item;
 
   const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../hooks/useViewport';
 import { MessageIcon } from '../../icons/MessageIcon';
-import { vw } from '../../utils/utils';
-
-const width = vw(33);
 
 const styles = StyleSheet.create({
   channelContainer: {
@@ -16,7 +15,6 @@ const styles = StyleSheet.create({
   channelDetails: {
     fontSize: 14,
     textAlign: 'center',
-    width: vw(66),
   },
   channelTitle: {
     fontSize: 16,
@@ -36,6 +34,9 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
       emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
     },
   } = useTheme();
+  const { vw } = useViewport();
+  const width = vw(33);
+  const { t } = useTranslationContext();
 
   switch (listType) {
     case 'channel':
@@ -46,13 +47,13 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
             style={[styles.channelTitle, { color: black }, channelTitle]}
             testID='empty-channel-state-title'
           >
-            {"Let's start chatting!"}
+            {t("Let's start chatting!")}
           </Text>
           <Text
-            style={[styles.channelDetails, { color: grey }, channelDetails]}
+            style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
             testID='empty-channel-state-details'
           >
-            {'How about sending your first message to a friend?'}
+            {t('How about sending your first message to a friend?')}
           </Text>
         </View>
       );

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -19,8 +19,9 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes, vw } from '../../../utils/utils';
+import { MessageStatusTypes } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -164,6 +165,7 @@ const MessageContentWithContext = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const getDateText = (formatter?: (date: TDateTimeParserInput) => string) => {
     if (!message.created_at) return '';

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -121,6 +121,7 @@ const ReactionListWithContext = <
         avatarWrapper: { leftAlign, spacer },
         reactionList: {
           container,
+          iconFillColor,
           middleIcon,
           radius: themeRadius,
           reactionBubble,
@@ -263,7 +264,7 @@ const ReactionListWithContext = <
             {reactions.map((reaction) => (
               <Icon
                 key={reaction.type}
-                pathFill={reaction.own ? accent_blue : grey}
+                pathFill={reaction.own ? iconFillColor || accent_blue : grey}
                 size={reactionSize / 2}
                 style={middleIcon}
                 supportedReactions={supportedReactions}