@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/src/contexts/PlatformServiceCtx.tsx

@@ -1,37 +1,39 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
+import { useAppState } from '@sendbird/uikit-utils';
+
+import VoiceMessageConfig from '../libs/VoiceMessageConfig';
 import type {
   ClipboardServiceInterface,
   FileServiceInterface,
   MediaServiceInterface,
   NotificationServiceInterface,
+  PlayerServiceInterface,
+  RecorderServiceInterface,
 } from '../platform/types';
 
-type Props = React.PropsWithChildren<{
-  fileService: FileServiceInterface;
-  clipboardService: ClipboardServiceInterface;
-  notificationService: NotificationServiceInterface;
-  mediaService: MediaServiceInterface;
-}>;
-
 export type PlatformServiceContextType = {
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
   mediaService: MediaServiceInterface;
+  recorderService: RecorderServiceInterface;
+  playerService: PlayerServiceInterface;
 };
+type Props = React.PropsWithChildren<PlatformServiceContextType & { voiceMessageConfig: VoiceMessageConfig }>;
 
 export const PlatformServiceContext = React.createContext<PlatformServiceContextType | null>(null);
-export const PlatformServiceProvider = ({
-  children,
-  fileService,
-  clipboardService,
-  notificationService,
-  mediaService,
-}: Props) => {
-  return (
-    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService, mediaService }}>
-      {children}
-    </PlatformServiceContext.Provider>
-  );
+export const PlatformServiceProvider = ({ children, voiceMessageConfig, ...services }: Props) => {
+  useEffect(() => {
+    services.recorderService.options.minDuration = voiceMessageConfig.recorder.minDuration;
+    services.recorderService.options.maxDuration = voiceMessageConfig.recorder.maxDuration;
+  }, [voiceMessageConfig]);
+
+  useAppState('change', (state) => {
+    if (state !== 'active') {
+      Promise.allSettled([services.playerService.reset(), services.recorderService.reset()]);
+    }
+  });
+
+  return <PlatformServiceContext.Provider value={services}>{children}</PlatformServiceContext.Provider>;
 };

package/src/contexts/ReactionCtx.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useReducer, useRef, useState } from 're
 import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 import { NOOP } from '@sendbird/uikit-utils';
 
-import { ReactionBottomSheets } from '../components/ReactionBottomSheets';
+import { ReactionBottomSheetProps, ReactionBottomSheets } from '../components/ReactionBottomSheets';
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { UserProfileContext } from '../contexts/UserProfileCtx';
@@ -19,10 +19,12 @@ export type ReactionContextType = {
   focusIndex: number;
 } & State;
 
-type Props = React.PropsWithChildren<{}>;
+type Props = React.PropsWithChildren<{
+  onPressUserProfile?: ReactionBottomSheetProps['onPressUserProfile'];
+}>;
 
 export const ReactionContext = React.createContext<ReactionContextType | null>(null);
-export const ReactionProvider = ({ children }: Props) => {
+export const ReactionProvider = ({ children, onPressUserProfile }: Props) => {
   const chatCtx = useContext(SendbirdChatContext);
   const localizationCtx = useContext(LocalizationContext);
   const userProfileCtx = useContext(UserProfileContext);
@@ -73,11 +75,11 @@ export const ReactionProvider = ({ children }: Props) => {
     focusIndex: reactionUserListFocusIndex,
   };
 
-  const sheetProps = {
+  const sheetProps: Omit<ReactionBottomSheetProps, 'visible' | 'onClose'> = {
     chatCtx,
     reactionCtx,
     localizationCtx,
-    userProfileCtx,
+    onPressUserProfile: onPressUserProfile ?? userProfileCtx.show,
     onDismiss: () => {
       setState({});
       closeResolver.current?.();

package/src/contexts/SendbirdChatCtx.tsx

@@ -13,6 +13,7 @@ import { confirmAndMarkAsDelivered, useAppState, useForceUpdate } from '@sendbir
 import type EmojiManager from '../libs/EmojiManager';
 import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import type MentionManager from '../libs/MentionManager';
+import type VoiceMessageConfig from '../libs/VoiceMessageConfig';
 import type { FileType } from '../platform/types';
 
 export interface ChatRelatedFeaturesInUIKit {
@@ -23,18 +24,23 @@ export interface ChatRelatedFeaturesInUIKit {
 
 interface Props extends ChatRelatedFeaturesInUIKit, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
+
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
   imageCompressionConfig: ImageCompressionConfig;
+  voiceMessageConfig: VoiceMessageConfig;
 }
 
 export type SendbirdChatContextType = {
   sdk: SendbirdChatSDK;
+  currentUser?: SendbirdUser;
+  setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
+
+  // feature related instances
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
   imageCompressionConfig: ImageCompressionConfig;
-  currentUser?: SendbirdUser;
-  setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
+  voiceMessageConfig: VoiceMessageConfig;
 
   // helper functions
   updateCurrentUserInfo: (nickname?: string, profile?: string | FileType) => Promise<SendbirdUser>;
@@ -84,6 +90,7 @@ export const SendbirdChatProvider = ({
   emojiManager,
   mentionManager,
   imageCompressionConfig,
+  voiceMessageConfig,
   enableAutoPushTokenRegistration,
   enableUseUserIdForNickname,
   enableImageCompression,
@@ -155,6 +162,7 @@ export const SendbirdChatProvider = ({
     emojiManager,
     mentionManager,
     imageCompressionConfig,
+    voiceMessageConfig,
     currentUser,
     setCurrentUser,
 

package/src/domain/groupChannel/component/GroupChannelHeader.tsx

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import { Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
 
 import ChannelCover from '../../../components/ChannelCover';
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { TypingIndicatorType } from '../../../types';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -13,11 +14,21 @@ const GroupChannelHeader = ({
   onPressHeaderLeft,
   onPressHeaderRight,
 }: GroupChannelProps['Header']) => {
+  const { sbOptions } = useSendbirdChat();
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();
   const { HeaderComponent } = useHeaderStyle();
-  const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+  const renderSubtitle = () => {
+    const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+    if (!subtitle) return null;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return null;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Text)) return null;
+
+    return <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>;
+  };
 
   const isHidden = shouldHideRight();
 
@@ -29,7 +40,7 @@ const GroupChannelHeader = ({
           <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
           <View style={{ flexShrink: 1 }}>
             <Header.Title h2>{headerTitle}</Header.Title>
-            {Boolean(subtitle) && subtitle && <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>}
+            {renderSubtitle()}
           </View>
         </View>
       }

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -1,5 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react';
-import type { FlatList } from 'react-native';
+import React, { useContext, useEffect } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
@@ -18,45 +17,32 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const { sdk } = useSendbirdChat();
   const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const { subscribe } = useContext(GroupChannelContexts.PubSub);
+  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelContexts.MessageList);
 
   const id = useUniqHandlerId('GroupChannelMessageList');
-  const ref = useRef<FlatList<SendbirdMessage>>(null);
   const isFirstMount = useIsFirstMount();
 
-  // FIXME: Workaround, should run after data has been applied to UI.
-  const lazyScrollToBottom = (animated = false, timeout = 0) => {
-    setTimeout(() => {
-      ref.current?.scrollToOffset({ offset: 0, animated });
-    }, timeout);
-  };
+  const scrollToMessageWithCreatedAt = useFreshCallback(
+    (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
+      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
+      const isIncludedInList = foundMessageIndex > -1;
 
-  // FIXME: Workaround, should run after data has been applied to UI.
-  const lazyScrollToIndex = (index = 0, animated = false, timeout = 0) => {
-    setTimeout(() => {
-      ref.current?.scrollToIndex({ index, animated, viewPosition: 0.5 });
-    }, timeout);
-  };
-
-  const scrollToMessage = useFreshCallback((createdAt: number, focusAnimated = false): boolean => {
-    const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
-    const isIncludedInList = foundMessageIndex > -1;
-
-    if (isIncludedInList) {
-      if (focusAnimated) {
-        setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
-      }
-      lazyScrollToIndex(foundMessageIndex, true, isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
-    } else {
-      if (props.channel.messageOffsetTimestamp <= createdAt) {
-        if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
-        props.onResetMessageListWithStartingPoint(createdAt);
+      if (isIncludedInList) {
+        if (focusAnimated) {
+          setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
+        }
+        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout });
       } else {
-        return false;
+        if (props.channel.messageOffsetTimestamp <= createdAt) {
+          if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
+          props.onResetMessageListWithStartingPoint(createdAt);
+        } else {
+          return false;
+        }
       }
-    }
-
-    return true;
-  });
+      return true;
+    },
+  );
 
   const scrollToBottom = useFreshCallback((animated = false) => {
     if (props.hasNext()) {
@@ -65,10 +51,10 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
 
       props.onResetMessageList(() => {
         props.onScrolledAwayFromBottom(false);
-        lazyScrollToBottom(animated);
+        lazyScrollToBottom({ animated });
       });
     } else {
-      lazyScrollToBottom(animated);
+      lazyScrollToBottom({ animated });
     }
   });
 
@@ -79,7 +65,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
       const isRecentMessage = recentMessage && recentMessage.messageId === event.messageId;
       const scrollReachedBottomAndCanScroll = !props.scrolledAwayFromBottom && !props.hasNext();
       if (isRecentMessage && scrollReachedBottomAndCanScroll) {
-        lazyScrollToBottom(true, 250);
+        lazyScrollToBottom({ animated: true, timeout: 250 });
       }
     },
   });
@@ -87,6 +73,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   useEffect(() => {
     return subscribe(({ type }) => {
       switch (type) {
+        case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
           if (!props.scrolledAwayFromBottom) {
             scrollToBottom(true);
@@ -102,24 +89,24 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     });
   }, [props.scrolledAwayFromBottom]);
 
-  // Only trigger once when message list mount with initial props.searchItem
-  // - Search screen + searchItem > mount message list
-  // - Reset message list + searchItem > re-mount message list
   useEffect(() => {
+    // Only trigger once when message list mount with initial props.searchItem
+    // - Search screen + searchItem > mount message list
+    // - Reset message list + searchItem > re-mount message list
     if (isFirstMount && props.searchItem) {
-      scrollToMessage(props.searchItem.startingPoint);
+      scrollToMessageWithCreatedAt(props.searchItem.startingPoint, false, MESSAGE_SEARCH_SAFE_SCROLL_DELAY);
     }
   }, [isFirstMount]);
 
   const onPressParentMessage = useFreshCallback((message: SendbirdMessage) => {
-    const canScrollToParent = scrollToMessage(message.createdAt, true);
+    const canScrollToParent = scrollToMessageWithCreatedAt(message.createdAt, true, 0);
     if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
   });
 
   return (
     <ChannelMessageList
       {...props}
-      ref={ref}
+      ref={flatListRef}
       onReplyMessage={setMessageToReply}
       onEditMessage={setMessageToEdit}
       onPressParentMessage={onPressParentMessage}

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -1,20 +1,28 @@
-import React, { createContext, useCallback, useState } from 'react';
+import React, { createContext, useCallback, useRef, useState } from 'react';
+import type { FlatList } from 'react-native';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import {
+  ContextValue,
+  Logger,
   NOOP,
   SendbirdFileMessage,
   SendbirdGroupChannel,
+  SendbirdMessage,
   SendbirdUser,
   SendbirdUserMessage,
+  getGroupChannelChatAvailableState,
   isDifferentChannel,
+  useFreshCallback,
   useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
+import { MESSAGE_FOCUS_ANIMATION_DELAY } from '../../../constants';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { PubSub } from '../../../utils/pubsub';
 import type { GroupChannelContextsType, GroupChannelModule, GroupChannelPubSubContextPayload } from '../types';
+import { GroupChannelProps } from '../types';
 
 export const GroupChannelContexts: GroupChannelContextsType = {
   Fragment: createContext({
@@ -30,6 +38,16 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     publish: NOOP,
     subscribe: () => NOOP,
   } as PubSub<GroupChannelPubSubContextPayload>),
+  MessageList: createContext({
+    flatListRef: { current: null },
+    scrollToMessage: () => false,
+    lazyScrollToBottom: () => {
+      // noop
+    },
+    lazyScrollToIndex: () => {
+      // noop
+    },
+  } as MessageListContextValue),
 };
 
 export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
@@ -38,6 +56,8 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   enableTypingIndicator,
   keyboardAvoidOffset = 0,
   groupChannelPubSub,
+  messages,
+  onUpdateSearchItem,
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
@@ -49,6 +69,11 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
   const [messageToReply, setMessageToReply] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
+  const { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage } = useScrollActions({
+    messages,
+    onUpdateSearchItem,
+  });
+
   const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
     if (mode === 'send' || !message) {
       setMessageToEdit(undefined);
@@ -73,7 +98,9 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
     },
     onChannelFrozen(frozenChannel) {
       if (frozenChannel.url === channel.url) {
-        setMessageToReply(undefined);
+        if (frozenChannel.isGroupChannel() && getGroupChannelChatAvailableState(channel).frozen) {
+          setMessageToReply(undefined);
+        }
       }
     },
     onUserMuted(mutedChannel, user) {
@@ -101,12 +128,97 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
           setMessageToReply: useCallback((message) => updateInputMode('reply', message), []),
         }}
       >
-        <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
-          <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
-            {children}
-          </GroupChannelContexts.PubSub.Provider>
-        </GroupChannelContexts.TypingIndicator.Provider>
+        <GroupChannelContexts.PubSub.Provider value={groupChannelPubSub}>
+          <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
+            <GroupChannelContexts.MessageList.Provider
+              value={{
+                flatListRef,
+                scrollToMessage,
+                lazyScrollToIndex,
+                lazyScrollToBottom,
+              }}
+            >
+              {children}
+            </GroupChannelContexts.MessageList.Provider>
+          </GroupChannelContexts.TypingIndicator.Provider>
+        </GroupChannelContexts.PubSub.Provider>
       </GroupChannelContexts.Fragment.Provider>
     </ProviderLayout>
   );
 };
+
+type MessageListContextValue = ContextValue<GroupChannelContextsType['MessageList']>;
+const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages' | 'onUpdateSearchItem'>) => {
+  const { messages, onUpdateSearchItem } = params;
+  const flatListRef = useRef<FlatList<SendbirdMessage>>(null);
+
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: params?.animated ?? false });
+    }, params?.timeout ?? 0);
+  });
+
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToIndex = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      flatListRef.current?.scrollToIndex({
+        index: params?.index ?? 0,
+        animated: params?.animated ?? false,
+        viewPosition: params?.viewPosition ?? 0.5,
+      });
+    }, params?.timeout ?? 0);
+  });
+
+  const scrollToMessage = useFreshCallback<MessageListContextValue['scrollToMessage']>((messageId, options) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return false;
+    }
+
+    const foundMessageIndex = messages.findIndex((it) => it.messageId === messageId);
+    const isIncludedInList = foundMessageIndex > -1;
+
+    if (isIncludedInList) {
+      if (options?.focusAnimated) {
+        setTimeout(
+          () => onUpdateSearchItem({ startingPoint: messages[foundMessageIndex].createdAt }),
+          MESSAGE_FOCUS_ANIMATION_DELAY,
+        );
+      }
+      lazyScrollToIndex({
+        index: foundMessageIndex,
+        animated: true,
+        timeout: 0,
+        viewPosition: options?.viewPosition,
+      });
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  return {
+    flatListRef,
+    lazyScrollToIndex,
+    lazyScrollToBottom,
+    scrollToMessage,
+  };
+};
+
+const logFlatListRefWarning = () => {
+  Logger.warn(
+    'Cannot find flatListRef.current, please render FlatList and pass the flatListRef' +
+      'or please try again after FlatList has been rendered.',
+  );
+};

package/src/domain/groupChannel/types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { FlatList } from 'react-native';
 
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -95,6 +96,10 @@ export interface GroupChannelProps {
     enableTypingIndicator: boolean;
     keyboardAvoidOffset?: number;
     groupChannelPubSub: PubSub<GroupChannelPubSubContextPayload>;
+
+    messages: SendbirdMessage[];
+    // Changing the search item will trigger the focus animation on messages.
+    onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
   };
 }
 
@@ -117,6 +122,42 @@ export interface GroupChannelContextsType {
     typingUsers: SendbirdUser[];
   }>;
   PubSub: React.Context<PubSub<GroupChannelPubSubContextPayload>>;
+  MessageList: React.Context<{
+    /**
+     * ref object for FlatList of MessageList
+     * */
+    flatListRef: React.MutableRefObject<FlatList | null>;
+    /**
+     * Function that scrolls to a message within a group channel.
+     * @param messageId {number} - The id of the message to scroll.
+     * @param options {object} - Scroll options (optional).
+     * @param options.focusAnimated {boolean} - Enable a shake animation on the message component upon completion of scrolling.
+     * @param options.viewPosition {number} - Position information to adjust the visible area during scrolling. bottom(0) ~ top(1.0)
+     *
+     * @example
+     * ```
+     *   const { scrollToMessage } = useContext(GroupChannelContexts.MessageList);
+     *   const messageIncludedInMessageList = scrollToMessage(lastMessage.messageId, { focusAnimated: true, viewPosition: 1 });
+     *   if (!messageIncludedInMessageList) console.warn('Message not found in the message list.');
+     * ```
+     * */
+    scrollToMessage: (messageId: number, options?: { focusAnimated?: boolean; viewPosition?: number }) => boolean;
+    /**
+     * Call the FlatList function asynchronously to scroll to bottom lazily
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToBottom: (params?: { animated?: boolean; timeout?: number }) => void;
+    /**
+     * Call the FlatList function asynchronously to scroll to index lazily.
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToIndex: (params?: {
+      index?: number;
+      animated?: boolean;
+      timeout?: number;
+      viewPosition?: number;
+    }) => void;
+  }>;
 }
 export interface GroupChannelModule {
   Provider: CommonComponent<GroupChannelProps['Provider']>;
@@ -142,4 +183,8 @@ export type GroupChannelPubSubContextPayload =
       data: {
         messages: SendbirdMessage[];
       };
+    }
+  | {
+      type: 'TYPING_BUBBLE_RENDERED';
+      data?: undefined;
     };

package/src/domain/userList/types.ts

@@ -7,8 +7,8 @@ import type { CommonComponent } from '../../types';
 export interface UserListProps<User> {
   /** Props for `UserListModule.Header` **/
   Header: {
-    right?: React.ReactElement;
-    left?: React.ReactElement;
+    right?: React.ReactNode;
+    left?: React.ReactNode;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (selectedUsers: User[]) => Promise<void>;
     shouldActivateHeaderRight?: (selectedUsers: User[]) => boolean;