stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/src/__tests__/offline-support/optimistic-update.js

@@ -24,7 +24,7 @@ import { generateReaction } from '../../mock-builders/generator/reaction';
 import { generateUser } from '../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../mock-builders/mock';
 import { upsertChannels } from '../../store/apis';
-import { QuickSqliteClient } from '../../store/QuickSqliteClient';
+import { SqliteClient } from '../../store/SqliteClient';
 import { BetterSqlite } from '../../test-utils/BetterSqlite';
 
 test('Workaround to allow exporting tests', () => expect(true).toBe(true));
@@ -108,17 +108,19 @@ export const OptimisticUpdates = () => {
       channel.id = channelResponse.channel.id;
 
       // Populate the DB with channel
-      QuickSqliteClient.initializeDatabase();
-      upsertChannels({
+      await SqliteClient.initializeDatabase();
+      await BetterSqlite.openDB();
+      await upsertChannels({
         channels: [channelResponse],
         isLatestMessagesSet: true,
       });
     });
 
     afterEach(() => {
-      QuickSqliteClient.dropTables();
-      QuickSqliteClient.closeDB();
+      BetterSqlite.dropAllTables();
+      BetterSqlite.closeDB();
       cleanup();
+      jest.clearAllMocks();
     });
 
     let channel;
@@ -166,8 +168,8 @@ export const OptimisticUpdates = () => {
           </Chat>,
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
           const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
           expect(pendingTaskType).toBe('delete-message');
@@ -181,9 +183,9 @@ export const OptimisticUpdates = () => {
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel} initialValue={message.text}>
               <CallbackEffectWithContext
-                callback={({ deleteMessage }) => {
+                callback={async ({ deleteMessage }) => {
                   useMockedApis(chatClient, [deleteMessageApi(message)]);
-                  deleteMessage(message);
+                  await deleteMessage(message);
                 }}
                 context={MessagesContext}
               >
@@ -193,8 +195,9 @@ export const OptimisticUpdates = () => {
           </Chat>,
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
         });
       });
@@ -225,8 +228,8 @@ export const OptimisticUpdates = () => {
           </Chat>,
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
           const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
           expect(pendingTaskType).toBe('send-reaction');
@@ -242,9 +245,9 @@ export const OptimisticUpdates = () => {
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
-                callback={({ sendReaction }) => {
+                callback={async ({ sendReaction }) => {
                   useMockedApis(chatClient, [sendReactionApi(targetMessage, reaction)]);
-                  sendReaction(reaction.type, targetMessage.id);
+                  await sendReaction(reaction.type, targetMessage.id);
                 }}
                 context={MessagesContext}
               >
@@ -254,8 +257,8 @@ export const OptimisticUpdates = () => {
           </Chat>,
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
         });
       });
@@ -286,8 +289,8 @@ export const OptimisticUpdates = () => {
           </Chat>,
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
           const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
           expect(pendingTaskType).toBe('delete-reaction');
@@ -316,8 +319,8 @@ export const OptimisticUpdates = () => {
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
-        await waitFor(() => {
-          const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+        await waitFor(async () => {
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
         });
       });
@@ -355,8 +358,9 @@ export const OptimisticUpdates = () => {
       );
       await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
-      await waitFor(() => {
-        const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
+      await waitFor(async () => {
+        const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+
         expect(pendingTasksRows.length).toBe(2);
       });
 

package/src/components/Attachment/Attachment.tsx

@@ -11,7 +11,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
-import { isVideoPackageAvailable } from '../../native';
+import { isVideoPlayerAvailable } from '../../native';
 
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
@@ -75,7 +75,7 @@ const AttachmentWithContext = <
   }
 
   if (attachment.type === FileTypes.Video && !attachment.og_scrape_url) {
-    return isVideoPackageAvailable() ? (
+    return isVideoPlayerAvailable() ? (
       <>
         <Gallery videos={[attachment]} />
         {hasAttachmentActions && (

package/src/components/Attachment/Card.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import {
   Image,
   ImageStyle,
+  Pressable,
   StyleProp,
   StyleSheet,
   Text,
   TextStyle,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
@@ -29,7 +29,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons/Play';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
-import { ImageBackground } from '../ImageBackground';
+import { ImageBackground } from '../UIComponents/ImageBackground';
 
 const styles = StyleSheet.create({
   authorName: { fontSize: 14.5, fontWeight: '600' },
@@ -92,7 +92,7 @@ export type CardPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'CardCover' | 'CardFooter' | 'CardHeader' | 'myMessageTheme'
+    'additionalPressableProps' | 'CardCover' | 'CardFooter' | 'CardHeader' | 'myMessageTheme'
   > & {
     channelId: string | undefined;
     messageId: string | undefined;
@@ -116,7 +116,7 @@ const CardWithContext = <
   props: CardPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalTouchableProps,
+    additionalPressableProps,
     author_name,
     CardCover,
     CardFooter,
@@ -163,7 +163,7 @@ const CardWithContext = <
   const isVideoCard = type === FileTypes.Video && og_scrape_url;
 
   return (
-    <TouchableOpacity
+    <Pressable
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -196,7 +196,7 @@ const CardWithContext = <
       }}
       style={[styles.container, container, stylesProp.container]}
       testID='card-attachment'
-      {...additionalTouchableProps}
+      {...additionalPressableProps}
     >
       {CardHeader && <CardHeader {...props} />}
       {CardCover && <CardCover {...props} />}
@@ -285,7 +285,7 @@ const CardWithContext = <
           </View>
         </View>
       )}
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -316,7 +316,7 @@ export type CardProps<
       > &
       Pick<
         MessagesContextValue<StreamChatGenerics>,
-        'additionalTouchableProps' | 'CardCover' | 'CardFooter' | 'CardHeader'
+        'additionalPressableProps' | 'CardCover' | 'CardFooter' | 'CardHeader'
       >
   >;
 
@@ -331,14 +331,14 @@ export const Card = <
   const { ImageComponent } = useChatContext<StreamChatGenerics>();
   const { message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
-  const { additionalTouchableProps, CardCover, CardFooter, CardHeader, myMessageTheme } =
+  const { additionalPressableProps, CardCover, CardFooter, CardHeader, myMessageTheme } =
     useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedCard
       key={`${message?.id}${message?.updated_at}`} // press listeners must change on message update, updating key ensures this
       {...{
-        additionalTouchableProps,
+        additionalPressableProps,
         CardCover,
         CardFooter,
         CardHeader,

package/src/components/Attachment/FileAttachment.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Pressable, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -54,7 +46,7 @@ export type FileAttachmentPropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'AttachmentActions' | 'FileAttachmentIcon'
+    'additionalPressableProps' | 'AttachmentActions' | 'FileAttachmentIcon'
   > & {
     /** The attachment to render */
     attachment: Attachment<StreamChatGenerics>;
@@ -73,7 +65,7 @@ const FileAttachmentWithContext = <
   props: FileAttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalTouchableProps,
+    additionalPressableProps,
     attachment,
     AttachmentActions,
     attachmentSize,
@@ -98,7 +90,7 @@ const FileAttachmentWithContext = <
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
   return (
-    <TouchableOpacity
+    <Pressable
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -130,7 +122,7 @@ const FileAttachmentWithContext = <
         }
       }}
       testID='file-attachment'
-      {...additionalTouchableProps}
+      {...additionalPressableProps}
     >
       <View style={[styles.container, { backgroundColor: white }, container, stylesProp.container]}>
         <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentSize} />
@@ -153,7 +145,7 @@ const FileAttachmentWithContext = <
         </View>
       </View>
       {attachment.actions?.length ? <AttachmentActions {...attachment} /> : null}
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -169,7 +161,7 @@ export const FileAttachment = <
 ) => {
   const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext<StreamChatGenerics>();
   const {
-    additionalTouchableProps,
+    additionalPressableProps,
     AttachmentActions = AttachmentActionsDefault,
     FileAttachmentIcon = FileIconDefault,
   } = useMessagesContext<StreamChatGenerics>();
@@ -177,7 +169,7 @@ export const FileAttachment = <
   return (
     <FileAttachmentWithContext
       {...{
-        additionalTouchableProps,
+        additionalPressableProps,
         AttachmentActions,
         FileAttachmentIcon,
         onLongPress,

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -15,7 +15,7 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { isAudioPackageAvailable } from '../../native';
+import { isSoundPackageAvailable } from '../../native';
 
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
@@ -123,7 +123,7 @@ const FileAttachmentGroupWithContext = <
           ]}
         >
           {(file.type === FileTypes.Audio || file.type === FileTypes.VoiceRecording) &&
-          isAudioPackageAvailable() ? (
+          isSoundPackageAvailable() ? (
             <AudioAttachment
               item={{
                 duration: file.duration,

package/src/components/Attachment/Gallery.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -13,6 +13,7 @@ import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius
 import { openUrlSafely } from './utils/openUrlSafely';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -31,7 +32,7 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
-import { isVideoPackageAvailable } from '../../native';
+import { isVideoPlayerAvailable } from '../../native';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
@@ -52,7 +53,7 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    | 'additionalTouchableProps'
+    | 'additionalPressableProps'
     | 'legacyImageViewerSwipeBehaviour'
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
@@ -83,7 +84,7 @@ const GalleryWithContext = <
   props: GalleryPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalTouchableProps,
+    additionalPressableProps,
     alignment,
     groupStyles,
     hasThreadReplies,
@@ -104,6 +105,7 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       messageSimple: {
@@ -139,6 +141,7 @@ const GalleryWithContext = <
     () =>
       buildGallery({
         images: imagesAndVideos,
+        resizableCDNHosts,
         sizeConfig,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -197,7 +200,7 @@ const GalleryWithContext = <
 
               return (
                 <GalleryThumbnail
-                  additionalTouchableProps={additionalTouchableProps}
+                  additionalPressableProps={additionalPressableProps}
                   borderRadius={borderRadius}
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
@@ -248,7 +251,7 @@ type GalleryThumbnailProps<
   thumbnail: Thumbnail;
 } & Pick<
   MessagesContextValue<StreamChatGenerics>,
-  | 'additionalTouchableProps'
+  | 'additionalPressableProps'
   | 'legacyImageViewerSwipeBehaviour'
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
@@ -264,7 +267,7 @@ type GalleryThumbnailProps<
 const GalleryThumbnail = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  additionalTouchableProps,
+  additionalPressableProps,
   borderRadius,
   colIndex,
   ImageLoadingFailedIndicator,
@@ -312,7 +315,7 @@ const GalleryThumbnail = <
   const defaultOnPress = () => {
     // If the url is defined then only try to open the file.
     if (thumbnail.url) {
-      if (thumbnail.type === FileTypes.Video && !isVideoPackageAvailable()) {
+      if (thumbnail.type === FileTypes.Video && !isVideoPlayerAvailable()) {
         // This condition is kinda unreachable, since we render videos as file attachment if the video
         // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
         openUrlSafely(thumbnail.url);
@@ -323,8 +326,7 @@ const GalleryThumbnail = <
   };
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
+    <Pressable
       disabled={preventPress}
       key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
       onLongPress={(event) => {
@@ -353,16 +355,17 @@ const GalleryThumbnail = <
           });
         }
       }}
-      style={[
+      style={({ pressed }) => [
         styles.imageContainer,
         {
           height: thumbnail.height,
+          opacity: pressed ? 0.8 : 1,
           width: thumbnail.width,
         },
         imageContainer,
       ]}
       testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
-      {...additionalTouchableProps}
+      {...additionalPressableProps}
     >
       {thumbnail.type === FileTypes.Video ? (
         <VideoThumbnail
@@ -400,7 +403,7 @@ const GalleryThumbnail = <
           </Text>
         </View>
       ) : null}
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -455,7 +458,7 @@ const GalleryImageThumbnail = <
               setLoadingImage(false);
               setLoadingImageError(true);
             }}
-            onLoadEnd={() => setLoadingImage(false)}
+            onLoadEnd={() => setTimeout(() => setLoadingImage(false), 0)}
             onLoadStart={() => setLoadingImage(true)}
             resizeMode={thumbnail.resizeMode}
             style={[
@@ -552,7 +555,7 @@ export const Gallery = <
   props: GalleryProps<StreamChatGenerics>,
 ) => {
   const {
-    additionalTouchableProps: propAdditionalTouchableProps,
+    additionalPressableProps: propAdditionalPressableProps,
     alignment: propAlignment,
     groupStyles: propGroupStyles,
     hasThreadReplies,
@@ -587,7 +590,7 @@ export const Gallery = <
     videos: contextVideos,
   } = useMessageContext<StreamChatGenerics>();
   const {
-    additionalTouchableProps: contextAdditionalTouchableProps,
+    additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
     legacyImageViewerSwipeBehaviour,
@@ -602,7 +605,7 @@ export const Gallery = <
 
   if (!images.length && !videos.length) return null;
 
-  const additionalTouchableProps = propAdditionalTouchableProps || contextAdditionalTouchableProps;
+  const additionalPressableProps = propAdditionalPressableProps || contextAdditionalPressableProps;
   const alignment = propAlignment || contextAlignment;
   const groupStyles = propGroupStyles || contextGroupStyles;
   const onLongPress = propOnLongPress || contextOnLongPress;
@@ -622,7 +625,7 @@ export const Gallery = <
   return (
     <MemoizedGallery
       {...{
-        additionalTouchableProps,
+        additionalPressableProps,
         alignment,
         channelId: message?.cid,
         groupStyles,

package/src/components/Attachment/Giphy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -151,7 +151,7 @@ export type GiphyPropsWithContext<
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'giphyVersion'
-    | 'additionalTouchableProps'
+    | 'additionalPressableProps'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
   > & {
@@ -164,7 +164,7 @@ const GiphyWithContext = <
   props: GiphyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalTouchableProps,
+    additionalPressableProps,
     attachment,
     giphyVersion,
     handleAction,
@@ -260,7 +260,7 @@ const GiphyWithContext = <
       </View>
       <View>
         <View style={styles.actionsRow}>
-          <TouchableOpacity
+          <Pressable
             onPress={() => {
               if (actions?.[2].name && actions?.[2].value && handleAction) {
                 handleAction(actions[2].name, actions[2].value);
@@ -274,8 +274,8 @@ const GiphyWithContext = <
             testID={`${actions?.[2].value}-action-button`}
           >
             <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
+          </Pressable>
+          <Pressable
             onPress={() => {
               if (actions?.[1].name && actions?.[1].value && handleAction) {
                 handleAction(actions[1].name, actions[1].value);
@@ -289,8 +289,8 @@ const GiphyWithContext = <
             testID={`${actions?.[1].value}-action-button`}
           >
             <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
+          </Pressable>
+          <Pressable
             onPress={() => {
               if (actions?.[0].name && actions?.[0].value && handleAction) {
                 handleAction(actions[0].name, actions[0].value);
@@ -300,12 +300,12 @@ const GiphyWithContext = <
             testID={`${actions?.[0].value}-action-button`}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
-          </TouchableOpacity>
+          </Pressable>
         </View>
       </View>
     </View>
   ) : (
-    <TouchableOpacity
+    <Pressable
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -333,7 +333,7 @@ const GiphyWithContext = <
         }
       }}
       testID='giphy-attachment'
-      {...additionalTouchableProps}
+      {...additionalPressableProps}
     >
       <View
         style={[
@@ -383,7 +383,7 @@ const GiphyWithContext = <
           </View>
         </View>
       </View>
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -451,7 +451,7 @@ export const Giphy = <
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { ImageComponent } = useChatContext<StreamChatGenerics>();
-  const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
+  const { additionalPressableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
@@ -466,7 +466,7 @@ export const Giphy = <
   return (
     <MemoizedGiphy
       {...{
-        additionalTouchableProps,
+        additionalPressableProps,
         giphyVersion,
         handleAction,
         ImageComponent,

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

@@ -14,13 +14,16 @@ import {
   generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import * as NativeUtils from '../../../native';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
+jest.mock('../../../native.ts', () => ({
+  isVideoPlayerAvailable: jest.fn(() => false),
+}));
+
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
@@ -50,7 +53,6 @@ describe('Attachment', () => {
   });
 
   it('should render File component for "video" type attachment', async () => {
-    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => false));
     const attachment = generateVideoAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -21,7 +21,6 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import * as NativeUtils from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -81,7 +80,6 @@ describe('Gallery', () => {
   });
 
   it('should render one image and one video attachment', async () => {
-    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => true));
     const attachment1 = generateImageAttachment({
       original_height: 600,
       original_width: 400,