stream-chat-react-native-core 6.6.8-beta.3 → 7.0.0-rc.2

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { TFunction } from 'i18next';
 import type {
@@ -16,19 +16,13 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 
 import { useStateStore } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 import { stringifyMessage } from '../../../utils/utils';
 
-type LatestMessage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> =
-  | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-  | MessageResponse<StreamChatGenerics>;
+type LatestMessage = ReturnType<ChannelState['formatMessage']> | MessageResponse;
 
-export type LatestMessagePreview<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  messageObject: LatestMessage<StreamChatGenerics> | undefined;
+export type LatestMessagePreview = {
+  messageObject: LatestMessage | undefined;
   previews: {
     bold: boolean;
     text: string;
@@ -43,18 +37,14 @@ export type LatestMessagePreviewSelectorReturnType = {
   name?: string;
 };
 
-const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  nextValue: PollState<StreamChatGenerics>,
-): LatestMessagePreviewSelectorReturnType => ({
+const selector = (nextValue: PollState): LatestMessagePreviewSelectorReturnType => ({
   createdBy: nextValue.created_by,
   latestVotesByOption: nextValue.latest_votes_by_option,
   name: nextValue.name,
 });
 
-const getMessageSenderName = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: LatestMessage<StreamChatGenerics> | undefined,
+const getMessageSenderName = (
+  message: LatestMessage | undefined,
   currentUserId: string | undefined,
   t: (key: string) => string,
   membersLength: number,
@@ -70,11 +60,7 @@ const getMessageSenderName = <
   return '';
 };
 
-const getMentionUsers = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  mentionedUser: UserResponse<StreamChatGenerics>[] | undefined,
-) => {
+const getMentionUsers = (mentionedUser: UserResponse[] | undefined) => {
   if (Array.isArray(mentionedUser)) {
     const mentionUserString = mentionedUser.reduce((acc, cur) => {
       const userName = cur.name || cur.id || '';
@@ -93,12 +79,10 @@ const getMentionUsers = <
   return '';
 };
 
-const getLatestMessageDisplayText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  client: StreamChat<StreamChatGenerics>,
-  message: LatestMessage<StreamChatGenerics> | undefined,
+const getLatestMessageDisplayText = (
+  channel: Channel,
+  client: StreamChat,
+  message: LatestMessage | undefined,
   t: (key: string) => string,
   pollState: LatestMessagePreviewSelectorReturnType | undefined,
 ) => {
@@ -185,12 +169,10 @@ export enum MessageReadStatus {
   READ = 2,
 }
 
-const getLatestMessageReadStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  client: StreamChat<StreamChatGenerics>,
-  message: LatestMessage<StreamChatGenerics> | undefined,
+const getLatestMessageReadStatus = (
+  channel: Channel,
+  client: StreamChat,
+  message: LatestMessage | undefined,
   readEvents: boolean,
 ): MessageReadStatus => {
   const currentUserId = client.userID;
@@ -216,17 +198,13 @@ const getLatestMessageReadStatus = <
     : MessageReadStatus.UNREAD;
 };
 
-const getLatestMessagePreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(params: {
-  channel: Channel<StreamChatGenerics>;
-  client: StreamChat<StreamChatGenerics>;
+const getLatestMessagePreview = (params: {
+  channel: Channel;
+  client: StreamChat;
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
-  lastMessage?:
-    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-    | MessageResponse<StreamChatGenerics>;
+  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse;
 }) => {
   const { channel, client, lastMessage, pollState, readEvents, t } = params;
 
@@ -265,27 +243,34 @@ const getLatestMessagePreview = <
  *
  * @returns {object} latest message preview e.g.. { text: 'this was last message ...', created_at: '11/12/2020', messageObject: { originalMessageObject } }
  */
-export const useLatestMessagePreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
+export const useLatestMessagePreview = (
+  channel: Channel,
   forceUpdate: number,
-  lastMessage?:
-    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-    | MessageResponse<StreamChatGenerics>,
+  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>();
+  const { client } = useChatContext();
   const { t } = useTranslationContext();
 
   const channelConfigExists = typeof channel?.getConfig === 'function';
 
-  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(lastMessage);
+  const translatedLastMessage = useTranslatedMessage(lastMessage);
 
   const channelLastMessageString = translatedLastMessage
     ? stringifyMessage(translatedLastMessage)
     : '';
 
   const [readEvents, setReadEvents] = useState(true);
+  const [latestMessagePreview, setLatestMessagePreview] = useState<LatestMessagePreview>({
+    created_at: '',
+    messageObject: undefined,
+    previews: [
+      {
+        bold: false,
+        text: '',
+      },
+    ],
+    status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
+  });
 
   const readStatus = getLatestMessageReadStatus(channel, client, translatedLastMessage, readEvents);
 
@@ -306,25 +291,29 @@ export const useLatestMessagePreview = <
     useStateStore(poll?.state, selector) ?? {};
   const { createdBy, latestVotesByOption, name } = pollState;
 
-  const latestMessagePreview = useMemo(() => {
-    return getLatestMessagePreview({
-      channel,
-      client,
-      lastMessage: translatedLastMessage,
-      pollState,
-      readEvents,
-      t,
-    });
+  useEffect(
+    () =>
+      setLatestMessagePreview(
+        getLatestMessagePreview({
+          channel,
+          client,
+          lastMessage: translatedLastMessage,
+          pollState,
+          readEvents,
+          t,
+        }),
+      ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    channelLastMessageString,
-    forceUpdate,
-    readEvents,
-    readStatus,
-    latestVotesByOption,
-    createdBy,
-    name,
-  ]);
+    [
+      channelLastMessageString,
+      forceUpdate,
+      readEvents,
+      readStatus,
+      latestVotesByOption,
+      createdBy,
+      name,
+    ],
+  );
 
   return latestMessagePreview;
 };

package/src/components/Chat/Chat.tsx

@@ -25,17 +25,15 @@ import init from '../../init';
 
 import { SDK } from '../../native';
 import { SqliteClient } from '../../store/SqliteClient';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+
 import { DBSyncManager } from '../../utils/DBSyncManager';
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import { version } from '../../version.json';
 
 init();
 
-export type ChatProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent' | 'isMessageAIGenerated'>> & {
+export type ChatProps = Pick<ChatContextValue, 'client'> &
+  Partial<Pick<ChatContextValue, 'ImageComponent' | 'isMessageAIGenerated'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -136,11 +134,7 @@ export type ChatProps<
     style?: DeepPartial<Theme>;
   };
 
-const ChatWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
-) => {
+const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
   const {
     children,
     client,
@@ -153,7 +147,7 @@ const ChatWithContext = <
     style,
   } = props;
 
-  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
+  const [channel, setChannel] = useState<Channel>();
 
   // Setup translators
   const translators = useStreami18n(i18nInstance);
@@ -161,10 +155,7 @@ const ChatWithContext = <
   /**
    * Setup connection event listeners
    */
-  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(
-    client,
-    closeConnectionOnBackground,
-  );
+  const { connectionRecovering, isOnline } = useIsOnline(client, closeConnectionOnBackground);
 
   const [initialisedDatabaseConfig, setInitialisedDatabaseConfig] = useState<{
     initialised: boolean;
@@ -178,7 +169,7 @@ const ChatWithContext = <
    * Setup muted user listener
    * TODO: reimplement
    */
-  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
+  const mutedUsers = useMutedUsers(client);
 
   const debugRef = useDebugContext();
   const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
@@ -214,7 +205,7 @@ const ChatWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, enableOfflineSupport]);
 
-  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
+  const setActiveChannel = (newChannel?: Channel) => setChannel(newChannel);
 
   useEffect(() => {
     if (!(userID && enableOfflineSupport)) {
@@ -294,12 +285,12 @@ const ChatWithContext = <
   }
 
   return (
-    <ChatProvider<StreamChatGenerics> value={chatContext}>
+    <ChatProvider value={chatContext}>
       <TranslationProvider
         value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
       >
         <ThemeProvider style={style}>
-          <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>
+          <ChannelsStateProvider>{children}</ChannelsStateProvider>
         </ThemeProvider>
       </TranslationProvider>
     </ChatProvider>
@@ -327,11 +318,7 @@ const ChatWithContext = <
  * - Re (ReactionType) - custom Reaction object extension
  * - Us (UserType) - custom User object extension
  */
-export const Chat = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
-) => {
+export const Chat = (props: PropsWithChildren<ChatProps>) => {
   const { style } = useOverlayContext();
 
   return <ChatWithContext {...{ style }} {...props} />;

package/src/components/Chat/hooks/handleEventToSyncDB.ts

@@ -14,15 +14,8 @@ import { upsertReads } from '../../../store/apis/upsertReads';
 import { createSelectQuery } from '../../../store/sqlite-utils/createSelectQuery';
 import { SqliteClient } from '../../../store/SqliteClient';
 import { PreparedQueries } from '../../../store/types';
-import { DefaultStreamChatGenerics } from '../../../types/types';
 
-export const handleEventToSyncDB = async <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  event: Event,
-  client: StreamChat<StreamChatGenerics>,
-  flush?: boolean,
-) => {
+export const handleEventToSyncDB = async (event: Event, client: StreamChat, flush?: boolean) => {
   const { type } = event;
 
   // This function is used to guard the queries that require channel to be present in the db first

package/src/components/Chat/hooks/useAppSettings.ts

@@ -4,12 +4,9 @@ import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import * as dbApi from '../../../store/apis';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export const useAppSettings = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  client: StreamChat<StreamChatGenerics>,
+export const useAppSettings = (
+  client: StreamChat,
   isOnline: boolean | null,
   enableOfflineSupport: boolean,
   initialisedDatabase: boolean,

package/src/components/Chat/hooks/useCreateChatClient.ts

@@ -3,8 +3,6 @@ import { useEffect, useState } from 'react';
 import { StreamChat } from 'stream-chat';
 
 import type {
-  DefaultGenerics,
-  ExtendableGenerics,
   OwnUserResponse,
   StreamChatOptions,
   TokenOrProvider,
@@ -14,7 +12,7 @@ import type {
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGenerics>({
+export const useCreateChatClient = ({
   apiKey,
   options,
   tokenOrProvider,
@@ -22,10 +20,10 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
-  userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+  userData: OwnUserResponse | UserResponse;
   options?: StreamChatOptions;
 }) => {
-  const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
+  const [chatClient, setChatClient] = useState<StreamChat | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
 
   if (userData.id !== cachedUserData.id) {
@@ -35,7 +33,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
   const [cachedOptions] = useState(options);
 
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey, undefined, cachedOptions);
+    const client = new StreamChat(apiKey, undefined, cachedOptions);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -1,11 +1,8 @@
 import { useMemo } from 'react';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export const useCreateChatContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const useCreateChatContext = ({
   appSettings,
   channel,
   client,
@@ -16,7 +13,7 @@ export const useCreateChatContext = <
   isOnline,
   mutedUsers,
   setActiveChannel,
-}: ChatContextValue<StreamChatGenerics>) => {
+}: ChatContextValue) => {
   const channelId = channel?.id;
   const clientValues = client
     ? `${client.clientID}${Object.keys(client.activeChannels).length}${
@@ -25,7 +22,7 @@ export const useCreateChatContext = <
     : 'Offline';
   const mutedUsersLength = mutedUsers.length;
 
-  const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
+  const chatContext: ChatContextValue = useMemo(
     () => ({
       appSettings,
       channel,

package/src/components/Chat/hooks/useIsOnline.ts

@@ -7,20 +7,13 @@ import type { StreamChat, Event as StreamEvent } from 'stream-chat';
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
 /**
  * Disconnect the websocket connection when app goes to background,
  * and reconnect when app comes to foreground.
  * We do this to make sure the user receives push notifications when app is in the background.
  * You can't receive push notification until you have active websocket connection.
  */
-export const useIsOnline = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  client: StreamChat<StreamChatGenerics>,
-  closeConnectionOnBackground = true,
-) => {
+export const useIsOnline = (client: StreamChat, closeConnectionOnBackground = true) => {
   const [isOnline, setIsOnline] = useState<boolean | null>(null);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
   const isMounted = useIsMountedRef();
@@ -47,7 +40,7 @@ export const useIsOnline = <
   useAppStateListener(onForeground, onBackground);
 
   useEffect(() => {
-    const handleChangedEvent = (event: StreamEvent<StreamChatGenerics>) => {
+    const handleChangedEvent = (event: StreamEvent) => {
       setConnectionRecovering(!event.online);
       setIsOnline(event.online || false);
     };

package/src/components/Chat/hooks/useMutedUsers.ts

@@ -2,19 +2,11 @@ import { useEffect, useState } from 'react';
 
 import type { Event, Mute, StreamChat } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
-export const useMutedUsers = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  client: StreamChat<StreamChatGenerics>,
-) => {
-  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(
-    client?.mutedUsers || [],
-  );
+export const useMutedUsers = (client: StreamChat) => {
+  const [mutedUsers, setMutedUsers] = useState<Mute[]>(client?.mutedUsers || []);
 
   useEffect(() => {
-    const handleEvent = (event: Event<StreamChatGenerics>) => {
+    const handleEvent = (event: Event) => {
       setMutedUsers((mutes) => event.me?.mutes || mutes || []);
     };
 

package/src/components/Chat/hooks/useSyncDatabase.ts

@@ -4,20 +4,12 @@ import type { StreamChat } from 'stream-chat';
 
 import { handleEventToSyncDB } from './handleEventToSyncDB';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
-type Params<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-  client: StreamChat<StreamChatGenerics>;
+type Params = {
+  client: StreamChat;
   enableOfflineSupport: boolean;
   initialisedDatabase: boolean;
 };
-export const useSyncDatabase = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  client,
-  enableOfflineSupport,
-  initialisedDatabase,
-}: Params<StreamChatGenerics>) => {
+export const useSyncDatabase = ({ client, enableOfflineSupport, initialisedDatabase }: Params) => {
   useEffect(() => {
     let listener: ReturnType<StreamChat['on']> | undefined;
 

package/src/components/ImageGallery/ImageGallery.tsx

@@ -42,7 +42,7 @@ import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import { isVideoPlayerAvailable, VideoType } from '../../native';
-import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
+import { FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
@@ -64,9 +64,7 @@ export enum IsSwiping {
   FALSE,
 }
 
-export type ImageGalleryCustomComponents<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
+export type ImageGalleryCustomComponents = {
   /**
    * Override props for following UI components, which are part of [image gallery](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#gallery-components).
    *
@@ -99,30 +97,25 @@ export type ImageGalleryCustomComponents<
    * @overrideType object
    */
   imageGalleryCustomComponents?: {
-    footer?: ImageGalleryFooterCustomComponentProps<StreamChatGenerics>;
-    grid?: ImageGalleryGridImageComponents<StreamChatGenerics>;
+    footer?: ImageGalleryFooterCustomComponentProps;
+    grid?: ImageGalleryGridImageComponents;
     gridHandle?: ImageGalleryGridHandleCustomComponentProps;
-    header?: ImageGalleryHeaderCustomComponentProps<StreamChatGenerics>;
+    header?: ImageGalleryHeaderCustomComponentProps;
   };
 };
 
-type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
-  ImageGalleryCustomComponents<StreamChatGenerics> & {
-    overlayOpacity: SharedValue<number>;
-  } & Pick<
-      OverlayProviderProps<StreamChatGenerics>,
-      | 'giphyVersion'
-      | 'imageGalleryGridSnapPoints'
-      | 'imageGalleryGridHandleHeight'
-      | 'numberOfImageGalleryGridColumns'
-      | 'autoPlayVideo'
-    >;
-
-export const ImageGallery = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: Props<StreamChatGenerics>,
-) => {
+type Props = ImageGalleryCustomComponents & {
+  overlayOpacity: SharedValue<number>;
+} & Pick<
+    OverlayProviderProps,
+    | 'giphyVersion'
+    | 'imageGalleryGridSnapPoints'
+    | 'imageGalleryGridHandleHeight'
+    | 'numberOfImageGalleryGridColumns'
+    | 'autoPlayVideo'
+  >;
+
+export const ImageGallery = (props: Props) => {
   const {
     autoPlayVideo = false,
     giphyVersion = 'fixed_height',
@@ -132,9 +125,7 @@ export const ImageGallery = <
     numberOfImageGalleryGridColumns,
     overlayOpacity,
   } = props;
-  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
-    Photo<StreamChatGenerics>[]
-  >([]);
+  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<Photo[]>([]);
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
@@ -142,9 +133,8 @@ export const ImageGallery = <
       imageGallery: { backgroundColor, pager, slide },
     },
   } = useTheme();
-  const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
-  const { messages, selectedMessage, setSelectedMessage } =
-    useImageGalleryContext<StreamChatGenerics>();
+  const [gridPhotos, setGridPhotos] = useState<Photo[]>([]);
+  const { messages, selectedMessage, setSelectedMessage } = useImageGalleryContext();
 
   const { vh, vw } = useViewport();
 
@@ -224,7 +214,7 @@ export const ImageGallery = <
    * photo attachments
    */
 
-  const photos = messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
+  const photos = messages.reduce((acc: Photo[], cur) => {
     const attachmentImages =
       cur.attachments
         ?.filter(
@@ -273,7 +263,7 @@ export const ImageGallery = <
       };
     });
 
-    return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
+    return [...attachmentPhotos, ...acc] as Photo[];
   }, []);
 
   /**
@@ -482,6 +472,10 @@ export const ImageGallery = <
           paused: imageGalleryAttachment.id === index ? false : true,
         })),
       );
+
+      if (videoRef.current?.play) {
+        videoRef.current.play();
+      }
     } else {
       // If the status is true we simply set all the audio's paused state as true.
       setImageGalleryAttachments((prevImageGalleryAttachment) =>
@@ -490,6 +484,10 @@ export const ImageGallery = <
           paused: true,
         })),
       );
+
+      if (videoRef.current?.pause) {
+        videoRef.current.pause();
+      }
     }
   };
 
@@ -583,7 +581,7 @@ export const ImageGallery = <
           </Animated.View>
         </Animated.View>
       </GestureDetector>
-      <ImageGalleryHeader<StreamChatGenerics>
+      <ImageGalleryHeader
         opacity={headerFooterOpacity}
         photo={imageGalleryAttachments[selectedIndex]}
         visible={headerFooterVisible}
@@ -591,7 +589,7 @@ export const ImageGallery = <
       />
 
       {imageGalleryAttachments[selectedIndex] && (
-        <ImageGalleryFooter<StreamChatGenerics>
+        <ImageGalleryFooter
           accessibilityLabel={'Image Gallery Footer'}
           duration={imageGalleryAttachments[selectedIndex].duration || 0}
           onPlayPause={onPlayPause}
@@ -653,9 +651,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export type Photo<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
+export type Photo = {
   id: string;
   uri: string;
   channelId?: string;
@@ -669,7 +665,7 @@ export type Photo<
   progress?: number;
   thumb_url?: string;
   type?: string;
-  user?: UserResponse<StreamChatGenerics> | null;
+  user?: UserResponse | null;
   user_id?: string;
 };