diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js
index 5aa27ef2b..df97cc007 100644
--- a/lib/shared/reaction-utils.js
+++ b/lib/shared/reaction-utils.js
@@ -1,108 +1,125 @@
 // @flow
 
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import { threadHasPermission } from './thread-utils.js';
 import { stringForUserExplicit } from './user-utils.js';
 import { useENSNames } from '../hooks/ens-cache.js';
 import type { ReactionInfo } from '../selectors/chat-selectors.js';
 import type {
   RobotextMessageInfo,
   ComposableMessageInfo,
 } from '../types/message-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type ThreadInfo } from '../types/thread-types.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 function stringForReactionList(reactions: ReactionInfo): string {
   const reactionText = [];
 
   for (const reaction in reactions) {
     const reactionInfo = reactions[reaction];
 
     reactionText.push(reaction);
     const { length: numberOfReacts } = reactionInfo.users;
     if (numberOfReacts <= 1) {
       continue;
     }
     reactionText.push(numberOfReacts > 9 ? '9+' : numberOfReacts.toString());
   }
 
   return reactionText.join(' ');
 }
 
+function getViewerAlreadySelectedMessageReactions(
+  reactions: ReactionInfo,
+): $ReadOnlyArray<string> {
+  const alreadySelectedEmojis = [];
+
+  for (const reaction in reactions) {
+    const reactionInfo = reactions[reaction];
+
+    if (reactionInfo.viewerReacted) {
+      alreadySelectedEmojis.push(reaction);
+    }
+  }
+
+  return alreadySelectedEmojis;
+}
+
 type MessageReactionListInfo = {
   +id: string,
   +isViewer: boolean,
   +reaction: string,
   +username: string,
 };
 
 function useMessageReactionsList(
   reactions: ReactionInfo,
 ): $ReadOnlyArray<MessageReactionListInfo> {
   const withoutENSNames = React.useMemo(() => {
     const result = [];
 
     for (const reaction in reactions) {
       const reactionInfo = reactions[reaction];
 
       reactionInfo.users.forEach(user => {
         result.push({
           ...user,
           username: stringForUserExplicit(user),
           reaction,
         });
       });
     }
 
     const sortByNumReactions = (reactionInfo: MessageReactionListInfo) => {
       const numOfReactions = reactions[reactionInfo.reaction].users.length;
       return numOfReactions ? -numOfReactions : 0;
     };
 
     return _sortBy(
       ([sortByNumReactions, 'username']: $ReadOnlyArray<
         ((reactionInfo: MessageReactionListInfo) => mixed) | string,
       >),
     )(result);
   }, [reactions]);
   return useENSNames<MessageReactionListInfo>(withoutENSNames);
 }
 
 function useCanCreateReactionFromMessage(
   threadInfo: ThreadInfo,
   targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const targetMessageCreatorRelationship = useSelector(
     state =>
       state.userStore.userInfos[targetMessageInfo.creator.id]
         ?.relationshipStatus,
   );
 
   if (
     !targetMessageInfo.id ||
     threadInfo.sourceMessageID === targetMessageInfo.id
   ) {
     return false;
   }
 
   const creatorRelationshipHasBlock =
     targetMessageCreatorRelationship &&
     relationshipBlockedInEitherDirection(targetMessageCreatorRelationship);
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.REACT_TO_MESSAGE,
   );
 
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
 export {
   stringForReactionList,
+  getViewerAlreadySelectedMessageReactions,
   useMessageReactionsList,
   useCanCreateReactionFromMessage,
 };
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
index 74be16fa0..10d3461eb 100644
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -1,182 +1,188 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
-import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
+import {
+  getViewerAlreadySelectedMessageReactions,
+  useCanCreateReactionFromMessage,
+} from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerMultimediaMessage } from './inner-multimedia-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, Extrapolate, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function noop() {}
 
 type Props = {
   +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>,
   +route: TooltipRoute<'MultimediaMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function MultimediaMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const innerMultimediaMessage = React.useMemo(
     () => (
       <InnerMultimediaMessage
         item={item}
         verticalBounds={verticalBounds}
         clickable={false}
         setClickable={noop}
         onPress={navigation.goBackOnce}
         onLongPress={navigation.goBackOnce}
       />
     ),
     [item, navigation.goBackOnce, verticalBounds],
   );
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(() => [], []);
+  const alreadySelectedEmojis = React.useMemo(
+    () => getViewerAlreadySelectedMessageReactions(item.reactions),
+    [item.reactions],
+  );
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         {innerMultimediaMessage}
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </>
   );
 }
 
 export default MultimediaMessageTooltipButton;
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
index b32f0e4a4..00d409c0a 100644
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -1,164 +1,170 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
-import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
+import {
+  getViewerAlreadySelectedMessageReactions,
+  useCanCreateReactionFromMessage,
+} from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>,
   +route: TooltipRoute<'RobotextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function RobotextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning="center"
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(() => [], []);
+  const alreadySelectedEmojis = React.useMemo(
+    () => getViewerAlreadySelectedMessageReactions(item.reactions),
+    [item.reactions],
+  );
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <Timestamp time={item.messageInfo.time} display="modal" />
         </Animated.View>
         {reactionSelectionPopover}
         <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </>
   );
 }
 
 export default RobotextMessageTooltipButton;
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
index 499b12b54..45996265b 100644
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -1,188 +1,194 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
-import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
+import {
+  getViewerAlreadySelectedMessageReactions,
+  useCanCreateReactionFromMessage,
+} from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerTextMessage } from './inner-text-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import { MessagePressResponderContext } from './message-press-responder-context.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'TextMessageTooltipModal'>,
   +route: TooltipRoute<'TextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function TextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const messagePressResponderContext = React.useMemo(
     () => ({
       onPressMessage: navigation.goBackOnce,
     }),
     [navigation.goBackOnce],
   );
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     emoji => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(() => [], []);
+  const alreadySelectedEmojis = React.useMemo(
+    () => getViewerAlreadySelectedMessageReactions(item.reactions),
+    [item.reactions],
+  );
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={messageContainerStyle}>
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         <MessagePressResponderContext.Provider
           value={messagePressResponderContext}
         >
           <InnerTextMessage
             item={item}
             onPress={navigation.goBackOnce}
             threadColorOverride={threadColorOverride}
             isThreadColorDarkOverride={isThreadColorDarkOverride}
           />
         </MessagePressResponderContext.Provider>
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
       />
     </MessageListContextProvider>
   );
 }
 
 export default TextMessageTooltipButton;
diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js
index 194c979c1..60ef4b3e2 100644
--- a/native/components/emoji-keyboard.react.js
+++ b/native/components/emoji-keyboard.react.js
@@ -1,101 +1,107 @@
 // @flow
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import _flatMap from 'lodash/fp/flatMap.js';
 import _flow from 'lodash/fp/flow.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import * as React from 'react';
 import EmojiPicker, { useRecentPicksPersistence } from 'rn-emoji-keyboard';
 import emojisData from 'rn-emoji-keyboard/src/assets/emojis.json';
 
 const STORAGE_KEY = 'EMOJI_KEYBOARD_RECENT';
 
 const categoryOrder = [
   'recently_used',
   'smileys_emotion',
   'people_body',
   'animals_nature',
   'food_drink',
   'travel_places',
   'activities',
   'objects',
   'symbols',
   'flags',
   'search',
 ];
 
 const initializationCallback = async () => {
   const recentlyUsedEmojis = await AsyncStorage.getItem(STORAGE_KEY);
   return JSON.parse(recentlyUsedEmojis ?? '[]');
 };
 
 const onStateChangeCallback = async nextRecentlyUsedEmojis => {
   await AsyncStorage.setItem(
     STORAGE_KEY,
     JSON.stringify(nextRecentlyUsedEmojis),
   );
 };
 
 const useRecentPicksPersistenceArgs = {
   initialization: initializationCallback,
   onStateChange: onStateChangeCallback,
 };
 const keyedEmojiData = _flow(_flatMap('data'), _keyBy('emoji'))(emojisData);
 
 export type EmojiSelection = {
   +emoji: string,
   +name: string,
   +slug: string,
   +unicode_version: string,
   +toneEnabled: string,
   +alreadySelected?: boolean,
 };
 
 type Props = {
   +onEmojiSelected: (emoji: EmojiSelection) => mixed,
   +emojiKeyboardOpen: boolean,
   +onEmojiKeyboardClose: () => mixed,
   +selectMultipleEmojis?: boolean,
   +alreadySelectedEmojis: $ReadOnlyArray<string>,
 };
 
 function EmojiKeyboard(props: Props): React.Node {
   const {
     onEmojiSelected,
     emojiKeyboardOpen,
     onEmojiKeyboardClose,
     selectMultipleEmojis,
     alreadySelectedEmojis,
   } = props;
 
   const [currentlySelected, setCurrentlySelected] = React.useState<
     $ReadOnlyArray<string>,
   >(() => alreadySelectedEmojis.map(emoji => keyedEmojiData[emoji].name));
 
   const handleOnEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       if (!selectMultipleEmojis) {
         setCurrentlySelected([emoji.name]);
+      } else if (emoji.alreadySelected) {
+        setCurrentlySelected(prev =>
+          prev.filter(emojiName => emojiName !== emoji.name),
+        );
+      } else {
+        setCurrentlySelected(prev => [...prev, emoji.name]);
       }
       onEmojiSelected(emoji);
     },
     [onEmojiSelected, setCurrentlySelected, selectMultipleEmojis],
   );
 
   useRecentPicksPersistence(useRecentPicksPersistenceArgs);
 
   return (
     <EmojiPicker
       onEmojiSelected={handleOnEmojiSelected}
       open={emojiKeyboardOpen}
       onClose={onEmojiKeyboardClose}
       enableSearchBar
       enableSearchAnimation={false}
       enableRecentlyUsed
       categoryOrder={categoryOrder}
       selectedEmojis={currentlySelected}
     />
   );
 }
 
 export default EmojiKeyboard;