Merge pull request #242 from sendbird/feat/supprot-custom-flatlist

[CLNP-6807] feat: add support for custom FlatList component in message list

Author: OnestarLee

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}

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'}

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'

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