fix(Android): Remove RefreshControl from messages list (#5251)

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={isIOS}
+				inverted
 				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, Platform } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { CustomIcon } from '../../../../containers/CustomIcon';
 import { useTheme } from '../../../../theme';
@@ -43,15 +43,7 @@ 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/components/RefreshControl.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { RefreshControl as RNRefreshControl, RefreshControlProps, StyleSheet } from 'react-native';
-
-import { useTheme } from '../../../../theme';
-import { isAndroid } from '../../../../lib/methods/helpers';
-
-const style = StyleSheet.create({
-	container: {
-		flex: 1
-	},
-	inverted: {
-		scaleY: -1
-	}
-});
-
-interface IRefreshControl extends RefreshControlProps {
-	children: React.ReactElement;
-}
-
-export const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => {
-	const { colors } = useTheme();
-	if (isAndroid) {
-		return (
-			<RNRefreshControl
-				onRefresh={onRefresh}
-				refreshing={refreshing}
-				tintColor={colors.auxiliaryText}
-				style={[style.container, style.inverted]}
-			>
-				{children}
-			</RNRefreshControl>
-		);
-	}
-
-	const refreshControl = <RNRefreshControl onRefresh={onRefresh} refreshing={refreshing} tintColor={colors.auxiliaryText} />;
-
-	return React.cloneElement(children, { refreshControl });
-};

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

@@ -1,4 +1,3 @@
 export * from './NavBottomFAB';
-export * from './RefreshControl';
 export * from './EmptyRoom';
 export * from './List';

app/views/RoomView/List/index.tsx

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

app/views/RoomView/index.tsx

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