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

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/types/types.d.ts

@@ -1,30 +1,47 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
+import type { FileStateValue } from '../utils/utils';
 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 FileUpload = {
+    file: File;
+    id: string;
+    state: FileStateValue;
+    duration?: number;
+    paused?: boolean;
+    progress?: number;
+    thumb_url?: string;
+    url?: string;
+};
+export declare type ImageUpload = {
+    file: Partial<Asset>;
+    id: string;
+    state: FileStateValue;
+    height?: number;
+    url?: string;
+    width?: number;
 };
 export declare type DefaultAttachmentType = UnknownType & {
-    file_size?: number | string;
+    file_size?: number;
     mime_type?: string;
     originalFile?: File;
+    originalImage?: Partial<Asset>;
 };
 interface DefaultUserType extends UnknownType {
     image?: string;

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

@@ -116,6 +116,7 @@ export declare class Streami18n {
                 "1 Reply": string;
                 "1 Thread Reply": string;
                 "Allow access to your Gallery": string;
+                "Allow camera access in device settings": string;
                 "Also send to channel": string;
                 "Are you sure you want to permanently delete this message?": string;
                 "Block User": string;
@@ -124,6 +125,7 @@ export declare class Streami18n {
                 "Copy Message": string;
                 Delete: string;
                 "Delete Message": string;
+                "Device camera is used to take photos or videos.": string;
                 "Do you want to send a copy of this message to a moderator for further investigation?": string;
                 "Edit Message": string;
                 "Editing Message": string;
@@ -135,14 +137,11 @@ export declare class Streami18n {
                 "Error while loading, please reload/refresh": string;
                 "File type not supported": string;
                 Flag: string;
-                /**
-                 * These locale imports also set these locales globally.
-                 * So as a last step we import the english locale to make
-                 * sure we don't mess up languages in other places in the app.
-                 */
                 "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;
@@ -156,6 +155,7 @@ export declare class Streami18n {
                 "Nothing yet...": string;
                 Ok: string;
                 "Only visible to you": string;
+                "Open Settings": string;
                 Photo: string;
                 "Photos and Videos": string;
                 "Pin to Conversation": string;

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

@@ -0,0 +1,8 @@
+import type { Asset } from '../types/types';
+/**
+ * Function to compress and Image and return the compressed Image URI
+ * @param image
+ * @param compressImageQuality
+ * @returns string
+ */
+export declare const compressedImageURI: (image: Partial<Asset>, compressImageQuality?: number | undefined) => Promise<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.10",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -79,7 +79,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "~8.14.0"
+    "stream-chat": "~8.14.3"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",

package/src/components/Attachment/AudioAttachment.tsx

@@ -4,7 +4,7 @@ import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-nat
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import { FileUpload, useTheme } from '../../contexts';
+import { useTheme } from '../../contexts';
 import { Pause, Play } from '../../icons';
 import {
   PlaybackStatus,
@@ -13,6 +13,7 @@ import {
   VideoPayloadData,
   VideoProgressData,
 } from '../../native';
+import type { FileUpload } from '../../types/types';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 
 dayjs.extend(duration);

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

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;