@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/src/domain/groupChannelNotifications/types.ts

@@ -0,0 +1,38 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelNotificationsProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelNotificationsProps['Header']['onPressHeaderLeft'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  View: {};
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelNotifications
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelNotificationsContextsType = {
+  Fragment: React.Context<{
+    channel: SendbirdGroupChannel;
+    headerTitle: string;
+  }>;
+};
+export interface GroupChannelNotificationsModule {
+  Provider: CommonComponent<GroupChannelNotificationsProps['Provider']>;
+  Header: CommonComponent<GroupChannelNotificationsProps['Header']>;
+  View: CommonComponent<GroupChannelNotificationsProps['View']>;
+}
+
+export type GroupChannelNotificationsFragment = CommonComponent<GroupChannelNotificationsProps['Fragment']>;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsList.tsx

@@ -3,7 +3,7 @@ import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { SendbirdUser } from '@sendbird/uikit-utils';
-import { useFreshCallback } from '@sendbird/uikit-utils';
+import { getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 import type { GroupChannelOperatorsProps } from '../types';
 
@@ -22,6 +22,7 @@ const GroupChannelOperatorsList = ({
       contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
+      keyExtractor={getUserUniqId}
     />
   );
 };

package/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.tsx

@@ -4,22 +4,31 @@ import { View } from 'react-native';
 import { PushTriggerOption } from '@sendbird/chat';
 import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
 import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Logger, conditionChaining, useIIFE } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
+let WARN_onPressMenuNotification = false;
+
 const GroupChannelSettingsMenu = ({
   onPressMenuModeration,
   onPressMenuMembers,
   onPressMenuLeaveChannel,
+  onPressMenuNotification,
   menuItemsCreator = (menu) => menu,
 }: GroupChannelSettingsProps['Menu']) => {
-  const { sdk } = useSendbirdChat();
+  const { sdk, features } = useSendbirdChat();
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
+  if (__DEV__ && !WARN_onPressMenuNotification && !onPressMenuNotification) {
+    Logger.warn('You should pass `onPressMenuNotification` prop if using mention');
+    WARN_onPressMenuNotification = true;
+  }
+
   const toggleNotification = async () => {
     if (channel.myPushTriggerOption === 'off') {
       await channel.setMyPushTriggerOption(PushTriggerOption.DEFAULT);
@@ -28,6 +37,35 @@ const GroupChannelSettingsMenu = ({
     }
   };
 
+  const { onPressNotificationMenu, actionLabelNotificationMenu, actionItemNotificationMenu } = useIIFE(() => {
+    const getNotificationsLabel = () => {
+      switch (channel.myPushTriggerOption) {
+        case PushTriggerOption.ALL:
+        case PushTriggerOption.DEFAULT:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_ON;
+        case PushTriggerOption.OFF:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_OFF;
+        case PushTriggerOption.MENTION_ONLY:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_MENTION_ONLY;
+      }
+    };
+
+    return {
+      actionLabelNotificationMenu: getNotificationsLabel(),
+      actionItemNotificationMenu: conditionChaining(
+        [features.userMentionEnabled],
+        [
+          <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+          <Switch value={channel.myPushTriggerOption !== 'off'} onChangeValue={toggleNotification} />,
+        ],
+      ),
+      onPressNotificationMenu: () => {
+        if (features.userMentionEnabled) onPressMenuNotification?.();
+        else toggleNotification();
+      },
+    };
+  });
+
   const menuItems: MenuBarProps[] = menuItemsCreator([
     {
       icon: 'moderation',
@@ -39,8 +77,9 @@ const GroupChannelSettingsMenu = ({
     {
       icon: 'notifications',
       name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION,
-      onPress: toggleNotification,
-      actionItem: <Switch value={channel.myPushTriggerOption !== 'off'} onChangeValue={toggleNotification} />,
+      onPress: onPressNotificationMenu,
+      actionLabel: actionLabelNotificationMenu,
+      actionItem: actionItemNotificationMenu,
     },
     {
       icon: 'members',

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

@@ -1,6 +1,6 @@
 import React, { createContext, useCallback } from 'react';
 
-import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
 import {
   NOOP,
@@ -36,11 +36,8 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
   const { fileService } = usePlatformService();
   const { alert } = useAlert();
 
-  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
-
-  const onChannelChanged = (channel: SendbirdBaseChannel) => {
-    if (isDifferentChannel(channel, activeChannel) || !channel.isGroupChannel()) return;
-    setActiveChannel(channel);
+  const onChannelChanged = (eventChannel: SendbirdBaseChannel) => {
+    if (isDifferentChannel(eventChannel, channel)) return;
     forceUpdate();
   };
 
@@ -48,6 +45,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     onChannelChanged: onChannelChanged,
     onChannelFrozen: onChannelChanged,
     onChannelUnfrozen: onChannelChanged,
+    onUserBanned: onChannelChanged,
   });
 
   const toast = useToast();
@@ -57,11 +55,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
 
   const updateChannel = useCallback(
     async (params: SendbirdGroupChannelUpdateParams) => {
-      const updatedChannel = await activeChannel.updateChannel(params);
-      setActiveChannel(updatedChannel);
+      await channel.updateChannel(params);
       forceUpdate();
     },
-    [activeChannel],
+    [channel],
   );
 
   const changeChannelName = useCallback(() => {
@@ -69,10 +66,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
       title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_TITLE,
       submitLabel: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_OK,
       placeholder: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER,
-      defaultValue: activeChannel.name,
+      defaultValue: channel.name,
       onSubmit: (channelName) => updateChannel({ name: channelName }),
     });
-  }, [STRINGS, updateChannel, activeChannel.name]);
+  }, [STRINGS, updateChannel, channel.name]);
 
   const changeChannelImage = useCallback(() => {
     openMenu({
@@ -87,7 +84,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_CAMERA,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {
@@ -110,7 +110,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {
@@ -140,7 +143,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     <ProviderLayout>
       <GroupChannelSettingsContexts.Fragment.Provider
         value={{
-          channel: activeChannel,
+          channel,
           headerTitle: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_TITLE,
           headerRight: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_RIGHT,
           onPressHeaderRight,

package/src/domain/groupChannelSettings/types.ts

@@ -12,6 +12,7 @@ export interface GroupChannelSettingsProps {
     onPressMenuModeration: GroupChannelSettingsProps['Menu']['onPressMenuModeration'];
     onPressMenuMembers: GroupChannelSettingsProps['Menu']['onPressMenuMembers'];
     onPressMenuLeaveChannel: GroupChannelSettingsProps['Menu']['onPressMenuLeaveChannel'];
+    onPressMenuNotification?: GroupChannelSettingsProps['Menu']['onPressMenuNotification'];
     menuItemsCreator?: GroupChannelSettingsProps['Menu']['menuItemsCreator'];
   };
   Header: {
@@ -22,6 +23,7 @@ export interface GroupChannelSettingsProps {
     onPressMenuModeration: () => void;
     onPressMenuMembers: () => void;
     onPressMenuLeaveChannel: () => void;
+    onPressMenuNotification?: () => void;
     menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
   };
   Provider: {

package/src/domain/groupChannelUserList/types.ts

@@ -1,5 +1,10 @@
-import type { UseUserListOptions, UserStruct } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember } from '@sendbird/uikit-utils';
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
+import type {
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  UserStruct,
+} from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { GroupChannelType } from '../groupChannelList/types';

package/src/domain/userList/component/UserListList.tsx

@@ -2,10 +2,13 @@ import React, { useCallback, useContext } from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type { UserStruct } from '@sendbird/uikit-utils';
+import { getUserUniqId } from '@sendbird/uikit-utils';
+
 import { UserListContexts } from '../module/moduleContext';
 import type { UserListContextsType, UserListProps } from '../types';
 
-const UserListList = <T,>({
+const UserListList = <T extends UserStruct>({
   users,
   onRefresh,
   refreshing,
@@ -29,6 +32,7 @@ const UserListList = <T,>({
       onEndReached={onLoadNext}
       contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
+      keyExtractor={getUserUniqId}
     />
   );
 };

package/src/domain/userList/module/createUserListModule.tsx

@@ -1,3 +1,5 @@
+import type { UserStruct } from '@sendbird/uikit-utils';
+
 import UserListHeader from '../component/UserListHeader';
 import UserListList from '../component/UserListList';
 import UserListStatusEmpty from '../component/UserListStatusEmpty';
@@ -6,7 +8,7 @@ import UserListStatusLoading from '../component/UserListStatusLoading';
 import type { UserListModule } from '../types';
 import { UserListContextsProvider } from './moduleContext';
 
-const createUserListModule = <T,>({
+const createUserListModule = <T extends UserStruct>({
   Header = UserListHeader,
   List = UserListList,
   StatusLoading = UserListStatusLoading,

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { UserStruct, useUserList } from '@sendbird/uikit-chat-hooks';
-import { PASS, SendbirdGroupChannelCreateParams, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import {
+  PASS,
+  SendbirdGroupChannelCreateParams,
+  SendbirdUser,
+  UserStruct,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';

package/src/fragments/createGroupChannelFragment.tsx

@@ -75,10 +75,17 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       const processedParams = await onBeforeSendFileMessage({ file });
       await sendFileMessage(processedParams);
     });
-    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(async (text) => {
-      const processedParams = await onBeforeSendUserMessage({ message: text });
-      await sendUserMessage(processedParams);
-    });
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
+      async (text, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: text,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+          mentionType: mention?.type,
+        });
+        await sendUserMessage(processedParams);
+      },
+    );
     const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const processedParams = await onBeforeSendFileMessage({ file: editedFile });
@@ -86,8 +93,13 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       },
     );
     const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
-      async (editedText, message) => {
-        const processedParams = await onBeforeSendUserMessage({ message: editedText });
+      async (editedText, message, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: editedText,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+          mentionType: mention?.type,
+        });
         await updateUserMessage(message.messageId, processedParams);
       },
     );
@@ -119,6 +131,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input
+            SuggestedMentionList={GroupChannelModule.SuggestedMentionList}
             shouldRenderInput={shouldRenderInput(channel)}
             onSendFileMessage={onSendFileMessage}
             onSendUserMessage={onSendUserMessage}

package/src/fragments/createGroupChannelInviteFragment.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { UserStruct, useUserList } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdGroupChannel, SendbirdUser, UserStruct } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';

package/src/fragments/createGroupChannelListFragment.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
-import { AppState } from 'react-native';
+import React from 'react';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { PASS, useFreshCallback } from '@sendbird/uikit-utils';
+import { PASS, useAppState, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
@@ -34,12 +33,9 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     });
 
     if (features.deliveryReceiptEnabled) {
-      useEffect(() => {
-        const listener = AppState.addEventListener('change', (status) => {
-          if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
-        });
-        return () => listener.remove();
-      }, []);
+      useAppState('change', (status) => {
+        if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
+      });
     }
 
     const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(

package/src/fragments/createGroupChannelNotificationsFragment.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { createGroupChannelNotificationsModule } from '../domain/groupChannelNotifications';
+import type {
+  GroupChannelNotificationsFragment,
+  GroupChannelNotificationsModule,
+} from '../domain/groupChannelNotifications/types';
+
+const createGroupChannelNotificationsFragment = (
+  initModule?: Partial<GroupChannelNotificationsModule>,
+): GroupChannelNotificationsFragment => {
+  const GroupChannelNotificationsModule = createGroupChannelNotificationsModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, children, channel }) => {
+    return (
+      <GroupChannelNotificationsModule.Provider channel={channel}>
+        <GroupChannelNotificationsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <GroupChannelNotificationsModule.View />
+        {children}
+      </GroupChannelNotificationsModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelNotificationsFragment;

package/src/fragments/createGroupChannelSettingsFragment.tsx

@@ -19,6 +19,7 @@ const createGroupChannelSettingsFragment = (
     onPressMenuModeration,
     onPressMenuMembers,
     onPressMenuLeaveChannel,
+    onPressMenuNotification,
     menuItemsCreator,
   }) => {
     const { colors } = useUIKitTheme();
@@ -40,6 +41,7 @@ const createGroupChannelSettingsFragment = (
             onPressMenuModeration={onPressMenuModeration}
             onPressMenuMembers={onPressMenuMembers}
             onPressMenuLeaveChannel={onPressMenuLeaveChannel}
+            onPressMenuNotification={onPressMenuNotification}
           />
         </ScrollView>
       </GroupChannelSettingsModule.Provider>

package/src/hooks/useConnection.ts

@@ -9,7 +9,7 @@ type ConnectOptions = { nickname?: string; accessToken?: string };
 const cacheRestrictCodes = [400300, 400301, 400302, 400310];
 
 const useConnection = () => {
-  const { sdk, setCurrentUser, features } = useSendbirdChat();
+  const { sdk, emojiManager, setCurrentUser, features } = useSendbirdChat();
   const { registerPushTokenForCurrentUser, unregisterPushTokenForCurrentUser } = usePushTokenRegistration();
 
   const connect = useCallback(
@@ -37,6 +37,7 @@ const useConnection = () => {
 
         Logger.debug('[useConnection]', 'connected! (online)');
         setCurrentUser(user);
+        sdk.getAllEmoji().then(emojiManager.init);
 
         return user;
       } catch (e) {
@@ -50,6 +51,7 @@ const useConnection = () => {
           } else if (sdk.currentUser) {
             Logger.debug('[useConnection]', 'connected! (offline)');
             setCurrentUser(sdk.currentUser);
+            sdk.getAllEmoji().finally(emojiManager.init);
             return sdk.currentUser;
           }
         }

package/src/hooks/useContext.ts

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { PlatformServiceContext } from '../contexts/PlatformServiceCtx';
+import { ReactionContext } from '../contexts/ReactionCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { UserProfileContext } from '../contexts/UserProfileCtx';
 
@@ -28,3 +29,9 @@ export const useUserProfile = () => {
   if (!value) throw new Error('UserProfileContext is not provided');
   return value;
 };
+
+export const useReaction = () => {
+  const value = useContext(ReactionContext);
+  if (!value) throw new Error('ReactionContext is not provided');
+  return value;
+};

package/src/hooks/useKeyboardStatus.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEvent, KeyboardEventName, LayoutAnimation, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+type KeyboardEvents = {
+  showEvent: KeyboardEventName;
+  hideEvent: KeyboardEventName;
+};
+
+let isLayoutAnimationConfigured = false;
+
+const configureNextLayoutAnimation = (event: KeyboardEvent) => {
+  if (isLayoutAnimationConfigured) return;
+  const config = LayoutAnimation.create(event.duration, event.easing, LayoutAnimation.Properties.scaleY);
+  isLayoutAnimationConfigured = true;
+  const onEnd = () => (isLayoutAnimationConfigured = false);
+  LayoutAnimation.configureNext(config, onEnd, onEnd);
+};
+
+const { showEvent, hideEvent } = Platform.select<KeyboardEvents>({
+  android: { showEvent: 'keyboardDidShow', hideEvent: 'keyboardDidHide' },
+  default: { showEvent: 'keyboardWillShow', hideEvent: 'keyboardWillHide' },
+});
+
+const useKeyboardStatus = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState({ visible: false, height: 0, bottomSpace: 0 });
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  useEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener(showEvent, (event) => {
+        const height = event.endCoordinates.height;
+        const bottomSpace = Platform.select({ ios: height - bottomInset, default: 0 });
+        const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+
+        nextLayoutAnimation(event);
+        setKeyboardStatus({ visible: true, height, bottomSpace });
+      }),
+
+      Keyboard.addListener(hideEvent, () => {
+        const height = 0;
+        const bottomSpace = Platform.select({ default: height });
+        // const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+
+        // nextLayoutAnimation(event);
+        setKeyboardStatus({ visible: false, height, bottomSpace });
+      }),
+    ];
+    return () => {
+      subscriptions.forEach((it) => it.remove());
+    };
+  }, []);
+
+  return keyboardStatus;
+};
+
+export default useKeyboardStatus;

package/src/hooks/useMentionSuggestion.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { useAsyncEffect } from '@sendbird/uikit-utils';
+
+import { useSendbirdChat } from '../hooks/useContext';
+import type { Range } from '../types';
+
+const useMentionSuggestion = (params: {
+  text: string;
+  selection: Range;
+  channel: SendbirdGroupChannel;
+  mentionedUsers: { user: SendbirdUser; range: Range }[];
+}) => {
+  const { text, selection, channel, mentionedUsers } = params;
+
+  const [freshChannel, setFreshChannel] = useState(channel);
+
+  useAsyncEffect(async () => {
+    setFreshChannel(await channel.refresh());
+  }, [channel.url]);
+
+  const { mentionManager, currentUser } = useSendbirdChat();
+  const [members, setMembers] = useState<SendbirdMember[]>([]);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const searchStringRangeRef = useRef<Range>({ start: 0, end: 0 });
+  const searchLimitedRef = useRef(false);
+
+  const updateSearchStringRange = (selectionIndex: number, searchString: string) => {
+    searchStringRangeRef.current = mentionManager.getSearchStringRangeInText(selectionIndex, searchString);
+    return searchStringRangeRef.current;
+  };
+  const updateSearchLimited = (mentionCount: number, mentionLimit: number) => {
+    searchLimitedRef.current = mentionCount >= mentionLimit;
+    return searchLimitedRef.current;
+  };
+  const resetRefs = () => {
+    searchLimitedRef.current = false;
+    searchStringRangeRef.current = { start: 0, end: 0 };
+  };
+
+  const fetchMembers = async (): Promise<SendbirdMember[]> => {
+    resetRefs();
+
+    const selectionRanged = selection.start !== selection.end;
+    if (selectionRanged) return [];
+
+    const selectionContainsMentionedUser = mentionedUsers.some((it) =>
+      mentionManager.rangeHelpers.overlaps(it.range, selection, 'underMore'),
+    );
+    if (selectionContainsMentionedUser) return [];
+
+    const { isTriggered, isValidSearchString, searchString } = mentionManager.getSearchString(text, selection.start);
+    if (!isTriggered() || !isValidSearchString()) return [];
+
+    const limited = updateSearchLimited(mentionedUsers.length, mentionManager.config.mentionLimit);
+    if (limited) return [];
+
+    updateSearchStringRange(selection.start, searchString);
+
+    if (freshChannel.isSuper) {
+      return freshChannel
+        .createMemberListQuery({
+          nicknameStartsWithFilter: searchString,
+          limit: mentionManager.config.suggestionLimit + 1,
+        })
+        .next()
+        .then((members) => members.filter((member) => member.userId !== currentUser?.userId));
+    } else {
+      return freshChannel.members
+        .sort((a, b) => a.nickname?.localeCompare(b.nickname))
+        .filter(
+          (member) =>
+            member.nickname?.toLowerCase().startsWith(searchString.toLowerCase()) &&
+            member.userId !== currentUser?.userId,
+        )
+        .slice(0, mentionManager.config.suggestionLimit);
+    }
+  };
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(async () => {
+      fetchMembers()
+        .then(setMembers)
+        .catch(() => setMembers([]))
+        .finally(() => (timeoutRef.current = undefined));
+    }, mentionManager.config.debounceMills);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+    };
+  }, [text, selection]);
+
+  return {
+    members,
+    reset: useCallback(() => setMembers([]), []),
+    searchStringRange: searchStringRangeRef.current,
+    searchLimited: searchLimitedRef.current,
+  };
+};
+
+export default useMentionSuggestion;