@sendbird/uikit-react-native 2.1.0 → 2.2.0

package/src/contexts/ReactionCtx.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useContext, useReducer, useRef, useState } from 'react';
+
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { ReactionBottomSheets } from '../components/ReactionBottomSheets';
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+import { UserProfileContext } from '../contexts/UserProfileCtx';
+
+type State = {
+  message?: SendbirdBaseMessage;
+  channel?: SendbirdBaseChannel;
+};
+export type ReactionContextType = {
+  openReactionList(param: Required<State>): void;
+  openReactionUserList(param: Required<State> & { focusIndex?: number }): void;
+  updateReactionFocusedItem(param?: State): void;
+  focusIndex: number;
+} & State;
+
+type Props = React.PropsWithChildren<{}>;
+
+export const ReactionContext = React.createContext<ReactionContextType | null>(null);
+export const ReactionProvider = ({ children }: Props) => {
+  const chatCtx = useContext(SendbirdChatContext);
+  const localizationCtx = useContext(LocalizationContext);
+  const userProfileCtx = useContext(UserProfileContext);
+  if (!chatCtx) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationCtx) throw new Error('LocalizationContext is not provided');
+  if (!userProfileCtx) throw new Error('UserProfileContext is not provided');
+
+  const [state, setState] = useReducer((prev: State, next: State) => ({ ...prev, ...next }), {});
+  const [reactionListVisible, setReactionListVisible] = useState(false);
+  const [reactionUserListVisible, setReactionUserListVisible] = useState(false);
+  const [reactionUserListFocusIndex, setReactionUserListFocusIndex] = useState(0);
+
+  const closeResolver = useRef<() => void>(NOOP);
+
+  const openReactionList: ReactionContextType['openReactionList'] = useCallback((params) => {
+    setState(params);
+    setReactionListVisible(true);
+  }, []);
+
+  const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
+    ({ channel, message, focusIndex = 0 }) => {
+      setState({ channel, message });
+      setReactionUserListFocusIndex(focusIndex);
+      setReactionUserListVisible(true);
+    },
+    [],
+  );
+
+  const updateReactionFocusedItem: ReactionContextType['updateReactionFocusedItem'] = useCallback((params) => {
+    if (params) setState(params);
+    else setState({});
+  }, []);
+
+  const createOnCloseWithResolver = (callback: () => void) => {
+    return () => {
+      return new Promise<void>((resolve) => {
+        closeResolver.current = resolve;
+        callback();
+      });
+    };
+  };
+
+  const reactionCtx = {
+    ...state,
+    openReactionList,
+    openReactionUserList,
+    updateReactionFocusedItem,
+    focusIndex: reactionUserListFocusIndex,
+  };
+
+  const sheetProps = {
+    chatCtx,
+    reactionCtx,
+    localizationCtx,
+    userProfileCtx,
+    onDismiss: () => {
+      setState({});
+      closeResolver.current?.();
+    },
+  };
+
+  return (
+    <ReactionContext.Provider value={reactionCtx}>
+      {children}
+      <ReactionBottomSheets.UserList
+        {...sheetProps}
+        visible={reactionUserListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionUserListVisible(false))}
+      />
+      <ReactionBottomSheets.ReactionList
+        {...sheetProps}
+        visible={reactionListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionListVisible(false))}
+      />
+    </ReactionContext.Provider>
+  );
+};

package/src/contexts/SendbirdChatCtx.tsx

@@ -10,6 +10,8 @@ import type {
 } from '@sendbird/uikit-utils';
 import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
 
+import type EmojiManager from '../libs/EmojiManager';
+import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
 export interface UIKitFeaturesInSendbirdChatContext {
@@ -17,14 +19,19 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableChannelListTypingIndicator: boolean;
   enableChannelListMessageReceiptStatus: boolean;
   enableUseUserIdForNickname: boolean;
+  enableUserMention: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
 }
 
 type Context = {
   sdk: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -38,6 +45,7 @@ type Context = {
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
+    userMentionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -51,10 +59,13 @@ export const SendbirdChatContext = React.createContext<Context | null>(null);
 export const SendbirdChatProvider = ({
   children,
   sdkInstance,
+  emojiManager,
+  mentionManager,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
   enableUseUserIdForNickname,
+  enableUserMention,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -72,9 +83,17 @@ export const SendbirdChatProvider = ({
 
       if (!user) throw new Error('Current user is not defined, please connect using `useConnection()` hook first');
 
-      const params: SendbirdUserUpdateParams = { nickname };
+      const params: SendbirdUserUpdateParams = {};
 
-      if (typeof profile === 'string') {
+      if (!nickname) {
+        params.nickname = user.nickname;
+      } else {
+        params.nickname = nickname;
+      }
+
+      if (!profile) {
+        params.profileUrl = user.profileUrl;
+      } else if (typeof profile === 'string') {
         params.profileUrl = profile;
       } else if (typeof profile === 'object') {
         params.profileImage = profile;
@@ -110,6 +129,8 @@ export const SendbirdChatProvider = ({
 
   const value: Context = {
     sdk: sdkInstance,
+    emojiManager,
+    mentionManager,
     currentUser,
     setCurrentUser,
 
@@ -122,6 +143,7 @@ export const SendbirdChatProvider = ({
       channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
+      userMentionEnabled: enableUserMention,
     },
   };
 

package/src/contexts/UserProfileCtx.tsx

@@ -29,6 +29,8 @@ type Props = React.PropsWithChildren<{
   onBeforeCreateChannel?: OnBeforeCreateChannel;
 }>;
 
+let WARN_onCreateChannel = false;
+
 export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
 export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
   const chatContext = useContext(SendbirdChatContext);
@@ -37,6 +39,13 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
   if (!chatContext) throw new Error('SendbirdChatContext is not provided');
   if (!localizationContext) throw new Error('LocalizationContext is not provided');
 
+  if (__DEV__ && !WARN_onCreateChannel && !onCreateChannel) {
+    Logger.warn(
+      'You should pass `userProfile.onCreateChannel` prop to SendbirdUIKitContainer if want to use message in a user profile',
+    );
+    WARN_onCreateChannel = true;
+  }
+
   const { bottom, left, right } = useSafeAreaInsets();
 
   const [user, setUser] = useState<SendbirdUser | SendbirdMember>();

package/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -1,60 +1,86 @@
-import React, { useEffect, useRef } from 'react';
-import { Platform, TextInput as RNTextInput, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  View,
+} from 'react-native';
 
+import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';
+import type { MentionedUser } from '../../../../types';
 import type { GroupChannelProps } from '../../types';
 
 type EditInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
-  editMessage: SendbirdUserMessage | SendbirdFileMessage;
-  setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onChangeText: (val: string) => void;
+  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
   disabled: boolean;
+  autoFocus: boolean;
+  mentionedUsers: MentionedUser[];
 };
 
-const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage, disabled }: EditInputProps) => {
+const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
+  {
+    text,
+    onChangeText,
+    messageToEdit,
+    setMessageToEdit,
+    onUpdateUserMessage,
+    onSelectionChange,
+    disabled,
+    autoFocus,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();
 
-  useEffect(() => {
-    if (editMessage.isUserMessage()) {
-      setText(editMessage.message ?? '');
-
-      if (!AUTO_FOCUS) setTimeout(() => inputRef.current?.focus(), 500);
-    }
-  }, [editMessage]);
-
   const onPressCancel = () => {
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   const onPressSave = () => {
-    if (editMessage.isUserMessage()) {
-      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+    if (messageToEdit.isUserMessage()) {
+      const mention = {
+        userIds: mentionedUsers.map((it) => it.user.userId),
+        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+        type: MentionType.USERS,
+      };
+
+      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>
+        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),
+      );
     }
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   return (
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
-          editable={!disabled}
-          autoFocus={AUTO_FOCUS}
-          ref={inputRef}
+          ref={ref}
           multiline
-          value={text}
-          onChangeText={setText}
+          disableFullscreenUI
+          editable={!disabled}
+          autoFocus={autoFocus}
+          onChangeText={onChangeText}
           style={styles.input}
           placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
-        />
+          onSelectionChange={onSelectionChange}
+        >
+          {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+        </TextInput>
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>
         <Button variant={'text'} onPress={onPressCancel}>
@@ -67,7 +93,7 @@ const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMes
       </View>
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   editInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -1,6 +1,14 @@
-import React from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
+import { MentionType } from '@sendbird/chat/message';
 import {
   Icon,
   TextInput,
@@ -12,27 +20,36 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
-import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../../hooks/useContext';
 import SBUError from '../../../../libs/SBUError';
 import SBUUtils from '../../../../libs/SBUUtils';
+import type { MentionedUser } from '../../../../types';
 import type { GroupChannelProps } from '../../types';
 
 type SendInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
+  onChangeText: (val: string) => void;
   frozen: boolean;
   muted: boolean;
   disabled: boolean;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+  mentionedUsers: MentionedUser[];
 };
-const SendInput = ({
-  onSendUserMessage,
-  onSendFileMessage,
-  text,
-  setText,
-  disabled,
-  frozen,
-  muted,
-}: SendInputProps) => {
+const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
+  {
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    onChangeText,
+    disabled,
+    frozen,
+    muted,
+    onSelectionChange,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
@@ -41,9 +58,16 @@ const SendInput = ({
   const toast = useToast();
 
   const onPressSend = () => {
-    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
-    setText('');
+    const mention = {
+      userIds: mentionedUsers.map((it) => it.user.userId),
+      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+      type: MentionType.USERS,
+    };
+
+    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    onChangeText('');
   };
+
   const onPressAttachment = () => {
     openSheet({
       sheetItems: [
@@ -124,10 +148,12 @@ const SendInput = ({
         />
       </TouchableOpacity>
       <TextInput
+        ref={ref}
         multiline
+        disableFullscreenUI
+        onSelectionChange={onSelectionChange}
         editable={!disabled}
-        value={text}
-        onChangeText={setText}
+        onChangeText={onChangeText}
         style={styles.input}
         placeholder={conditionChaining(
           [frozen, muted],
@@ -137,7 +163,10 @@ const SendInput = ({
             STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
           ],
         )}
-      />
+      >
+        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+      </TextInput>
+
       {Boolean(text.trim()) && (
         <TouchableOpacity onPress={onPressSend} disabled={disabled}>
           <Icon
@@ -150,7 +179,7 @@ const SendInput = ({
       )}
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   sendInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -1,75 +1,169 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getGroupChannelChatAvailableState, useIIFE } from '@sendbird/uikit-utils';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+  getGroupChannelChatAvailableState,
+  replace,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
+import { useSendbirdChat } from '../../../../hooks/useContext';
+import useMentionTextInput from '../../../../hooks/useMentionTextInput';
 import { GroupChannelContexts } from '../../module/moduleContext';
 import type { GroupChannelProps } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
+
+// FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
+//  To workaround temporarily, change the key for re-mount the component.
+const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
+
+// TODO: Refactor 'Edit' mode to clearly
 const GroupChannelInput = (props: GroupChannelProps['Input']) => {
-  const { left, right, bottom } = useSafeAreaInsets();
+  const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
-  const { channel, editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
+  const { features, mentionManager } = useSendbirdChat();
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(GroupChannelContexts.Fragment);
 
-  const [text, setText] = useState('');
-  const textTmpRef = useRef('');
   const chatAvailableState = getGroupChannelChatAvailableState(channel);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputMode = useIIFE(() => {
+    if (!messageToEdit) return 'send';
+    if (messageToEdit.isFileMessage()) return 'send';
+    return 'edit';
+  });
+
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit: messageToEdit,
+  });
+
+  useTypingTrigger(text, channel);
+  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useAutoFocusOnEditMode(textInputRef, messageToEdit);
+
+  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+    const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
+    const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
+
+    onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
+  };
+
+  if (!props.shouldRenderInput) {
+    return <SafeAreaBottom height={bottom} />;
+  }
+
+  return (
+    <>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
+        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+      >
+        <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
+          <View onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)} style={styles.inputContainer}>
+            {inputMode === 'send' && (
+              <SendInput
+                {...props}
+                {...chatAvailableState}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                text={text}
+                onChangeText={onChangeText}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+            {inputMode === 'edit' && messageToEdit && (
+              <EditInput
+                {...props}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                autoFocus={AUTO_FOCUS}
+                text={text}
+                onChangeText={onChangeText}
+                messageToEdit={messageToEdit}
+                setMessageToEdit={setMessageToEdit}
+                disabled={chatAvailableState.disabled}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+          </View>
+          <SafeAreaBottom height={bottom} />
+        </View>
+      </KeyboardAvoidingView>
+      {mentionAvailable && (
+        <props.SuggestedMentionList
+          text={text}
+          selection={selection}
+          inputHeight={inputHeight}
+          topInset={top}
+          bottomInset={bottom}
+          onPressToMention={onPressToMention}
+          mentionedUsers={mentionedUsers}
+        />
+      )}
+    </>
+  );
+};
 
+const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
   useEffect(() => {
     if (text.length === 0) channel.endTyping();
     else channel.startTyping();
   }, [text]);
+};
+
+const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
+  const textTmpRef = useRef('');
 
   useEffect(() => {
-    if (chatAvailableState.disabled) {
+    if (chatDisabled) {
       textTmpRef.current = text;
       setText('');
     } else {
       setText(textTmpRef.current);
     }
-  }, [chatAvailableState.disabled]);
-
-  const inputMode = useIIFE(() => {
-    if (!editMessage) return 'send';
-    if (editMessage.isFileMessage()) return 'send';
-    return 'edit';
-  });
-
-  if (!props.shouldRenderInput) {
-    return <SafeAreaBottom height={bottom} />;
-  }
+  }, [chatDisabled]);
+};
 
-  return (
-    <KeyboardAvoidingView
-      keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
-      behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
-    >
-      <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
-        <View style={{ justifyContent: 'center', width: '100%' }}>
-          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} {...chatAvailableState} />}
-          {inputMode === 'edit' && editMessage && (
-            <EditInput
-              {...props}
-              text={text}
-              setText={setText}
-              editMessage={editMessage}
-              setEditMessage={setEditMessage}
-              disabled={chatAvailableState.disabled}
-            />
-          )}
-        </View>
-        <SafeAreaBottom height={bottom} />
-      </View>
-    </KeyboardAvoidingView>
-  );
+const useAutoFocusOnEditMode = (
+  textInputRef: MutableRefObject<TextInput | undefined>,
+  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+) => {
+  useEffect(() => {
+    if (messageToEdit?.isUserMessage()) {
+      if (!AUTO_FOCUS) setTimeout(() => textInputRef.current?.focus(), 500);
+    }
+  }, [messageToEdit]);
 };
+
 const SafeAreaBottom = ({ height }: { height: number }) => {
   return <View style={{ height }} />;
 };
 
+const styles = createStyleSheet({
+  inputContainer: {
+    justifyContent: 'center',
+    width: '100%',
+  },
+  inputDefault: {
+    height: 56,
+  },
+});
+
 export default React.memo(GroupChannelInput);