[IMPROVE] Pull down to refresh read receipts (#3427)

* [FEATURE] Pull down to refresh read receipts

This commit introduces a new feature to allow users to pull down to refresh read receipts.

* Support pull down to refresh when we renderEmpty

This adds support for the pull-down refresh to work when there are no read receipts yet.

* Removed extra new lines added while debugging.

* Minor polishing

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/views/ReadReceiptView/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, Text, View, RefreshControl } from 'react-native';
 import { dequal } from 'dequal';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
 import * as List from '../../containers/List';
 import Avatar from '../../containers/Avatar';
-import ActivityIndicator from '../../containers/ActivityIndicator';
 import * as HeaderButton from '../../containers/HeaderButton';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
@@ -85,12 +84,16 @@ class ReadReceiptView extends React.Component {
 	};
 
 	renderEmpty = () => {
+		const { loading } = this.state;
 		const { theme } = this.props;
+		if (loading) {
+			return null;
+		}
 		return (
 			<View
 				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
 				testID='read-receipt-view'>
-				<Text style={{ color: themes[theme].titleText }}>{I18n.t('No_Read_Receipts')}</Text>
+				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
@@ -107,9 +110,15 @@ class ReadReceiptView extends React.Component {
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
 						<Text style={[styles.name, { color: themes[theme].titleText }]}>{item?.user?.name}</Text>
-						<Text style={{ color: themes[theme].auxiliaryText }}>{time}</Text>
+						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 					</View>
-					<Text style={{ color: themes[theme].auxiliaryText }}>{`@${item.user.username}`}</Text>
+					<Text
+						style={[
+							styles.username,
+							{
+								color: themes[theme].auxiliaryText
+							}
+						]}>{`@${item.user.username}`}</Text>
 				</View>
 			</View>
 		);
@@ -119,20 +128,15 @@ class ReadReceiptView extends React.Component {
 		const { receipts, loading } = this.state;
 		const { theme } = this.props;
 
-		if (!loading && receipts.length === 0) {
-			return this.renderEmpty();
-		}
-
 		return (
 			<SafeAreaView testID='read-receipt-view'>
 				<StatusBar />
-				{loading ? (
-					<ActivityIndicator theme={theme} />
-				) : (
 				<FlatList
 					data={receipts}
 					renderItem={this.renderItem}
 					ItemSeparatorComponent={List.Separator}
+					ListEmptyComponent={this.renderEmpty}
+					contentContainerStyle={List.styles.contentContainerStyleFlatList}
 					style={[
 						styles.list,
 						{
@@ -140,9 +144,9 @@ class ReadReceiptView extends React.Component {
 							borderColor: themes[theme].separatorColor
 						}
 					]}
+					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
 					keyExtractor={item => item._id}
 				/>
-				)}
 			</SafeAreaView>
 		);
 	}

app/views/ReadReceiptView/styles.js

@@ -8,9 +8,14 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center'
 	},
+	emptyText: {
+		fontSize: 16,
+		...sharedStyles.textRegular
+	},
 	item: {
 		flex: 1,
 		flexDirection: 'row',
+		alignItems: 'center',
 		justifyContent: 'space-between'
 	},
 	separator: {
@@ -20,6 +25,14 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular,
 		fontSize: 17
 	},
+	username: {
+		...sharedStyles.textMedium,
+		fontSize: 14
+	},
+	time: {
+		...sharedStyles.textRegular,
+		fontSize: 12
+	},
 	infoContainer: {
 		flex: 1,
 		marginLeft: 10