fix: properly invert list manually android (#2685)

* fix: properly invert list manually android * fix: date separator rendering * fix: wrap separator in useCallback * fix: thread snapshot test
GetStream · Sep 23, 2024 · 2b5bf07 · 2b5bf07
1 parent a703d82
commit 2b5bf07
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 13 deletions.
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -88,10 +88,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const InvertedCellRendererComponent = (props: React.PropsWithChildren<unknown>) => (
-  <View {...props} style={styles.invertAndroid} />
-);
-
 const keyExtractor = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -634,15 +630,15 @@ const MessageListWithContext = <
 
     if (message.type === 'system') {
       return (
-        <>
+        <View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
           <View testID={`message-list-item-${index}`}>
             <MessageSystem
               message={message}
               style={[{ paddingHorizontal: screenPadding }, messageContainer]}
             />
           </View>
           {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
-        </>
+        </View>
       );
     }
 
@@ -668,15 +664,23 @@ const MessageListWithContext = <
       <>
         {shouldApplyAndroidWorkaround && renderDateSeperator}
         <ThemeProvider mergedStyle={modifiedTheme}>
-          <View testID={`message-list-item-${index}`}>{renderMessage}</View>
+          <View
+            style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+            testID={`message-list-item-${index}`}
+          >
+            {renderMessage}
+          </View>
         </ThemeProvider>
         {!shouldApplyAndroidWorkaround && renderDateSeperator}
         {/* Adding indicator below the messages, since the list is inverted */}
         {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
       </>
     ) : (
       <>
-        <View testID={`message-list-item-${index}`}>
+        <View
+          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+          testID={`message-list-item-${index}`}
+        >
           {shouldApplyAndroidWorkaround && renderDateSeperator}
           {renderMessage}
         </View>
@@ -1081,14 +1085,28 @@ const MessageListWithContext = <
     [shouldApplyAndroidWorkaround, HeaderComponent],
   );
 
+  const ItemSeparatorComponent = additionalFlatListProps?.ItemSeparatorComponent;
+  const WrappedItemSeparatorComponent = useCallback(
+    () => (
+      <View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
+        {ItemSeparatorComponent ? <ItemSeparatorComponent /> : null}
+      </View>
+    ),
+    [ItemSeparatorComponent, shouldApplyAndroidWorkaround],
+  );
+
   // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
   let additionalFlatListPropsExcludingStyle:
-    | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
+    | Omit<
+        NonNullable<typeof additionalFlatListProps>,
+        'style' | 'contentContainerStyle' | 'ItemSeparatorComponent'
+      >
     | undefined;
 
   if (additionalFlatListProps) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { contentContainerStyle, style, ...rest } = additionalFlatListProps;
+    const { contentContainerStyle, ItemSeparatorComponent, style, ...rest } =
+      additionalFlatListProps;
     additionalFlatListPropsExcludingStyle = rest;
   }
 
@@ -1114,9 +1132,6 @@ const MessageListWithContext = <
         </View>
       ) : (
         <FlatList
-          CellRendererComponent={
-            shouldApplyAndroidWorkaround ? InvertedCellRendererComponent : undefined
-          }
           contentContainerStyle={[
             styles.contentContainer,
             additionalFlatListProps?.contentContainerStyle,
@@ -1126,6 +1141,7 @@ const MessageListWithContext = <
           data={processedMessageList}
           extraData={disabled || !hasNoMoreRecentMessagesToLoad}
           inverted={shouldApplyAndroidWorkaround ? false : inverted}
+          ItemSeparatorComponent={WrappedItemSeparatorComponent}
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={ListFooterComponent}

diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -34,6 +34,7 @@ exports[`Thread should match thread snapshot 1`] = `
       testID="message-flat-list-wrapper"
     >
       <RCTScrollView
+        ItemSeparatorComponent={[Function]}
         ListFooterComponent={null}
         ListHeaderComponent={[Function]}
         contentContainerStyle={
@@ -240,6 +241,11 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
+              style={
+                [
+                  undefined,
+                ]
+              }
               testID="message-list-item-0"
             >
               <View
@@ -534,6 +540,13 @@ exports[`Thread should match thread snapshot 1`] = `
                 </View>
               </View>
             </View>
+            <View
+              style={
+                [
+                  undefined,
+                ]
+              }
+            />
           </View>
           <View
             onFocusCapture={[Function]}
@@ -554,6 +567,11 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
+              style={
+                [
+                  undefined,
+                ]
+              }
               testID="message-list-item-1"
             >
               <View
@@ -848,6 +866,13 @@ exports[`Thread should match thread snapshot 1`] = `
                 </View>
               </View>
             </View>
+            <View
+              style={
+                [
+                  undefined,
+                ]
+              }
+            />
           </View>
           <View
             onFocusCapture={[Function]}
@@ -868,6 +893,11 @@ exports[`Thread should match thread snapshot 1`] = `
             }
           >
             <View
+              style={
+                [
+                  undefined,
+                ]
+              }
               testID="message-list-item-2"
             >
               <View