regression(Android): Poor performance in messages list (#5267)

* fix: remove RefreshControl from RoomView

* fix: add container to verify android or ios

app/views/RoomView/List/components/List.tsx

@@ -43,7 +43,7 @@ export const List = ({ listRef, jumpToBottom, isThread, ...props }: IListProps)
 				keyExtractor={item => item.id}
 				contentContainerStyle={styles.contentContainer}
 				style={styles.list}
-				inverted
+				inverted={isIOS}
 				removeClippedSubviews={isIOS}
 				initialNumToRender={7}
 				onEndReachedThreshold={0.5}

app/views/RoomView/List/components/NavBottomFAB.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Platform } from 'react-native';
 
 import { CustomIcon } from '../../../../containers/CustomIcon';
 import { useTheme } from '../../../../theme';
@@ -43,7 +43,15 @@ const NavBottomFAB = ({
 			style={[
 				styles.container,
 				{
+					...Platform.select({
+						ios: {
 							bottom: 100 + (isThread ? 40 : 0)
+						},
+						android: {
+							top: 15,
+							scaleY: -1
+						}
+					})
 				}
 			]}
 			testID='nav-jump-to-bottom'

app/views/RoomView/List/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from './useMessages';
-export * from './useRefresh';
 export * from './useScroll';

app/views/RoomView/List/hooks/useRefresh.ts

@@ -1,27 +0,0 @@
-import moment from 'moment';
-import { useState } from 'react';
-
-import log from '../../../../lib/methods/helpers/log';
-import { loadMissedMessages, loadThreadMessages } from '../../../../lib/methods';
-
-export const useRefresh = ({ rid, tmid, messagesLength }: { rid: string; tmid?: string; messagesLength: number }) => {
-	const [refreshing, setRefreshing] = useState(false);
-
-	const refresh = async () => {
-		if (messagesLength) {
-			setRefreshing(true);
-			try {
-				if (tmid) {
-					await loadThreadMessages({ tmid, rid });
-				} else {
-					await loadMissedMessages({ rid, lastOpen: moment().subtract(7, 'days').toDate() });
-				}
-			} catch (e) {
-				log(e);
-			}
-			setRefreshing(false);
-		}
-	};
-
-	return [refreshing, refresh] as const;
-};

app/views/RoomView/List/index.tsx

@@ -1,12 +1,24 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { RefreshControl } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import ActivityIndicator from '../../../containers/ActivityIndicator';
-import { useMessages, useRefresh, useScroll } from './hooks';
+import { isAndroid, useDebounce } from '../../../lib/methods/helpers';
-import { isIOS, useDebounce } from '../../../lib/methods/helpers';
 import { EmptyRoom, List } from './components';
 import { IListContainerProps, IListContainerRef, IListProps } from './definitions';
-import { useTheme } from '../../../theme';
+import { useMessages, useScroll } from './hooks';
+
+const styles = StyleSheet.create({
+	inverted: {
+		...Platform.select({
+			android: {
+				scaleY: -1
+			}
+		})
+	}
+});
+
+const Container = ({ children }: { children: React.ReactElement }) =>
+	isAndroid ? <View style={{ flex: 1, scaleY: -1 }}>{children}</View> : <>{children}</>;
 
 const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 	({ rid, tmid, renderRow, showMessageInMainThread, serverVersion, hideSystemMessages, listRef, loading }, ref) => {
@@ -17,8 +29,6 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			serverVersion,
 			hideSystemMessages
 		});
-		const { colors } = useTheme();
-		const [refreshing, refresh] = useRefresh({ rid, tmid, messagesLength: messages.length });
 		const {
 			jumpToBottom,
 			jumpToMessage,
@@ -44,11 +54,14 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			return null;
 		};
 
-		const renderItem: IListProps['renderItem'] = ({ item, index }) => renderRow(item, messages[index + 1], highlightedMessageId);
+		const renderItem: IListProps['renderItem'] = ({ item, index }) => (
+			<View style={styles.inverted}>{renderRow(item, messages[index + 1], highlightedMessageId)}</View>
+		);
 
 		return (
 			<>
 				<EmptyRoom rid={rid} length={messages.length} />
+				<Container>
 					<List
 						listRef={listRef}
 						data={messages}
@@ -59,10 +72,8 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 						viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
 						jumpToBottom={jumpToBottom}
 						isThread={!!tmid}
-					refreshControl={
-						isIOS ? <RefreshControl refreshing={refreshing} onRefresh={refresh} tintColor={colors.auxiliaryText} /> : undefined
-					}
 					/>
+				</Container>
 			</>
 		);
 	}

app/views/RoomView/index.tsx

@@ -1361,8 +1361,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (showUnreadSeparator || dateSeparator) {
 			return (
 				<>
-					{content}
 					<Separator ts={dateSeparator} unread={showUnreadSeparator} />
+					{content}
 				</>
 			);
 		}