From f9164cf0f19e561a78d70f3b0e67965a0e5c866e Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Tue, 28 Jun 2022 20:11:52 +0530
Subject: [PATCH] Add ListEmptyComponent

---
 app/containers/EmojiPicker/Footer.tsx        |  8 +++++---
 app/containers/MessageBox/EmojiSearchbar.tsx | 20 ++++++++++++--------
 app/containers/MessageBox/styles.ts          | 11 ++++++++---
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx
index cd602b621..e2972cbda 100644
--- a/app/containers/EmojiPicker/Footer.tsx
+++ b/app/containers/EmojiPicker/Footer.tsx
@@ -7,16 +7,18 @@ import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import { IFooterProps } from './interfaces';
 
+const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
+
 const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps) => {
 	const { colors } = useTheme();
 	return (
 		<View style={[styles.footerContainer, { backgroundColor: colors.bannerBackground }]}>
 			<BorderlessButton activeOpacity={0.7} onPress={onSearchPressed} style={styles.footerButtonsContainer}>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
+				<CustomIcon color={colors.auxiliaryTintColor} size={25} name='search' />
 			</BorderlessButton>
 
-			<TouchableOpacity activeOpacity={0.7} onPress={onBackspacePressed}>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
+			<TouchableOpacity activeOpacity={0.7} onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP}>
+				<CustomIcon color={colors.auxiliaryTintColor} size={25} name='backspace' />
 			</TouchableOpacity>
 		</View>
 	);
diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx
index 433da45c8..ad46eaf1a 100644
--- a/app/containers/MessageBox/EmojiSearchbar.tsx
+++ b/app/containers/MessageBox/EmojiSearchbar.tsx
@@ -12,6 +12,8 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';
 import styles from './styles';
 
+const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
+
 interface IEmojiSearchbarProps {
 	openEmoji: () => void;
 	onChangeText: (value: string) => void;
@@ -61,29 +63,31 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 			const emojiSize = 30;
 			return (
 				<View style={[styles.emojiContainer]}>
-					<TouchableOpacity
-						activeOpacity={0.7}
-						// @ts-ignore
-						key={emoji && emoji.isCustom ? emoji.content : emoji}
-						onPress={() => onEmojiSelected(emoji)}>
+					<TouchableOpacity activeOpacity={0.7} onPress={() => onEmojiSelected(emoji)}>
 						{renderEmoji(emoji, emojiSize, baseUrl)}
 					</TouchableOpacity>
 				</View>
 			);
 		};
 		return (
-			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor }}>
+			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
 				<FlatList
 					horizontal
 					data={searchText ? emojis : frequentlyUsed}
 					renderItem={({ item }) => renderItem(item)}
 					showsHorizontalScrollIndicator={false}
-					keyExtractor={item => item.name || item.content}
+					ListEmptyComponent={() => (
+						<View style={styles.listEmptyComponent}>
+							<Text style={{ color: colors.auxiliaryText }}>{I18n.t('No_results_found')}</Text>
+						</View>
+					)}
+					// @ts-ignore
+					keyExtractor={item => item.name || item}
 					contentContainerStyle={styles.emojiListContainer}
 					keyboardShouldPersistTaps='always'
 				/>
 				<View style={styles.emojiSearchbarContainer}>
-					<TouchableOpacity style={styles.openEmojiKeyboard} activeOpacity={0.7} onPress={openEmoji}>
+					<TouchableOpacity style={styles.openEmojiKeyboard} activeOpacity={0.7} onPress={openEmoji} hitSlop={BUTTON_HIT_SLOP}>
 						<CustomIcon name='chevron-left' size={30} color={colors.collapsibleChevron} />
 					</TouchableOpacity>
 					<View style={{ flex: 1 }}>
diff --git a/app/containers/MessageBox/styles.ts b/app/containers/MessageBox/styles.ts
index 3ea66b6cb..f3b02dcc5 100644
--- a/app/containers/MessageBox/styles.ts
+++ b/app/containers/MessageBox/styles.ts
@@ -163,15 +163,20 @@ export default StyleSheet.create({
 		color: '#ffffff'
 	},
 	emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
-	emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5 },
+	emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 },
 	emojiSearchbarContainer: {
 		flexDirection: 'row',
 		height: 50,
-		marginBottom: 10,
+		marginBottom: 15,
 		justifyContent: 'center',
 		alignItems: 'center'
 	},
 	openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
 	emojiSearchbar: { padding: 10, borderRadius: 5 },
-	textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 }
+	textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 },
+	listEmptyComponent: {
+		width: '100%',
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
 });