From 28f869a80cd18be8027bf509960a001120524fd7 Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Thu, 14 Jul 2022 19:25:44 +0530
Subject: [PATCH] Fix reaction picker not opening

---
 app/containers/ActionSheet/ActionSheet.tsx   | 2 +-
 app/containers/MessageActions/index.tsx      | 3 ++-
 app/containers/MessageBox/EmojiSearchbar.tsx | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index e520d482c..7ee96e0c3 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -140,7 +140,7 @@ const ActionSheet = React.memo(
 						style={{ ...styles.container, ...bottomSheet }}
 						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
 						onChange={index => index === -1 && onClose()}
-						activeOffsetY={[-1, 1]}
+						activeOffsetY={[-5, 5]}
 						failOffsetX={[-5, 5]}
 						{...androidTablet}
 					>
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
index 395f5f87d..ad10b28fc 100644
--- a/app/containers/MessageActions/index.tsx
+++ b/app/containers/MessageActions/index.tsx
@@ -264,7 +264,8 @@ const MessageActions = React.memo(
 					// TODO: evaluate unification with IEmoji
 					onReactionPress(shortname as any, message.id);
 				} else {
-					reactionInit(message);
+					// Wait for the Action Sheet to close before opening reaction picker
+					setTimeout(() => reactionInit(message), 500);
 				}
 				// close actionSheet when click at header
 				hideActionSheet();
diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx
index 506020070..f54b474ac 100644
--- a/app/containers/MessageBox/EmojiSearchbar.tsx
+++ b/app/containers/MessageBox/EmojiSearchbar.tsx
@@ -23,7 +23,7 @@ interface IEmojiSearchbarProps {
 }
 
 const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
-	if (emoji.name) {
+	if (emoji?.name) {
 		return <CustomEmoji style={{ height: size, width: size, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
 	}
 	return <Text style={[styles.searchedEmoji, { fontSize: size }]}>{shortnameToUnicode(`:${emoji}:`)}</Text>;
@@ -82,7 +82,7 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 						</View>
 					)}
 					// @ts-ignore
-					keyExtractor={item => item.name || item}
+					keyExtractor={item => item?.name || item}
 					contentContainerStyle={styles.emojiListContainer}
 					keyboardShouldPersistTaps='always'
 				/>