@sendbird/uikit-react-native 3.1.1 → 3.2.0

package/src/containers/SendbirdUIKitContainer.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import Sendbird, { DeviceOsPlatform, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
+import SendbirdChat, { DeviceOsPlatform, SendbirdChatParams, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -37,6 +37,7 @@ import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
+import VoiceMessageConfig, { VoiceMessageConfigInterface } from '../libs/VoiceMessageConfig';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -45,13 +46,14 @@ import type {
   FileServiceInterface,
   MediaServiceInterface,
   NotificationServiceInterface,
+  PlayerServiceInterface,
+  RecorderServiceInterface,
 } from '../platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 import VERSION from '../version';
 import InternalErrorBoundaryContainer from './InternalErrorBoundaryContainer';
 
 const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
-type UnimplementedFeatures = 'enableVoiceMessage' | 'threadReplySelectType' | 'replyType';
 export const SendbirdUIKit = Object.freeze({
   VERSION,
   PLATFORM: Platform.OS.toLowerCase(),
@@ -62,6 +64,27 @@ export const SendbirdUIKit = Object.freeze({
   },
 });
 
+type UnimplementedFeatures = 'threadReplySelectType' | 'replyType';
+export type ChatOmittedInitParams = Omit<
+  SendbirdChatParams<[GroupChannelModule, OpenChannelModule]>,
+  (typeof chatOmitKeys)[number]
+>;
+
+const chatOmitKeys = [
+  'appId',
+  'newInstance',
+  'modules',
+  'debugMode',
+  'appVersion',
+  'localCacheEnabled',
+  'useAsyncStorageStore',
+] as const;
+function sanitizeChatOptions<T extends Record<string, unknown>>(chatOptions: T): T {
+  const opts = { ...chatOptions };
+  chatOmitKeys.forEach((key) => delete opts[key]);
+  return opts;
+}
+
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   appId: string;
   platformServices: {
@@ -69,11 +92,14 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
     media: MediaServiceInterface;
+    player: PlayerServiceInterface;
+    recorder: RecorderServiceInterface;
   };
   chatOptions: {
     localCacheStorage: LocalCacheStorage;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
-  } & Partial<ChatRelatedFeaturesInUIKit>;
+  } & Partial<ChatOmittedInitParams> &
+    Partial<ChatRelatedFeaturesInUIKit>;
   uikitOptions?: PartialDeep<{
     common: SBUConfig['common'];
     groupChannel: Omit<SBUConfig['groupChannel']['channel'], UnimplementedFeatures> & {
@@ -96,7 +122,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   errorBoundary?: {
     disabled?: boolean;
     onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   };
   toast?: {
     dismissTimeout?: number;
@@ -108,24 +134,29 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
       users: SendbirdUser[] | SendbirdMember[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
+  reaction?: {
+    onPressUserProfile?: (user: SendbirdUser | SendbirdMember) => void;
+  };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
   imageCompression?: Partial<ImageCompressionConfigInterface>;
+  voiceMessage?: PartialDeep<VoiceMessageConfigInterface>;
 }>;
 
-const SendbirdUIKitContainer = ({
-  children,
-  appId,
-  chatOptions,
-  uikitOptions,
-  platformServices,
-  localization,
-  styles,
-  errorBoundary,
-  toast,
-  userProfile,
-  userMention,
-  imageCompression,
-}: SendbirdUIKitContainerProps) => {
+const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
+  const {
+    children,
+    appId,
+    chatOptions,
+    uikitOptions,
+    platformServices,
+    localization,
+    styles,
+    errorBoundary,
+    toast,
+    userProfile,
+    reaction,
+  } = props;
+
   if (!chatOptions.localCacheStorage) {
     throw new Error('SendbirdUIKitContainer: chatOptions.localCacheStorage is required');
   }
@@ -137,35 +168,18 @@ const SendbirdUIKitContainer = ({
 
   const [internalStorage] = useState(() => new InternalLocalCacheStorage(chatOptions.localCacheStorage));
   const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
-    const sendbird = initializeSendbird(appId, internalStorage, chatOptions.onInitialized);
+    const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
 
+  const { imageCompressionConfig, voiceMessageConfig, mentionConfig } = useConfigInstance(props);
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
-
-  const mentionManager = useMemo(() => {
-    const config = new MentionConfig({
-      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
-      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
-      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
-      delimiter: MentionConfig.DEFAULT.DELIMITER,
-      trigger: MentionConfig.DEFAULT.TRIGGER,
-    });
-    return new MentionManager(config);
-  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
-
-  const imageCompressionConfig = useMemo(() => {
-    return new ImageCompressionConfig({
-      compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
-      width: imageCompression?.width,
-      height: imageCompression?.height,
-    });
-  }, [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height]);
+  const mentionManager = useMemo(() => new MentionManager(mentionConfig), [mentionConfig]);
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
-      const sendbird = initializeSendbird(appId, internalStorage, chatOptions.onInitialized);
+      const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
       setSdkInstance(sendbird.chatSDK);
       unsubscribes.current = sendbird.unsubscribes;
     }
@@ -208,6 +222,7 @@ const SendbirdUIKitContainer = ({
           emojiManager={emojiManager}
           mentionManager={mentionManager}
           imageCompressionConfig={imageCompressionConfig}
+          voiceMessageConfig={voiceMessageConfig}
           enableAutoPushTokenRegistration={
             chatOptions.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
           }
@@ -222,6 +237,9 @@ const SendbirdUIKitContainer = ({
               notificationService={platformServices.notification}
               clipboardService={platformServices.clipboard}
               mediaService={platformServices.media}
+              playerService={platformServices.player}
+              recorderService={platformServices.recorder}
+              voiceMessageConfig={voiceMessageConfig}
             >
               <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
                 <HeaderStyleProvider
@@ -230,12 +248,8 @@ const SendbirdUIKitContainer = ({
                   statusBarTranslucent={styles?.statusBarTranslucent ?? true}
                 >
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <UserProfileProvider
-                      onCreateChannel={userProfile?.onCreateChannel}
-                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
-                      statusBarTranslucent={styles?.statusBarTranslucent ?? true}
-                    >
-                      <ReactionProvider>
+                    <UserProfileProvider {...userProfile} statusBarTranslucent={styles?.statusBarTranslucent ?? true}>
+                      <ReactionProvider {...reaction}>
                         <LocalizationContext.Consumer>
                           {(value) => {
                             const STRINGS = value?.STRINGS || defaultStringSet;
@@ -268,20 +282,22 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const initializeSendbird = (
-  appId: string,
-  internalStorage?: InternalLocalCacheStorage,
-  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK,
-) => {
-  const unsubscribes: Array<() => void> = [];
+interface InitOptions extends ChatOmittedInitParams {
+  internalStorage: InternalLocalCacheStorage;
+  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK;
+}
+const initializeSendbird = (appId: string, options: InitOptions) => {
   let chatSDK: SendbirdChatSDK;
+  const unsubscribes: Array<() => void> = [];
+  const { internalStorage, onInitialized, ...chatInitParams } = options;
 
-  chatSDK = Sendbird.init({
+  chatSDK = SendbirdChat.init({
+    ...chatInitParams,
     appId,
+    newInstance: true,
     modules: [new GroupChannelModule(), new OpenChannelModule()],
-    localCacheEnabled: Boolean(internalStorage),
+    localCacheEnabled: true,
     useAsyncStorageStore: internalStorage as never,
-    newInstance: true,
   });
 
   if (onInitialized) {
@@ -361,4 +377,39 @@ function getReactNativeVersion() {
   return `${major}.${minor}.${patch}`;
 }
 
+const useConfigInstance = ({ imageCompression, userMention, voiceMessage }: SendbirdUIKitContainerProps) => {
+  const mentionConfig = useMemo(() => {
+    return new MentionConfig({
+      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
+      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
+      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
+      delimiter: MentionConfig.DEFAULT.DELIMITER,
+      trigger: MentionConfig.DEFAULT.TRIGGER,
+    });
+  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
+
+  const imageCompressionConfig = useMemo(() => {
+    return new ImageCompressionConfig({
+      compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
+      width: imageCompression?.width,
+      height: imageCompression?.height,
+    });
+  }, [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height]);
+
+  const voiceMessageConfig = useMemo(() => {
+    return new VoiceMessageConfig({
+      recorder: {
+        minDuration: voiceMessage?.recorder?.minDuration ?? VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,
+        maxDuration: voiceMessage?.recorder?.maxDuration ?? VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,
+      },
+    });
+  }, [voiceMessage?.recorder?.minDuration, voiceMessage?.recorder?.maxDuration]);
+
+  return {
+    mentionConfig,
+    imageCompressionConfig,
+    voiceMessageConfig,
+  };
+};
+
 export default SendbirdUIKitContainer;

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/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 });
       }
     },
   });
@@ -102,24 +88,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}