From ec2512821a438775368b978cca845eec449efcab Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Wed, 21 May 2025 18:28:00 +0900
Subject: [PATCH 1/2] chore: add support for custom FlatList component in
 message list

---
 .../src/components/ChannelMessageList/index.tsx            | 3 +++
 .../src/components/ChatFlatList/index.tsx                  | 7 +++++--
 .../uikit-react-native/src/domain/groupChannel/types.ts    | 2 ++
 .../src/fragments/createGroupChannelFragment.tsx           | 2 ++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx b/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
index 49989dd4a..9bcc8477e 100644
--- a/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
+++ b/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
@@ -90,6 +90,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     | null
     | ((props: { visible: boolean; onPress: () => void; newMessages: SendbirdMessage[] }) => React.ReactElement | null);
   renderScrollToBottomButton: null | ((props: { visible: boolean; onPress: () => void }) => React.ReactElement | null);
+  flatListComponent?: React.ComponentType<FlatListProps<SendbirdMessage>>;
   flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
 } & {
   ref?: Ref<FlatList<SendbirdMessage>> | undefined;
@@ -118,6 +119,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     scrolledAwayFromBottom,
     onBottomReached,
     onTopReached,
+    flatListComponent,
     flatListProps,
     onPressNewMessagesButton,
     onPressScrollToBottomButton,
@@ -165,6 +167,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
         <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
       )}
       <ChatFlatList
+        flatListComponent={flatListComponent}
         {...flatListProps}
         onTopReached={onTopReached}
         onBottomReached={onBottomReached}
diff --git a/packages/uikit-react-native/src/components/ChatFlatList/index.tsx b/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
index 241610007..70bdba050 100644
--- a/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
+++ b/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
@@ -25,9 +25,10 @@ type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
   onBottomReached: () => void;
   onTopReached: () => void;
   onScrolledAwayFromBottom: (value: boolean) => void;
+  flatListComponent?: React.ComponentType<FlatListProps<SendbirdMessage>>;
 };
 const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
-  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, flatListComponent, ...props },
   ref,
 ) {
   const { select } = useUIKitTheme();
@@ -60,8 +61,10 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
     );
   }
 
+  const FlatList = flatListComponent ?? FlatListInternal;
+
   return (
-    <FlatListInternal
+    <FlatList
       bounces={false}
       removeClippedSubviews
       keyboardDismissMode={'on-drag'}
diff --git a/packages/uikit-react-native/src/domain/groupChannel/types.ts b/packages/uikit-react-native/src/domain/groupChannel/types.ts
index 45bd7cc71..ea9c2a824 100644
--- a/packages/uikit-react-native/src/domain/groupChannel/types.ts
+++ b/packages/uikit-react-native/src/domain/groupChannel/types.ts
@@ -46,6 +46,7 @@ export interface GroupChannelProps {
     enableMessageGrouping?: GroupChannelProps['MessageList']['enableMessageGrouping'];
 
     keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
+    flatListComponent?: GroupChannelProps['MessageList']['flatListComponent'];
     flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
 
@@ -84,6 +85,7 @@ export interface GroupChannelProps {
     | 'renderMessage'
     | 'renderNewMessagesButton'
     | 'renderScrollToBottomButton'
+    | 'flatListComponent'
     | 'flatListProps'
     | 'hasNext'
     | 'searchItem'
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
index 61a18e929..366b875c2 100644
--- a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
+++ b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
@@ -60,6 +60,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     channel,
     keyboardAvoidOffset,
     sortComparator = messageComparator,
+    flatListComponent,
     flatListProps,
     messageListQueryParams,
     collectionCreator,
@@ -267,6 +268,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
             onPressMediaMessage={_onPressMediaMessage}
+            flatListComponent={flatListComponent}
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input

From c87edb26311fe41107266f3dafd63d7092d4786d Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Wed, 21 May 2025 18:28:00 +0900
Subject: [PATCH 2/2] feat: add flatListComponent to GroupChannelFragment to
 support custom FlatList in message list

---
 .../src/components/ChannelMessageList/index.tsx            | 3 +++
 .../src/components/ChatFlatList/index.tsx                  | 7 +++++--
 .../uikit-react-native/src/domain/groupChannel/types.ts    | 2 ++
 .../src/fragments/createGroupChannelFragment.tsx           | 2 ++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx b/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
index 49989dd4a..9bcc8477e 100644
--- a/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
+++ b/packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
@@ -90,6 +90,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     | null
     | ((props: { visible: boolean; onPress: () => void; newMessages: SendbirdMessage[] }) => React.ReactElement | null);
   renderScrollToBottomButton: null | ((props: { visible: boolean; onPress: () => void }) => React.ReactElement | null);
+  flatListComponent?: React.ComponentType<FlatListProps<SendbirdMessage>>;
   flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
 } & {
   ref?: Ref<FlatList<SendbirdMessage>> | undefined;
@@ -118,6 +119,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     scrolledAwayFromBottom,
     onBottomReached,
     onTopReached,
+    flatListComponent,
     flatListProps,
     onPressNewMessagesButton,
     onPressScrollToBottomButton,
@@ -165,6 +167,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
         <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
       )}
       <ChatFlatList
+        flatListComponent={flatListComponent}
         {...flatListProps}
         onTopReached={onTopReached}
         onBottomReached={onBottomReached}
diff --git a/packages/uikit-react-native/src/components/ChatFlatList/index.tsx b/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
index 241610007..70bdba050 100644
--- a/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
+++ b/packages/uikit-react-native/src/components/ChatFlatList/index.tsx
@@ -25,9 +25,10 @@ type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
   onBottomReached: () => void;
   onTopReached: () => void;
   onScrolledAwayFromBottom: (value: boolean) => void;
+  flatListComponent?: React.ComponentType<FlatListProps<SendbirdMessage>>;
 };
 const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
-  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, flatListComponent, ...props },
   ref,
 ) {
   const { select } = useUIKitTheme();
@@ -60,8 +61,10 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
     );
   }
 
+  const FlatList = flatListComponent ?? FlatListInternal;
+
   return (
-    <FlatListInternal
+    <FlatList
       bounces={false}
       removeClippedSubviews
       keyboardDismissMode={'on-drag'}
diff --git a/packages/uikit-react-native/src/domain/groupChannel/types.ts b/packages/uikit-react-native/src/domain/groupChannel/types.ts
index 45bd7cc71..ea9c2a824 100644
--- a/packages/uikit-react-native/src/domain/groupChannel/types.ts
+++ b/packages/uikit-react-native/src/domain/groupChannel/types.ts
@@ -46,6 +46,7 @@ export interface GroupChannelProps {
     enableMessageGrouping?: GroupChannelProps['MessageList']['enableMessageGrouping'];
 
     keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
+    flatListComponent?: GroupChannelProps['MessageList']['flatListComponent'];
     flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
 
@@ -84,6 +85,7 @@ export interface GroupChannelProps {
     | 'renderMessage'
     | 'renderNewMessagesButton'
     | 'renderScrollToBottomButton'
+    | 'flatListComponent'
     | 'flatListProps'
     | 'hasNext'
     | 'searchItem'
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
index 61a18e929..366b875c2 100644
--- a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
+++ b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx
@@ -60,6 +60,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     channel,
     keyboardAvoidOffset,
     sortComparator = messageComparator,
+    flatListComponent,
     flatListProps,
     messageListQueryParams,
     collectionCreator,
@@ -267,6 +268,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
             onPressMediaMessage={_onPressMediaMessage}
+            flatListComponent={flatListComponent}
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input