stream-chat-react-native-core 5.22.0-beta.1 → 5.22.0-beta.3

package/lib/typescript/i18n/ru.json

@@ -2,70 +2,72 @@
     "1 Reply": "1 Ответ",
     "1 Thread Reply": "1 тема Ответить",
     "Allow access to your Gallery": "Разрешить доступ к вашей галерее",
-    "Also send to channel": "",
-    "Are you sure you want to permanently delete this message?": "",
-    "Block User": "",
-    "Cancel": "",
-    "Cannot Flag Message": "",
-    "Copy Message": "",
-    "Delete": "",
-    "Delete Message": "",
-    "Do you want to send a copy of this message to a moderator for further investigation?": "",
-    "Edit Message": "",
-    "Editing Message": "",
-    "Emoji matching": "",
-    "Empty message...": "",
-    "Error loading": "",
-    "Error loading channel list...": "",
-    "Error loading messages for this channel...": "",
-    "Error while loading, please reload/refresh": "",
-    "File type not supported": "",
-    "Flag": "",
-    "Flag Message": "",
-    "Flag action failed either due to a network issue or the message is already flagged": "",
-    "Instant Commands": "",
-    "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.": "",
+    "Also send to channel": "Также отправить на канал",
+    "Are you sure you want to permanently delete this message?": "Вы действительно хотите удалить это сообщение без возможности восстановления?",
+    "Block User": "Заблокировать пользователя",
+    "Cancel": "Отмена",
+    "Cannot Flag Message": "Невозможно пожаловаться на сообщение",
+    "Copy Message": "Копировать сообщение",
+    "Delete": "удалять",
+    "Delete Message": "Удалить сообщение",
+    "Do you want to send a copy of this message to a moderator for further investigation?": "Вы хотите отправить копию этого сообщения модератору для дальнейшего изучения?",
+    "Edit Message": "Редактировать сообщение",
+    "Editing Message": "Редактирование сообщения",
+    "Emoji matching": "Соответствие эмодзи",
+    "Empty message...": "Пустое сообщение...",
+    "Error loading": "Ошибка при загрузке",
+    "Error loading channel list...": "Ошибка загрузки списка каналов...",
+    "Error loading messages for this channel...": "Ошибка загрузки сообщений для этого канала...",
+    "Error while loading, please reload/refresh": "Ошибка загрузки, пожалуйста перезагрузите или обновите",
+    "File type not supported": "Тип файла не поддерживается",
+    "Flag": "Пометить",
+    "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": "Мгновенные Команды",
+    "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.": "Достигнут предел максимального размера файла для загрузки. Загрузите файл размером менее {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} МБ.",
     "Message Reactions": "Сообщения Реакции",
-    "Message deleted": "",
-    "Message flagged": "",
-    "Mute User": "",
-    "Not supported": "",
-    "Nothing yet...": "",
-    "Ok": "",
+    "Message deleted": "Сообщение удалено",
+    "Message flagged": "Сообщение отмечено",
+    "Mute User": "Отключить пользователя",
+    "Not supported": "не поддерживается",
+    "Nothing yet...": "Пока ничего нет...",
+    "Ok": "Oк",
     "Only visible to you": "Видно только вам",
     "Photo": "Фото",
     "Photos and Videos": "Фото и видео",
-    "Pin to Conversation": "",
+    "Pin to Conversation": "Закрепить к беседе",
     "Pinned by": "Закреплено пользователем",
     "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": "",
+    "Please select a channel first": "Пожалуйста, сначала выберите канал",
+    "Reconnecting...": "Переподключение...",
+    "Reply": "Ответить",
+    "Reply to Message": "Ответить на сообщение",
+    "Resend": "Отправить",
+    "Search GIFs": "Поиск GIF",
     "Select More Photos": "Выбрать больше фотографий",
-    "Send a message": "",
-    "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
-    "The message has been reported to a moderator.": "",
-    "Thread Reply": "",
-    "Unblock User": "",
+    "Send a message": "Отправить сообщение",
+    "Sending links is not allowed in this conversation": "Отправка ссылок недоступна в этом чате",
+    "Slow mode ON": "Медленный режим включен",
+    "The message has been reported to a moderator.": "Сообщение отправлено модератору.",
+    "Thread Reply": "Тема Ответить",
+    "Unblock User": "Разблокировать пользователя",
     "Unknown User": "Неизвестный пользователь",
-    "Unmute User": "",
-    "Unpin from Conversation": "",
+    "Unmute User": "Включить микрофон",
+    "Unpin from Conversation": "Открепить от беседы",
     "Unread Messages": "Непрочитанные Сообщения",
     "Video": "видео",
-    "You": "",
-    "You can't send messages in this channel": "",
+    "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 }} Ответов",
     "{{ replyCount }} Thread Replies": "{{replyCount}} Ответы в темах",
     "{{ user }} is typing": "{{ user }} пишет",
-    "🏙 Attachment...": ""
+    "🏙 Attachment...": "🏙 Вложение..."
 }

package/lib/typescript/i18n/tr.json

@@ -2,70 +2,72 @@
     "1 Reply": "1 Cevap",
     "1 Thread Reply": "1 Konu Yanıtı",
     "Allow access to your Gallery": "Galerinize erişime izin verin",
-    "Also send to channel": "",
-    "Are you sure you want to permanently delete this message?": "",
-    "Block User": "",
-    "Cancel": "",
-    "Cannot Flag Message": "",
-    "Copy Message": "",
-    "Delete": "",
-    "Delete Message": "",
-    "Do you want to send a copy of this message to a moderator for further investigation?": "",
-    "Edit Message": "",
-    "Editing Message": "",
-    "Emoji matching": "",
-    "Empty message...": "",
-    "Error loading": "",
-    "Error loading channel list...": "",
-    "Error loading messages for this channel...": "",
-    "Error while loading, please reload/refresh": "",
-    "File type not supported": "",
-    "Flag": "",
-    "Flag Message": "",
-    "Flag action failed either due to a network issue or the message is already flagged": "",
-    "Instant Commands": "",
-    "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.": "",
+    "Also send to channel": "Kanala da gönder",
+    "Are you sure you want to permanently delete this message?": "Bu mesajı kalıcı olarak silmek istediğinizden emin misiniz?",
+    "Block User": "Kullanıcıyı engelle",
+    "Cancel": "İptal",
+    "Cannot Flag Message": "Raporlama Başarısız",
+    "Copy Message": "Mesajı Kopyala",
+    "Delete": "Sil",
+    "Delete Message": "Mesajı Sil",
+    "Do you want to send a copy of this message to a moderator for further investigation?": "Detaylı inceleme için bu mesajın kopyasını moderatöre göndermek istiyor musunuz?",
+    "Edit Message": "Mesajı Düzenle",
+    "Editing Message": "Mesaj Düzenleniyor",
+    "Emoji matching": "Emoji eşleştirme",
+    "Empty message...": "Boş mesaj...",
+    "Error loading": "Yükleme hatası",
+    "Error loading channel list...": "Kanal listesi yüklenirken hata oluştu...",
+    "Error loading messages for this channel...": "Bu kanal için mesajlar yüklenirken hata oluştu...",
+    "Error while loading, please reload/refresh": "Yüklenirken hata oluştu, lütfen tekrar deneyiniz",
+    "File type not supported": "Dosya türü desteklenmiyor",
+    "Flag": "Raporla",
+    "Flag Message": "Mesajı Raporla",
+    "Flag action failed either due to a network issue or the message is already flagged": "Mesajın daha önce raporlanmış olması veya bir ağ bağlantısı sorunu nedeniyle raporlama işlemi başarısız oldu.",
+    "How about sending your first message to a friend?": "İlk mesajınızı bir arkadaşınıza göndermeye ne dersiniz?",
+    "Instant Commands": "Anlık Komutlar",
+    "Let's start chatting!": "Haydi sohbete başlayalım!",
+    "Links are disabled": "Bağlantılar devre dışı",
+    "Loading channels...": "Kanallar yükleniyor...",
+    "Loading messages...": "Mesajlar yükleniyor...",
+    "Loading...": "Yükleniyor...",
+    "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "Maksimum dosya boyutu yükleme sınırına ulaşıldı. Lütfen {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB'ın altında bir dosya yükleyin.",
     "Message Reactions": "Mesaj Tepkileri",
-    "Message deleted": "",
-    "Message flagged": "",
-    "Mute User": "",
-    "Not supported": "",
-    "Nothing yet...": "",
-    "Ok": "",
+    "Message deleted": "Mesaj silindi",
+    "Message flagged": "Mesaj işaretlendi",
+    "Mute User": "Kullanıcıyı sessize al",
+    "Not supported": "Desteklenmiyor",
+    "Nothing yet...": "Henüz değil...",
+    "Ok": "Tamam",
     "Only visible to you": "Sadece siz görebilirsiniz",
     "Photo": "Fotoğraf",
     "Photos and Videos": "Fotoğraflar ve Videolar",
-    "Pin to Conversation": "",
+    "Pin to Conversation": "Konuşmaya sabitle",
     "Pinned by": "Tarafından sabitlendi",
     "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": "",
-    "Reconnecting...": "",
-    "Reply": "",
-    "Reply to Message": "",
-    "Resend": "",
-    "Search GIFs": "",
+    "Please select a channel first": "Lütfen önce bir kanal seçiniz",
+    "Reconnecting...": "Yeniden Bağlanılıyor...",
+    "Reply": "Yanıtla",
+    "Reply to Message": "Mesajı Yanıtla",
+    "Resend": "Yeniden gönder",
+    "Search GIFs": "GIF Ara",
     "Select More Photos": "Daha Fazla Fotoğraf Seçin",
-    "Send a message": "",
-    "Sending links is not allowed in this conversation": "",
-    "Slow mode ON": "",
-    "The message has been reported to a moderator.": "",
-    "Thread Reply": "",
-    "Unblock User": "",
+    "Send a message": "Mesaj gönder",
+    "Sending links is not allowed in this conversation": "Bu konuşmada bağlantı göndermek desteklenmiyor",
+    "Slow mode ON": "Yavaş Mod Açık",
+    "The message has been reported to a moderator.": "Mesaj moderatöre bildirildi.",
+    "Thread Reply": "Konu Yanıtı",
+    "Unblock User": "Kullanıcının engelini kaldır",
     "Unknown User": "Bilinmeyen kullanıcı",
-    "Unmute User": "",
-    "Unpin from Conversation": "",
+    "Unmute User": "Kullanıcının sesini aç",
+    "Unpin from Conversation": "Sabitlemeyi kaldır",
     "Unread Messages": "Okunmamış Mesajlar",
     "Video": "Video",
-    "You": "",
-    "You can't send messages in this channel": "",
+    "You": "Sen",
+    "You can't send messages in this channel": "Bu konuşmaya mesaj gönderemezsiniz",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} ve {{ nonSelfUserLength }} kişi daha yazıyor",
     "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
     "{{ replyCount }} Replies": "{{ replyCount }} Cevap",
     "{{ replyCount }} Thread Replies": "{{responseCount}} Konu Cevapı",
     "{{ user }} is typing": "{{ user }} yazıyor",
-    "🏙 Attachment...": ""
+    "🏙 Attachment...": "🏙 Ek..."
 }

package/lib/typescript/store/mappers/mapStorableToChannel.d.ts

@@ -1,4 +1,4 @@
 import type { ChannelAPIResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { TableRow } from '../types';
-export declare const mapStorableToChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channelRow: TableRow<'channels'>) => Omit<ChannelAPIResponse<StreamChatGenerics>, "members" | "duration" | "messages" | "pinned_messages">;
+export declare const mapStorableToChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channelRow: TableRow<'channels'>) => Omit<ChannelAPIResponse<StreamChatGenerics>, "duration" | "members" | "messages" | "pinned_messages">;

package/lib/typescript/utils/Streami18n.d.ts

@@ -142,7 +142,9 @@ export declare class Streami18n {
                  */
                 "Flag Message": string;
                 "Flag action failed either due to a network issue or the message is already flagged": string;
+                "How about sending your first message to a friend?": string;
                 "Instant Commands": string;
+                "Let's start chatting!": string;
                 "Links are disabled": string;
                 "Loading channels...": string;
                 "Loading messages...": string;
@@ -159,6 +161,10 @@ export declare class Streami18n {
                 Photo: string;
                 "Photos and Videos": string;
                 "Pin to Conversation": string;
+                /**
+                 * Hindi notation for meridiems are quite fuzzy in practice. While there exists
+                 * a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+                 */
                 "Pinned by": string;
                 "Please enable access to your photos and videos so you can share them.": string;
                 "Please select a channel first": string;

package/lib/typescript/utils/utils.d.ts

@@ -105,8 +105,6 @@ export declare const ACITriggerSettings: <StreamChatGenerics extends DefaultStre
 export declare const makeImageCompatibleUrl: (url: string) => string;
 export declare const getUrlWithoutParams: (url?: string | undefined) => string | undefined;
 export declare const isLocalUrl: (url: string) => boolean;
-export declare const vw: (percentageWidth: number, rounded?: boolean) => number;
-export declare const vh: (percentageHeight: number, rounded?: boolean) => number;
 export declare const generateRandomId: (a?: string) => string;
 export declare const emojiRegex: RegExp;
 export declare const urlRegex: RegExp;

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.1",
+  "version": "5.22.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

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: {
@@ -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/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
    */

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/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 '';