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

package/lib/typescript/i18n/tr.json

@@ -2,7 +2,7 @@
     "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": "",
+    "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",
@@ -12,62 +12,62 @@
     "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": "",
+    "Editing Message": "Mesaj Düzenleniyor",
     "Emoji matching": "Emoji eşleştirme",
-    "Empty message...": "",
-    "Error loading": "",
-    "Error loading channel list...": "",
-    "Error loading messages for this channel...": "",
-    "Error while loading, please reload/refresh": "",
+    "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?": "",
+    "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!": "",
-    "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 deleted": "",
+    "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": "Mesaj silindi",
     "Message flagged": "Mesaj işaretlendi",
     "Mute User": "Kullanıcıyı sessize al",
-    "Not supported": "",
-    "Nothing yet...": "",
+    "Not supported": "Desteklenmiyor",
+    "Nothing yet...": "Henüz değil...",
     "Ok": "Tamam",
-    "Only visible to you": "",
+    "Only visible to you": "Sadece siz görebilirsiniz",
     "Photo": "Fotoğraf",
     "Photos and Videos": "Fotoğraflar ve Videolar",
     "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...": "",
+    "Please select a channel first": "Lütfen önce bir kanal seçiniz",
+    "Reconnecting...": "Yeniden Bağlanılıyor...",
     "Reply": "Yanıtla",
-    "Reply to Message": "",
+    "Reply to Message": "Mesajı Yanıtla",
     "Resend": "Yeniden gönder",
-    "Search GIFs": "",
+    "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": "",
+    "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": "Kullanıcının sesini aç",
     "Unpin from Conversation": "Sabitlemeyi kaldır",
-    "Unread Messages": "",
+    "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/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.2",
+  "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

@@ -3,10 +3,8 @@ 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: {
@@ -17,7 +15,6 @@ const styles = StyleSheet.create({
   channelDetails: {
     fontSize: 14,
     textAlign: 'center',
-    width: vw(66),
   },
   channelTitle: {
     fontSize: 16,
@@ -37,6 +34,8 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
       emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
     },
   } = useTheme();
+  const { vw } = useViewport();
+  const width = vw(33);
   const { t } = useTranslationContext();
 
   switch (listType) {
@@ -51,7 +50,7 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
             {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'
           >
             {t('How about sending your first message to a friend?')}

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/MessageList/InlineUnreadIndicator.tsx

@@ -4,7 +4,7 @@ import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { vw } from '../../utils/utils';
+import { useViewport } from '../../hooks/useViewport';
 
 const styles = StyleSheet.create({
   container: {
@@ -28,6 +28,7 @@ export const InlineUnreadIndicator: React.FC = () => {
     },
   } = useTheme();
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   return (
     <View style={[styles.container, container]}>

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -10,8 +10,8 @@ import {
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 export type MessageActionListPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -52,6 +52,7 @@ const MessageActionListWithContext = <
     message,
     messageReactions,
   };
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -89,7 +90,7 @@ const MessageActionListWithContext = <
         width.value = layout.width;
         height.value = layout.height;
       }}
-      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}
+      style={[styles.container, { backgroundColor: white_snow, minWidth: vw(65) }, showScreenStyle]}
       testID='message-action-list'
     >
       {messageActions?.map((messageAction, index) => (
@@ -154,17 +155,8 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: 16,
     marginTop: 8,
-    minWidth: vw(65),
     overflow: 'hidden',
   },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: vw(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
   titleStyle: {
     paddingLeft: 20,
   },

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -6,8 +6,8 @@ import Animated from 'react-native-reanimated';
 import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
 
 export type ActionType =
@@ -50,6 +50,7 @@ const MessageActionListItemWithContext = <
   props: MessageActionListItemProps<StreamChatGenerics>,
 ) => {
   const { action, actionType, icon, index, length, title, titleStyle } = props;
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -65,6 +66,9 @@ const MessageActionListItemWithContext = <
       <Animated.View
         style={[
           styles.row,
+          {
+            minWidth: vw(65),
+          },
           index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
           animatedStyle,
           messageActions.actionContainer,
@@ -114,7 +118,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    minWidth: vw(65),
     paddingHorizontal: 20,
     paddingVertical: 10,
   },

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -41,8 +41,8 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vh, vw } from '../../utils/utils';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 import {
   OverlayReactions as DefaultOverlayReactions,
@@ -78,8 +78,6 @@ const styles = StyleSheet.create({
   scrollView: { overflow: Platform.OS === 'ios' ? 'visible' : 'scroll' },
 });
 
-const screenHeight = vh(100);
-const halfScreenHeight = vh(50);
 const DefaultMessageTextNumberOfLines = 5;
 
 export type MessageOverlayPropsWithContext<
@@ -154,6 +152,10 @@ const MessageOverlayWithContext = <
   };
 
   const { theme } = useTheme();
+  const { vh, vw } = useViewport();
+
+  const screenHeight = vh(100);
+  const halfScreenHeight = vh(50);
 
   const myMessageTheme = messagesContext?.myMessageTheme;
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,8 +12,8 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
@@ -47,6 +47,7 @@ const ThreadFooterComponentWithContext = <
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   const {
     theme: {

package/src/contexts/themeContext/utils/theme.ts

@@ -2,7 +2,6 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { CircleProps, Color, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
-import { vh } from '../../../utils/utils';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
 
@@ -302,9 +301,6 @@ export type Theme = {
         iconContainer: ViewStyle;
         title: TextStyle;
       };
-      container: ViewStyle & {
-        maxHeight: number;
-      };
       emoji: {
         container: ViewStyle;
         text: TextStyle;
@@ -810,9 +806,6 @@ export const defaultTheme: Theme = {
         iconContainer: {},
         title: {},
       },
-      container: {
-        maxHeight: vh(25),
-      },
       emoji: {
         container: {},
         text: {},