diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx index 26d35d4c..f9c809e5 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 }) => ; diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx index 925d1461..38d77c14 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 978372aa..96f55667 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -833,13 +833,15 @@ class RoomView extends React.Component { showReactionPicker = () => { const { showActionSheet } = this.props; const { selectedMessage } = this.state; - showActionSheet({ - children: ( - - ), - snaps: [400], - enableContentPanningGesture: false - }); + setTimeout(() => { + showActionSheet({ + children: ( + + ), + snaps: [400], + enableContentPanningGesture: false + }); + }, 100); }; onReactionInit = (message: TAnyMessageModel) => {