fix: 24261 user able to select 2 emoji at a time

src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -19,6 +19,7 @@ import * as User from '../../../libs/actions/User';
 import TextInput from '../../TextInput';
 import CategoryShortcutBar from '../CategoryShortcutBar';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import useSingleExecution from '../../../hooks/useSingleExecution';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -49,6 +50,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
     const [filteredEmojis, setFilteredEmojis] = useState(allEmojis);
     const [headerIndices, setHeaderIndices] = useState(headerRowIndices);
     const {windowWidth} = useWindowDimensions();
+    const {singleExecution} = useSingleExecution();
 
     useEffect(() => {
         setFilteredEmojis(allEmojis);
@@ -150,7 +152,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
 
         return (
             <EmojiPickerMenuItem
-                onPress={(emoji) => addToFrequentAndSelectEmoji(emoji, item)}
+                onPress={singleExecution((emoji) => addToFrequentAndSelectEmoji(emoji, item))}
                 emoji={emojiCode}
             />
         );

src/hooks/useSingleExecution.js

@@ -0,0 +1,39 @@
+import {InteractionManager} from 'react-native';
+import {useCallback, useState, useRef} from 'react';
+
+/**
+ * With any action passed in, it will only allow 1 such action to occur at a time.
+ *
+ * @returns {Object}
+ */
+export default function useSingleExecution() {
+    const [isExecuting, setIsExecuting] = useState(false);
+    const isExecutingRef = useRef();
+
+    isExecutingRef.current = isExecuting;
+
+    const singleExecution = useCallback(
+        (action) =>
+            (...params) => {
+                if (isExecutingRef.current) {
+                    return;
+                }
+
+                setIsExecuting(true);
+
+                const execution = action(params);
+                InteractionManager.runAfterInteractions(() => {
+                    if (!(execution instanceof Promise)) {
+                        setIsExecuting(false);
+                        return;
+                    }
+                    execution.finally(() => {
+                        setIsExecuting(false);
+                    });
+                });
+            },
+        [],
+    );
+
+    return {isExecuting, singleExecution};
+}