[FIX] Emoji picker not opening in some cases (#4735)

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} />;

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);
 				}

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) => {