From 0290d8e0a95dceec226b40c93fc9b0739023457a Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 8 Dec 2022 15:38:16 -0300
Subject: [PATCH] [FIX] Emoji picker not opening in some cases (#4735)

---
 app/containers/MessageActions/Header.tsx | 10 ++++++----
 app/containers/MessageActions/index.tsx  |  6 +++---
 app/views/RoomView/index.tsx             | 16 +++++++++-------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index 26d35d4cc..f9c809e5e 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -14,12 +14,12 @@ import { IEmoji, TAnyMessageModel } from '../../definitions';
 import Touch from '../Touch';
 
 export interface IHeader {
-	handleReaction: (emoji: IEmoji, message: TAnyMessageModel) => void;
+	handleReaction: (emoji: IEmoji | null, message: TAnyMessageModel) => void;
 	message: TAnyMessageModel;
 	isMasterDetail: boolean;
 }
 
-type TOnReaction = ({ emoji }: { emoji: IEmoji }) => void;
+type TOnReaction = ({ emoji }: { emoji?: IEmoji }) => void;
 
 interface THeaderItem {
 	item: IEmoji;
@@ -94,8 +94,10 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
 	const quantity = Math.trunc(size / (ITEM_SIZE + ITEM_MARGIN * 2) - 1);
 
 	const onReaction: TOnReaction = ({ emoji }) => {
-		handleReaction(emoji, message);
-		addFrequentlyUsed(emoji);
+		handleReaction(emoji || null, message);
+		if (emoji) {
+			addFrequentlyUsed(emoji);
+		}
 	};
 
 	const renderItem = ({ item }: { item: IEmoji }) => <HeaderItem item={item} onReaction={onReaction} theme={theme} />;
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
index 925d14613..38d77c14e 100644
--- a/app/containers/MessageActions/index.tsx
+++ b/app/containers/MessageActions/index.tsx
@@ -285,10 +285,10 @@ const MessageActions = React.memo(
 				}
 			};
 
-			const handleReaction: IHeader['handleReaction'] = (shortname, message) => {
+			const handleReaction: IHeader['handleReaction'] = (emoji, message) => {
 				logEvent(events.ROOM_MSG_ACTION_REACTION);
-				if (shortname) {
-					onReactionPress(shortname, message.id);
+				if (emoji) {
+					onReactionPress(emoji, message.id);
 				} else {
 					setTimeout(() => reactionInit(message), ACTION_SHEET_ANIMATION_DURATION);
 				}
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index 978372aa9..96f556674 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -833,13 +833,15 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	showReactionPicker = () => {
 		const { showActionSheet } = this.props;
 		const { selectedMessage } = this.state;
-		showActionSheet({
-			children: (
-				<ReactionPicker message={selectedMessage} onEmojiSelected={this.onReactionPress} reactionClose={this.onReactionClose} />
-			),
-			snaps: [400],
-			enableContentPanningGesture: false
-		});
+		setTimeout(() => {
+			showActionSheet({
+				children: (
+					<ReactionPicker message={selectedMessage} onEmojiSelected={this.onReactionPress} reactionClose={this.onReactionClose} />
+				),
+				snaps: [400],
+				enableContentPanningGesture: false
+			});
+		}, 100);
 	};
 
 	onReactionInit = (message: TAnyMessageModel) => {