@sendbird/uikit-react-native 3.10.1 → 3.10.3

package/lib/typescript/src/domain/groupChannel/types.d.ts

@@ -31,6 +31,7 @@ export interface GroupChannelProps {
         flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
         sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
         searchItem?: GroupChannelProps['MessageList']['searchItem'];
+        partialTextInputProps?: GroupChannelProps['Input']['partialTextInputProps'];
         /**
          * @description You can specify the query parameters for the message list.
          * @example
@@ -57,7 +58,7 @@ export interface GroupChannelProps {
         onNewLineSeenChange?: (hasSeenNewLine: boolean) => void;
         onUserMarkedAsUnreadChange?: (hasUserMarkedAsUnread: boolean) => void;
     };
-    Input: PickPartial<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' | 'AttachmentsButton', 'inputDisabled'>;
+    Input: PickPartial<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' | 'AttachmentsButton' | 'partialTextInputProps', 'inputDisabled'>;
     SuggestedMentionList: SuggestedMentionListProps;
     Provider: {
         channel: SendbirdGroupChannel;
@@ -129,6 +130,16 @@ export interface GroupChannelContextsType {
             timeout?: number;
             viewPosition?: number;
         }) => void;
+        /**
+         * Call the FlatList function asynchronously to scroll to a message by messageId lazily.
+         * to avoid scrolling before data rendering has been committed.
+         * */
+        lazyScrollToMessageId: (params?: {
+            messageId?: number;
+            animated?: boolean;
+            timeout?: number;
+            viewPosition?: number;
+        }) => void;
         onPressReplyMessageInThread?: (parentMessage: SendbirdSendableMessage, startingPoint?: number) => void;
     }>;
 }

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.10.1";
+declare const VERSION = "3.10.3";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.10.1",
+  "version": "3.10.3",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.10.1",
-    "@sendbird/uikit-react-native-foundation": "3.10.1",
+    "@sendbird/uikit-chat-hooks": "3.10.3",
+    "@sendbird/uikit-react-native-foundation": "3.10.3",
     "@sendbird/uikit-tools": "0.0.15",
-    "@sendbird/uikit-utils": "3.10.1"
+    "@sendbird/uikit-utils": "3.10.3"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -218,5 +218,5 @@
       ]
     ]
   },
-  "gitHead": "4202a8ca4c1db6bb15b37fda743ea36f95b457b3"
+  "gitHead": "2f85a74e995069845ec6876d1339a66b299b642b"
 }

package/src/components/ChannelInput/EditInput.tsx

@@ -31,6 +31,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     autoFocus,
     mentionedUsers,
     inputDisabled,
+    partialTextInputProps,
   },
   ref,
 ) {
@@ -70,6 +71,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
+          {...partialTextInputProps}
           ref={ref}
           multiline
           disableFullscreenUI

package/src/components/ChannelInput/SendInput.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
@@ -54,6 +55,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     messageToReply,
     setMessageToReply,
     messageForThread,
+    partialTextInputProps,
   },
   ref,
 ) {
@@ -116,7 +118,19 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       ...messageReplyParams,
     }).catch(onFailureToSend);
 
-    onChangeText('');
+    // On iOS with autoCorrect enabled, calling onChangeText('') immediately after sending
+    // can be ignored due to the keyboard's autocorrect not being committed yet.
+    // Delay the clear call slightly to allow the autocorrected text to be applied first.
+    if (Platform.OS === 'ios') {
+      const textInputRef = ref as React.MutableRefObject<RNTextInput | undefined>;
+      if (textInputRef.current) {
+        setTimeout(() => {
+          onChangeText('');
+        }, 10);
+      }
+    } else {
+      onChangeText('');
+    }
     setMessageToReply?.();
   };
 
@@ -186,6 +200,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       <View style={styles.sendInputContainer}>
         {AttachmentsButton && <AttachmentsButton onPress={() => openSheet({ sheetItems })} disabled={inputDisabled} />}
         <TextInput
+          {...partialTextInputProps}
           ref={ref}
           multiline
           disableFullscreenUI

package/src/components/ChannelInput/index.tsx

@@ -1,5 +1,15 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  View,
+} from 'react-native';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
@@ -79,13 +89,16 @@ export type ChannelInputProps = {
   AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
   MessageToReplyPreview?: (props: MessageToReplyPreviewProps) => React.ReactNode | null;
   VoiceMessageInput?: (props: VoiceMessageInputProps) => React.ReactNode | null;
+
+  // TextInput props - only safe properties that don't interfere with UIKit functionality
+  partialTextInputProps?: Partial<Pick<TextInputProps, 'autoCorrect'>>;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const isAndroidApi35 = Platform.OS === 'android' && Platform.Version >= 35;
+const isAndroidApi35Plus = Platform.OS === 'android' && Platform.Version >= 35;
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({
   ios: 'padding' as const,
-  android: isAndroidApi35 ? ('padding' as const) : undefined,
+  android: isAndroidApi35Plus ? ('padding' as const) : undefined,
   default: undefined,
 });
 
@@ -109,7 +122,9 @@ const ChannelInput = (props: ChannelInputProps) => {
    * For older Android versions, we manually subtract the safe area bottom padding to avoid overlapping with system UI.
    * See: https://developer.android.com/develop/ui/views/layout/edge-to-edge
    */
-  const keyboardVerticalOffset = isAndroidApi35 ? keyboardAvoidOffset : -safeArea.paddingBottom + keyboardAvoidOffset;
+  const keyboardVerticalOffset = isAndroidApi35Plus
+    ? keyboardAvoidOffset
+    : -safeArea.paddingBottom + keyboardAvoidOffset;
   const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
@@ -146,6 +161,23 @@ const ChannelInput = (props: ChannelInputProps) => {
     onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
   };
 
+  const [keyboardShown, setKeyboardShown] = useState(false);
+
+  useEffect(() => {
+    const keyboardDidShow = () => setKeyboardShown(true);
+    const keyboardDidHide = () => setKeyboardShown(false);
+
+    const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  const shouldShowSafeAreaBottom = !isAndroidApi35Plus || (isAndroidApi35Plus && !keyboardShown);
+
   if (!props.shouldRenderInput) {
     return <SafeAreaBottom height={safeArea.paddingBottom} />;
   }
@@ -192,7 +224,7 @@ const ChannelInput = (props: ChannelInputProps) => {
               />
             )}
           </View>
-          {!isAndroidApi35 && <SafeAreaBottom height={safeArea.paddingBottom} />}
+          {shouldShowSafeAreaBottom && <SafeAreaBottom height={safeArea.paddingBottom} />}
         </View>
       </KeyboardAvoidingView>
       {mentionAvailable && props.SuggestedMentionList && (

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

@@ -26,7 +26,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const { sdk, sbOptions, groupChannelFragmentOptions } = useSendbirdChat();
   const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
   const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
-  const { flatListRef, lazyScrollToBottom, lazyScrollToIndex, onPressReplyMessageInThread } = useContext(
+  const { flatListRef, lazyScrollToBottom, lazyScrollToMessageId, onPressReplyMessageInThread } = useContext(
     GroupChannelContexts.MessageList,
   );
 
@@ -40,6 +40,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const viewableMessages = useRef<SendbirdMessage[]>();
   const hasUserMarkedAsUnreadRef = useRef(false);
   const [unreadFirstMessage, setUnreadFirstMessage] = useState<SendbirdMessage | undefined>(undefined);
+  const pendingBottomReachedRef = useRef<{ timeout: number; timestamp: number } | null>(null);
 
   const updateHasSeenNewLine = useCallback(
     (hasSeenNewLine: boolean) => {
@@ -63,14 +64,16 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
     (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
-      const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
-      const isIncludedInList = foundMessageIndex > -1;
+      const foundMessage = props.messages.find((it) => it.createdAt === createdAt);
+      const isIncludedInList = !!foundMessage;
+      pendingBottomReachedRef.current = null;
 
       if (isIncludedInList) {
         if (focusAnimated) {
           setTimeout(() => props.onUpdateSearchItem({ startingPoint: createdAt }), MESSAGE_FOCUS_ANIMATION_DELAY);
         }
-        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout });
+        pendingBottomReachedRef.current = { timeout, timestamp: Date.now() };
+        lazyScrollToMessageId({ messageId: foundMessage.messageId, animated: true, timeout });
       } else {
         if (props.channel.messageOffsetTimestamp <= createdAt) {
           if (focusAnimated) {
@@ -346,6 +349,23 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     },
   );
 
+  const onBottomReached = useFreshCallback(() => {
+    if (props.hasNext()) {
+      if (pendingBottomReachedRef.current) {
+        const currentTime = Date.now();
+        const elapsedTime = currentTime - pendingBottomReachedRef.current.timestamp;
+
+        const timeoutThreshold = 500;
+        if (elapsedTime >= pendingBottomReachedRef.current.timeout + timeoutThreshold) {
+          props.onBottomReached?.();
+          pendingBottomReachedRef.current = null;
+        }
+      } else {
+        props.onBottomReached?.();
+      }
+    }
+  });
+
   return (
     <ChannelMessageList
       {...props}
@@ -359,6 +379,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}
       onPressMarkAsUnreadMessage={onPressMarkAsUnreadMessage}
+      onBottomReached={onBottomReached}
       unreadFirstMessage={unreadFirstMessage}
       unreadMessagesFloatingProps={unreadMessagesFloatingPropsRef.current}
     />

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

@@ -46,6 +46,9 @@ export const GroupChannelContexts: GroupChannelContextsType = {
     lazyScrollToIndex: () => {
       // noop
     },
+    lazyScrollToMessageId: () => {
+      // noop
+    },
   } as MessageListContextValue),
 };
 
@@ -68,10 +71,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 { flatListRef, lazyScrollToIndex, lazyScrollToBottom, scrollToMessage, lazyScrollToMessageId } =
+    useScrollActions({
+      messages,
+      onUpdateSearchItem,
+    });
 
   const updateInputMode = (mode: 'send' | 'edit' | 'reply', message?: SendbirdUserMessage | SendbirdFileMessage) => {
     if (mode === 'send' || !message) {
@@ -143,6 +147,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
                 scrollToMessage,
                 lazyScrollToIndex,
                 lazyScrollToBottom,
+                lazyScrollToMessageId,
                 onPressReplyMessageInThread,
               }}
             >
@@ -159,9 +164,11 @@ type MessageListContextValue = ContextValue<GroupChannelContextsType['MessageLis
 const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages' | 'onUpdateSearchItem'>) => {
   const { messages, onUpdateSearchItem } = params;
   const flatListRef = useRef<FlatList<SendbirdMessage>>(null);
+  const messagesRef = useRef(messages);
+  messagesRef.current = messages;
 
   // FIXME: Workaround, should run after data has been applied to UI.
-  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToIndex']>((params) => {
+  const lazyScrollToBottom = useFreshCallback<MessageListContextValue['lazyScrollToBottom']>((params) => {
     if (!flatListRef.current) {
       logFlatListRefWarning();
       return;
@@ -188,6 +195,33 @@ const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages'
     }, params?.timeout ?? 0);
   });
 
+  // FIXME: Workaround, should run after data has been applied to UI.
+  const lazyScrollToMessageId = useFreshCallback<MessageListContextValue['lazyScrollToMessageId']>((params) => {
+    if (!flatListRef.current) {
+      logFlatListRefWarning();
+      return;
+    }
+
+    setTimeout(() => {
+      let messageIndex = 0;
+      if (params?.messageId) {
+        const foundMessageIndex = messagesRef.current.findIndex((it) => it.messageId === params.messageId);
+        if (foundMessageIndex > -1) {
+          messageIndex = foundMessageIndex;
+        } else {
+          Logger.warn('Message with messageId not found:', params.messageId);
+          return;
+        }
+      }
+
+      flatListRef.current?.scrollToIndex({
+        index: messageIndex,
+        animated: params?.animated ?? false,
+        viewPosition: params?.viewPosition ?? 0.5,
+      });
+    }, params?.timeout ?? 0);
+  });
+
   const scrollToMessage = useFreshCallback<MessageListContextValue['scrollToMessage']>((messageId, options) => {
     if (!flatListRef.current) {
       logFlatListRefWarning();
@@ -221,6 +255,7 @@ const useScrollActions = (params: Pick<GroupChannelProps['Provider'], 'messages'
     lazyScrollToIndex,
     lazyScrollToBottom,
     scrollToMessage,
+    lazyScrollToMessageId,
   };
 };
 

package/src/domain/groupChannel/types.ts

@@ -53,6 +53,8 @@ export interface GroupChannelProps {
 
     searchItem?: GroupChannelProps['MessageList']['searchItem'];
 
+    partialTextInputProps?: GroupChannelProps['Input']['partialTextInputProps'];
+
     /**
      * @description You can specify the query parameters for the message list.
      * @example
@@ -111,7 +113,8 @@ export interface GroupChannelProps {
     | 'onPressUpdateUserMessage'
     | 'onPressUpdateFileMessage'
     | 'SuggestedMentionList'
-    | 'AttachmentsButton',
+    | 'AttachmentsButton'
+    | 'partialTextInputProps',
     'inputDisabled'
   >;
 
@@ -183,6 +186,16 @@ export interface GroupChannelContextsType {
       timeout?: number;
       viewPosition?: number;
     }) => void;
+    /**
+     * Call the FlatList function asynchronously to scroll to a message by messageId lazily.
+     * to avoid scrolling before data rendering has been committed.
+     * */
+    lazyScrollToMessageId: (params?: {
+      messageId?: number;
+      animated?: boolean;
+      timeout?: number;
+      viewPosition?: number;
+    }) => void;
 
     onPressReplyMessageInThread?: (parentMessage: SendbirdSendableMessage, startingPoint?: number) => void;
   }>;

package/src/fragments/createGroupChannelFragment.tsx

@@ -70,6 +70,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     flatListComponent,
     flatListProps,
     messageListQueryParams,
+    partialTextInputProps,
     collectionCreator,
   }) => {
     const { playerService, recorderService } = usePlatformService();
@@ -341,6 +342,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onPressSendFileMessage={onPressSendFileMessage}
             onPressUpdateUserMessage={onPressUpdateUserMessage}
             onPressUpdateFileMessage={onPressUpdateFileMessage}
+            partialTextInputProps={partialTextInputProps}
           />
         </StatusComposition>
       </GroupChannelModule.Provider>

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.10.1';
+const VERSION = '3.10.3';
 export default VERSION;