fix: unread indicator inverted issue on android

Author: khushal87

package/src/components/MessageList/MessageList.tsx

@@ -638,6 +638,20 @@ const MessageListWithContext = <
       scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1); // show only if previous message is read
 
+    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>
+      );
+    }
+
     const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
     const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
       message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
@@ -657,31 +671,36 @@ const MessageListWithContext = <
       />
     );
 
-    return (
-      <View
-        style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-        testID={`message-list-item-${index}`}
-      >
-        {insertInlineUnreadIndicator ? <InlineUnreadIndicator /> : null}
-        {message.type === 'system' ? (
-          <MessageSystem
-            message={message}
-            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-          />
-        ) : wrapMessageInTheme ? (
-          <ThemeProvider mergedStyle={modifiedTheme}>
-            <View testID={`message-list-item-${index}`}>
-              {renderDateSeperator}
-              {renderMessage}
-            </View>
-          </ThemeProvider>
-        ) : (
-          <View testID={`message-list-item-${index}`}>
-            {renderDateSeperator}
+    return wrapMessageInTheme ? (
+      <>
+        <ThemeProvider mergedStyle={modifiedTheme}>
+          <View
+            style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+            testID={`message-list-item-${index}`}
+          >
+            {shouldApplyAndroidWorkaround && insertInlineUnreadIndicator && (
+              <InlineUnreadIndicator />
+            )}
+            {shouldApplyAndroidWorkaround && renderDateSeperator}
             {renderMessage}
           </View>
-        )}
-      </View>
+        </ThemeProvider>
+        {!shouldApplyAndroidWorkaround && renderDateSeperator}
+        {!shouldApplyAndroidWorkaround && insertInlineUnreadIndicator && <InlineUnreadIndicator />}
+      </>
+    ) : (
+      <>
+        <View
+          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+          testID={`message-list-item-${index}`}
+        >
+          {shouldApplyAndroidWorkaround && insertInlineUnreadIndicator && <InlineUnreadIndicator />}
+          {shouldApplyAndroidWorkaround && renderDateSeperator}
+          {renderMessage}
+        </View>
+        {!shouldApplyAndroidWorkaround && renderDateSeperator}
+        {!shouldApplyAndroidWorkaround && insertInlineUnreadIndicator && <InlineUnreadIndicator />}
+      </>
     );
   };