chore: fixed scroll issue

Author: OnestarLee

packages/uikit-react-native/src/components/ChatFlatList/index.tsx

@@ -72,6 +72,14 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
     );
   }
 
+  const _onStartReached: () => void = () => {
+    inverted.current ? onBottomReached() : onTopReached();
+  };
+
+  const _onEndReached: () => void = () => {
+    inverted.current ? onTopReached() : onBottomReached();
+  };
+
   return (
     <FlatListInternal
       bounces={false}
@@ -82,9 +90,9 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
       {...props}
       inverted={inverted.current}
       ref={ref}
-      onEndReached={onTopReached}
+      onEndReached={_onEndReached}
       onScrollToIndexFailed={NOOP}
-      onStartReached={onBottomReached}
+      onStartReached={_onStartReached}
       scrollEventThrottle={16}
       onScroll={_onScroll}
       keyExtractor={getMessageUniqId}

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadMessageList.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
@@ -15,6 +15,19 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
   const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelThreadContexts.MessageList);
 
   const id = useUniqHandlerId('GroupChannelThreadMessageList');
+  const ignorePropReached = useRef(false);
+
+  const _onTopReached = () => {
+    if (!ignorePropReached.current) {
+      props.onTopReached();
+    }
+  };
+
+  const _onBottomReached = () => {
+    if (!ignorePropReached.current) {
+      props.onBottomReached();
+    }
+  };
 
   const scrollToBottom = useFreshCallback(async (animated = false) => {
     if (props.hasNext()) {
@@ -33,7 +46,12 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
       const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === props.startingPoint);
       const isIncludedInList = foundMessageIndex > -1;
       if (isIncludedInList) {
-        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout: 500 });
+        ignorePropReached.current = true;
+        const timeout = 300;
+        lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout: timeout });
+        setTimeout(() => {
+          ignorePropReached.current = false;
+        }, timeout + 50);
       }
     }
   }, [props.startingPoint]);
@@ -73,6 +91,8 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
     <ChannelThreadMessageList
       {...props}
       ref={flatListRef}
+      onTopReached={_onTopReached}
+      onBottomReached={_onBottomReached}
       onEditMessage={setMessageToEdit}
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}