stream-chat-react-native-core 6.7.4 → 7.0.0-beta.1

package/src/components/MessageList/MessageList.tsx

@@ -10,13 +10,9 @@ import {
   ViewToken,
 } from 'react-native';
 
-import type { Channel, Event, FormatMessageResponse, MessageResponse } from 'stream-chat';
+import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-  useMessageList,
-} from './hooks/useMessageList';
+import { useMessageList } from './hooks/useMessageList';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -54,7 +50,7 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback } from '../../hooks';
-import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
+import { FileTypes } from '../../types/types';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -91,11 +87,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const keyExtractor = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  item: MessageType<StreamChatGenerics>,
-) => {
+const keyExtractor = (item: LocalMessage) => {
   if (item.id) {
     return item.id;
   }
@@ -109,23 +101,13 @@ const flatListViewabilityConfig: ViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1,
 };
 
-const hasReadLastMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  userId: string,
-) => {
+const hasReadLastMessage = (channel: Channel, userId: string) => {
   const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
   const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
   return latestMessageIdInChannel === lastReadMessageIdServer;
 };
 
-const getPreviousLastMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  messages: MessageType<StreamChatGenerics>[],
-  newMessage?: MessageResponse<StreamChatGenerics>,
-) => {
+const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageResponse) => {
   if (!newMessage) return;
   let previousLastMessage;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -139,11 +121,12 @@ const getPreviousLastMessage = <
   return previousLastMessage;
 };
 
-type MessageListPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<AttachmentPickerContextValue, 'closePicker' | 'selectedPicker' | 'setSelectedPicker'> &
+type MessageListPropsWithContext = Pick<
+  AttachmentPickerContextValue,
+  'closePicker' | 'selectedPicker' | 'setSelectedPicker'
+> &
   Pick<
-    ChannelContextValue<StreamChatGenerics>,
+    ChannelContextValue,
     | 'channel'
     | 'channelUnreadState'
     | 'disabled'
@@ -163,12 +146,12 @@ type MessageListPropsWithContext<
     | 'targetedMessage'
     | 'threadList'
   > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
-  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
+  Pick<ChatContextValue, 'client'> &
+  Pick<ImageGalleryContextValue, 'setMessages'> &
+  Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
-    MessagesContextValue<StreamChatGenerics>,
+    MessagesContextValue,
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
@@ -185,7 +168,7 @@ type MessageListPropsWithContext<
     | 'UnreadMessagesNotification'
   > &
   Pick<
-    ThreadContextValue<StreamChatGenerics>,
+    ThreadContextValue,
     'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
   > & {
     /**
@@ -202,7 +185,7 @@ type MessageListPropsWithContext<
      *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
      * ```
      */
-    additionalFlatListProps?: Partial<FlatListProps<MessageType<StreamChatGenerics>>>;
+    additionalFlatListProps?: Partial<FlatListProps<LocalMessage>>;
     /**
      * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
      * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
@@ -232,7 +215,7 @@ type MessageListPropsWithContext<
      *
      * @param message A message object to open the thread upon.
      */
-    onThreadSelect?: (message: ThreadContextValue<StreamChatGenerics>['thread']) => void;
+    onThreadSelect?: (message: ThreadContextValue['thread']) => void;
     /**
      * Use `setFlatListRef` to get access to ref to inner FlatList.
      *
@@ -244,7 +227,7 @@ type MessageListPropsWithContext<
      *  }}
      * ```
      */
-    setFlatListRef?: (ref: FlatListType<MessageType<StreamChatGenerics>> | null) => void;
+    setFlatListRef?: (ref: FlatListType<LocalMessage> | null) => void;
   };
 
 /**
@@ -256,11 +239,7 @@ type MessageListPropsWithContext<
  * [ThreadContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/thread-context/)
  * [TranslationContext](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
  */
-const MessageListWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageListPropsWithContext<StreamChatGenerics>,
-) => {
+const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const LoadingMoreRecentIndicator = props.threadList
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
@@ -339,10 +318,11 @@ const MessageListWithContext = <
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { processedMessageList, rawMessageList } = useMessageList<StreamChatGenerics>({
-    noGroupByUser,
-    threadList,
-  });
+  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
+    useMessageList({
+      noGroupByUser,
+      threadList,
+    });
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
 
@@ -350,11 +330,9 @@ const MessageListWithContext = <
    * We need topMessage and channelLastRead values to set the initial scroll position.
    * So these values only get used if `initialScrollToFirstUnreadMessage` prop is true.
    */
-  const topMessageBeforeUpdate = useRef<FormatMessageResponse<StreamChatGenerics>>(undefined);
-  const latestNonCurrentMessageBeforeUpdateRef =
-    useRef<FormatMessageResponse<StreamChatGenerics>>(undefined);
-  const topMessageAfterUpdate: FormatMessageResponse<StreamChatGenerics> | undefined =
-    rawMessageList[0];
+  const topMessageBeforeUpdate = useRef<LocalMessage>(undefined);
+  const latestNonCurrentMessageBeforeUpdateRef = useRef<LocalMessage>(undefined);
+  const topMessageAfterUpdate: LocalMessage | undefined = rawMessageList[0];
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
@@ -381,7 +359,7 @@ const MessageListWithContext = <
   const onStartReachedInPromise = useRef<Promise<void> | null>(null);
   const onEndReachedInPromise = useRef<Promise<void> | null>(null);
 
-  const flatListRef = useRef<FlatListType<MessageType<StreamChatGenerics>> | null>(null);
+  const flatListRef = useRef<FlatListType<LocalMessage> | null>(null);
 
   const channelResyncScrollSet = useRef<boolean>(true);
 
@@ -515,7 +493,7 @@ const MessageListWithContext = <
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
-  const stableOnViwableItemsChanged = useCallback(
+  const stableOnViewableItemsChanged = useCallback(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
@@ -549,16 +527,13 @@ const MessageListWithContext = <
       );
     };
 
-    const handleEvent = async (event: Event<StreamChatGenerics>) => {
+    const handleEvent = async (event: Event) => {
       const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
       // When the scrollToBottomButtonVisible is true, we need to manually update the channelUnreadState.
       if (scrollToBottomButtonVisible || channelUnreadState?.first_unread_message_id) {
         setChannelUnreadState((prev) => {
           const previousUnreadCount = prev?.unread_messages ?? 0;
-          const previousLastMessage = getPreviousLastMessage<StreamChatGenerics>(
-            channel.state.messages,
-            event.message,
-          );
+          const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
           return {
             ...(prev || {}),
             last_read:
@@ -757,7 +732,7 @@ const MessageListWithContext = <
   const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';
 
   const renderItem = useCallback(
-    ({ index, item: message }: { index: number; item: MessageType<StreamChatGenerics> }) => {
+    ({ index, item: message }: { index: number; item: LocalMessage }) => {
       if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
         return null;
       }
@@ -778,14 +753,14 @@ const MessageListWithContext = <
       const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
       const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
-      const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
-        message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
+      const renderDateSeperator = dateSeparatorsRef.current[message.id] && (
+        <InlineDateSeparator date={dateSeparatorsRef.current[message.id]} />
+      );
+
       const renderMessage = (
         <Message
           goToMessage={goToMessage}
-          groupStyles={
-            isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
-          }
+          groupStyles={messageGroupStylesRef.current[message.id] ?? []}
           isTargetedMessage={highlightedMessageId === message.id}
           lastReceivedId={
             lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
@@ -836,10 +811,12 @@ const MessageListWithContext = <
       channelUnreadState?.last_read_message_id,
       channelUnreadState?.unread_messages,
       client.userID,
+      dateSeparatorsRef,
       goToMessage,
       highlightedMessageId,
       lastReceivedId,
       messageContainer,
+      messageGroupStylesRef,
       modifiedTheme,
       myMessageTheme,
       onThreadSelect,
@@ -1020,49 +997,49 @@ const MessageListWithContext = <
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const onScrollToIndexFailedRef = useRef<
-    FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
-  >((info) => {
-    // We got a failure as we tried to scroll to an item that was outside the render length
-    if (!flatListRef.current) {
-      return;
-    }
-    // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
-    // since we used only an average offset... we won't go to the center of the item yet
-    // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
-    failScrollTimeoutId.current = setTimeout(() => {
-      try {
-        flatListRef.current?.scrollToIndex({
-          animated: true,
-          index: info.index,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        if (messageIdLastScrolledToRef.current) {
-          // in case the target message was cleared out
-          // the state being set again will trigger the highlight again
-          setTargetedMessage(messageIdLastScrolledToRef.current);
-        }
-        scrollToIndexFailedRetryCountRef.current = 0;
-      } catch (e) {
-        if (
-          !onScrollToIndexFailedRef.current ||
-          scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
-        ) {
+  const onScrollToIndexFailedRef = useRef<FlatListProps<LocalMessage>['onScrollToIndexFailed']>(
+    (info) => {
+      // We got a failure as we tried to scroll to an item that was outside the render length
+      if (!flatListRef.current) {
+        return;
+      }
+      // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
+      // since we used only an average offset... we won't go to the center of the item yet
+      // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+      failScrollTimeoutId.current = setTimeout(() => {
+        try {
+          flatListRef.current?.scrollToIndex({
+            animated: true,
+            index: info.index,
+            viewPosition: 0.5, // try to place message in the center of the screen
+          });
+          if (messageIdLastScrolledToRef.current) {
+            // in case the target message was cleared out
+            // the state being set again will trigger the highlight again
+            setTargetedMessage(messageIdLastScrolledToRef.current);
+          }
           scrollToIndexFailedRetryCountRef.current = 0;
-          return;
+        } catch (e) {
+          if (
+            !onScrollToIndexFailedRef.current ||
+            scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
+          ) {
+            scrollToIndexFailedRetryCountRef.current = 0;
+            return;
+          }
+          // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
+          // Scrolling to an index not in range of the Flatlist's data will result in a crash that
+          // won't call onScrollToIndexFailed.
+          // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
+          scrollToIndexFailedRetryCountRef.current += 1;
+          onScrollToIndexFailedRef.current(info);
         }
-        // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
-        // Scrolling to an index not in range of the Flatlist's data will result in a crash that
-        // won't call onScrollToIndexFailed.
-        // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
-        scrollToIndexFailedRetryCountRef.current += 1;
-        onScrollToIndexFailedRef.current(info);
-      }
-    }, WAIT_FOR_SCROLL_TIMEOUT);
+      }, WAIT_FOR_SCROLL_TIMEOUT);
 
-    // Only when index is greater than 0 and in range of items in FlatList
-    // this onScrollToIndexFailed will be called again
-  });
+      // Only when index is greater than 0 and in range of items in FlatList
+      // this onScrollToIndexFailed will be called again
+    },
+  );
 
   const messagesWithImages =
     legacyImageViewerSwipeBehaviour &&
@@ -1105,7 +1082,7 @@ const MessageListWithContext = <
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
+      setMessages(messagesWithImages as LocalMessage[]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -1134,7 +1111,7 @@ const MessageListWithContext = <
     onUserScrollEvent(event);
   });
 
-  const refCallback = useStableCallback((ref: FlatListType<MessageType<StreamChatGenerics>>) => {
+  const refCallback = useStableCallback((ref: FlatListType<LocalMessage>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
@@ -1273,7 +1250,7 @@ const MessageListWithContext = <
           onScrollEndDrag={onScrollEndDrag}
           onScrollToIndexFailed={onScrollToIndexFailedRef.current}
           onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViwableItemsChanged}
+          onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
           scrollEnabled={overlay === 'none'}
@@ -1307,15 +1284,9 @@ const MessageListWithContext = <
   );
 };
 
-export type MessageListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<MessageListPropsWithContext<StreamChatGenerics>>;
+export type MessageListProps = Partial<MessageListPropsWithContext>;
 
-export const MessageList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageListProps<StreamChatGenerics>,
-) => {
+export const MessageList = (props: MessageListProps) => {
   const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
   const {
     channel,
@@ -1339,9 +1310,9 @@ export const MessageList = <
     StickyHeader,
     targetedMessage,
     threadList,
-  } = useChannelContext<StreamChatGenerics>();
-  const { client } = useChatContext<StreamChatGenerics>();
-  const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
+  } = useChannelContext();
+  const { client } = useChatContext();
+  const { setMessages } = useImageGalleryContext();
   const {
     DateHeader,
     disableTypingIndicator,
@@ -1357,11 +1328,10 @@ export const MessageList = <
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
-  } = useMessagesContext<StreamChatGenerics>();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
+  } = useMessagesContext();
+  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { overlay } = useOverlayContext();
-  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
-    useThreadContext<StreamChatGenerics>();
+  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
 
   return (
     <MessageListWithContext

package/src/components/MessageList/MessageSystem.tsx

@@ -1,19 +1,16 @@
 import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import type { MessageType } from './hooks/useMessageList';
+import { LocalMessage } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getDateString } from '../../utils/i18n/getDateString';
 
-export type MessageSystemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
+export type MessageSystemProps = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
-  message: MessageType<StreamChatGenerics>;
+  message: LocalMessage;
   /**
    * Additional styles for the system message container.
    */
@@ -28,11 +25,7 @@ export type MessageSystemProps<
  * they can attach a message with that update. That message will be available
  * in message list as (type) system message.
  */
-export const MessageSystem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageSystemProps<StreamChatGenerics>,
-) => {
+export const MessageSystem = (props: MessageSystemProps) => {
   const { message, style } = props;
 
   const {

package/src/components/MessageList/StickyHeader.tsx

@@ -3,15 +3,12 @@ import React, { useMemo } from 'react';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { DefaultStreamChatGenerics } from '../../types/types';
 import { getDateString } from '../../utils/i18n/getDateString';
 
 /**
  * Props for the StickyHeader component.
  */
-export type StickyHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<MessagesContextValue<StreamChatGenerics>, 'DateHeader'> & {
+export type StickyHeaderProps = Pick<MessagesContextValue, 'DateHeader'> & {
   /**
    * Date to be displayed in the sticky header.
    */

package/src/components/MessageList/TypingIndicator.tsx

@@ -5,7 +5,6 @@ import { useTypingString } from './hooks/useTypingString';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { LoadingDots } from '../Indicators/LoadingDots';
 
 const styles = StyleSheet.create({
@@ -23,16 +22,14 @@ const styles = StyleSheet.create({
   },
 });
 
-export const TypingIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => {
+export const TypingIndicator = () => {
   const {
     theme: {
       colors: { grey, white_snow },
       typingIndicator: { container, text },
     },
   } = useTheme();
-  const typingString = useTypingString<StreamChatGenerics>();
+  const typingString = useTypingString();
 
   return (
     <View

package/src/components/MessageList/TypingIndicatorContainer.tsx

@@ -8,8 +8,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import { TypingContextValue, useTypingContext } from '../../contexts/typingContext/TypingContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
 const styles = StyleSheet.create({
   container: {
     bottom: 0,
@@ -18,16 +16,12 @@ const styles = StyleSheet.create({
   },
 });
 
-type TypingIndicatorContainerPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<TypingContextValue<StreamChatGenerics>, 'typing'> &
-  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
+type TypingIndicatorContainerPropsWithContext = Pick<TypingContextValue, 'typing'> &
+  Pick<ChatContextValue, 'client'> &
+  Pick<ThreadContextValue, 'thread'>;
 
-const TypingIndicatorContainerWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: PropsWithChildren<TypingIndicatorContainerPropsWithContext<StreamChatGenerics>>,
+const TypingIndicatorContainerWithContext = (
+  props: PropsWithChildren<TypingIndicatorContainerPropsWithContext>,
 ) => {
   const { children, client, thread, typing } = props;
 
@@ -49,18 +43,14 @@ const TypingIndicatorContainerWithContext = <
   );
 };
 
-export type TypingIndicatorContainerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = PropsWithChildren<Partial<TypingIndicatorContainerPropsWithContext<StreamChatGenerics>>>;
+export type TypingIndicatorContainerProps = PropsWithChildren<
+  Partial<TypingIndicatorContainerPropsWithContext>
+>;
 
-export const TypingIndicatorContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: TypingIndicatorContainerProps<StreamChatGenerics>,
-) => {
-  const { typing } = useTypingContext<StreamChatGenerics>();
-  const { client } = useChatContext<StreamChatGenerics>();
-  const { thread } = useThreadContext<StreamChatGenerics>();
+export const TypingIndicatorContainer = (props: TypingIndicatorContainerProps) => {
+  const { typing } = useTypingContext();
+  const { client } = useChatContext();
+  const { thread } = useThreadContext();
 
   return <TypingIndicatorContainerWithContext {...{ client, thread, typing }} {...props} />;
 };

package/src/components/MessageList/__tests__/useMessageList.test.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { renderHook } from '@testing-library/react-native';
 
-import type { DefaultGenerics, StreamChat } from 'stream-chat';
+import type { StreamChat } from 'stream-chat';
 
 import { useCreatePaginatedMessageListContext } from '../../../components/Channel/hooks/useCreatePaginatedMessageListContext';
 import {
@@ -15,11 +15,11 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 import { useMessageList } from '../hooks/useMessageList';
 
 const clientUser = generateUser();
-let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+let chatClient: StreamChat;
 
 beforeEach(async () => {
   chatClient = await getTestClientWithUser(clientUser);