Inverted list prop (#414)

Author: radekcy

src/components/MessageList/MessageList.tsx

@@ -163,7 +163,10 @@ export type MessageListProps<
    * used in MessageList. Its footer instead of header, since message list is inverted.
    *
    */
+  FooterComponent?: React.ReactElement;
   HeaderComponent?: React.ReactElement;
+  /** Whether or not the FlatList is inverted. Defaults to true */
+  inverted?: boolean;
   /**
    * Custom UI component to display a message in MessageList component
    * Default component (accepts the same props): [MessageSimple](https://getstream.github.io/stream-chat-react-native/#messagesimple)
@@ -246,7 +249,9 @@ export const MessageList = <
     DateSeparator = DefaultDateSeparator,
     disableWhileEditing = true,
     dismissKeyboardOnMessageTouch = true,
+    FooterComponent,
     HeaderComponent,
+    inverted = true,
     Message: MessageFromProps,
     MessageNotification = DefaultMessageNotification,
     MessageSystem = DefaultMessageSystem,
@@ -278,6 +283,7 @@ export const MessageList = <
   const { t } = useTranslationContext();
 
   const messageList = useMessageList<At, Ch, Co, Ev, Me, Re, Us>({
+    inverted,
     noGroupByUser,
     threadList,
   });
@@ -417,10 +423,11 @@ export const MessageList = <
           data={messageList}
           /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
           extraData={disabled}
-          inverted
+          inverted={inverted}
           keyboardShouldPersistTaps='always'
           keyExtractor={keyExtractor}
-          ListFooterComponent={HeaderComponent}
+          ListFooterComponent={FooterComponent}
+          ListHeaderComponent={HeaderComponent}
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: 10,
             minIndexForVisible: 1,

src/components/MessageList/hooks/useMessageList.ts

@@ -25,6 +25,7 @@ import type {
 } from '../../../types/types';
 
 export type UseMessageListParams = {
+  inverted?: boolean;
   noGroupByUser?: boolean;
   threadList?: boolean;
 };
@@ -40,7 +41,7 @@ export const useMessageList = <
 >(
   params: UseMessageListParams,
 ): InsertDatesResponse<At, Ch, Co, Ev, Me, Re, Us> => {
-  const { noGroupByUser, threadList } = params;
+  const { inverted, noGroupByUser, threadList } = params;
   const { read } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { messages } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { threadMessages } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
@@ -62,17 +63,16 @@ export const useMessageList = <
     readList,
   );
 
-  return messagesWithDates
-    .map((msg) => ({
-      ...msg,
-      groupStyles:
-        !isDateSeparator<At, Ch, Co, Ev, Me, Re, Us>(msg) && msg.id
-          ? messageGroupStyles[msg.id] || []
-          : [],
-      readBy:
-        !isDateSeparator<At, Ch, Co, Ev, Me, Re, Us>(msg) && msg.id
-          ? readData[msg.id] || []
-          : [],
-    }))
-    .reverse();
+  const messagesWithDatesList = messagesWithDates.map((msg) => ({
+    ...msg,
+    groupStyles:
+      !isDateSeparator<At, Ch, Co, Ev, Me, Re, Us>(msg) && msg.id
+        ? messageGroupStyles[msg.id] || []
+        : [],
+    readBy:
+      !isDateSeparator<At, Ch, Co, Ev, Me, Re, Us>(msg) && msg.id
+        ? readData[msg.id] || []
+        : [],
+  }));
+  return inverted ? messagesWithDatesList.reverse() : messagesWithDatesList;
 };

src/components/Thread/Thread.tsx

@@ -168,7 +168,7 @@ export const Thread = <
 
   const Message = MessageFromProps || MessageFromContext;
 
-  const headerComponent = (
+  const footerComponent = (
     <>
       <DefaultMessage<At, Ch, Co, Ev, Me, Re, Us>
         groupStyles={['single']}
@@ -186,7 +186,7 @@ export const Thread = <
   return (
     <React.Fragment key={`thread-${thread.id}-${channel?.cid || ''}`}>
       <MessageList<At, Ch, Co, Ev, Me, Re, Us>
-        HeaderComponent={headerComponent}
+        FooterComponent={footerComponent}
         Message={Message}
         threadList
         {...additionalMessageListProps}