From d9fa16977e6e95e06b089abbf587b927303f3001 Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Sat, 30 Jul 2022 16:45:42 +0530
Subject: [PATCH] Add prop enableContentPanningGesture to action sheet

---
 app/containers/ActionSheet/ActionSheet.tsx   | 3 ++-
 app/containers/MessageBox/EmojiSearchbar.tsx | 7 ++++---
 app/views/RoomView/ReactionPicker.tsx        | 2 +-
 app/views/RoomView/index.tsx                 | 3 ++-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index 3a715bdea..5f2493692 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -140,7 +140,8 @@ const ActionSheet = React.memo(
 						style={{ ...styles.container, ...bottomSheet }}
 						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
 						onChange={index => index === -1 && onClose()}
-						enableContentPanningGesture={false}
+						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
+						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
 						{...androidTablet}
 					>
 						<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />
diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx
index 66a861f36..955be5316 100644
--- a/app/containers/MessageBox/EmojiSearchbar.tsx
+++ b/app/containers/MessageBox/EmojiSearchbar.tsx
@@ -63,7 +63,7 @@ const EmojiSearchBar = React.forwardRef<TextInput, IEmojiSearchBarProps>(
 			onChangeText(text);
 		};
 
-		const renderItem = React.memo((emoji: IEmoji) => (
+		const ListItem = React.memo(({ emoji }: { emoji: IEmoji }) => (
 			<View style={[styles.emojiContainer]}>
 				<Pressable onPress={() => onEmojiSelected(emoji)}>
 					<Emoji emoji={emoji} baseUrl={baseUrl} />
@@ -76,7 +76,7 @@ const EmojiSearchBar = React.forwardRef<TextInput, IEmojiSearchBarProps>(
 				<FlatList
 					horizontal
 					data={searchText ? emojis : frequentlyUsedEmojis}
-					renderItem={({ item }) => renderItem(item as IEmoji)}
+					renderItem={({ item }) => <ListItem emoji={item as IEmoji} />}
 					showsHorizontalScrollIndicator={false}
 					ListEmptyComponent={() => (
 						<View style={styles.listEmptyComponent}>
@@ -92,7 +92,8 @@ const EmojiSearchBar = React.forwardRef<TextInput, IEmojiSearchBarProps>(
 					<Pressable
 						style={({ pressed }: { pressed: boolean }) => [styles.openEmojiKeyboard, { opacity: pressed ? 0.7 : 1 }]}
 						onPress={openEmoji}
-						hitSlop={BUTTON_HIT_SLOP}>
+						hitSlop={BUTTON_HIT_SLOP}
+					>
 						<CustomIcon name='chevron-left' size={30} color={colors.collapsibleChevron} />
 					</Pressable>
 					<View style={{ flex: 1 }}>
diff --git a/app/views/RoomView/ReactionPicker.tsx b/app/views/RoomView/ReactionPicker.tsx
index 9b0c59759..853812a3e 100644
--- a/app/views/RoomView/ReactionPicker.tsx
+++ b/app/views/RoomView/ReactionPicker.tsx
@@ -83,7 +83,7 @@ const ReactionPicker = ({ onEmojiSelected, message, reactionClose }: IReactionPi
 					returnKeyType='search'
 					underlineColorAndroid='transparent'
 					onChangeText={handleTextChange}
-					style={[styles.reactionPickerSearchbar, { backgroundColor: colors.passcodeButtonActive }]}
+					style={[styles.reactionPickerSearchbar, { backgroundColor: colors.borderColor }]}
 					value={searchText}
 					onClearInput={() => handleTextChange('')}
 					iconRight={'search'}
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index b8dc53749..9a01d33c9 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -842,7 +842,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					height={height}
 				/>
 			),
-			snaps: [400, '100%']
+			snaps: [400, '100%'],
+			enableContentPanningGesture: false
 		});
 	};