use the correct skin tone when selecting an emoji from the picker (#7125)

app/components/touchable_emoji/index.tsx

@@ -25,19 +25,13 @@ const hitSlop = {top: 10, bottom: 10, left: 10, right: 10};
 const TouchableEmoji = ({category, name, onEmojiPress, size = 30, style}: Props) => {
     const onPress = useCallback(preventDoubleTap(() => onEmojiPress(name)), []);
 
-    let emoji;
     if (category && CATEGORIES_WITH_SKINS.includes(category)) {
-        emoji = (
+        return (
             <SkinnedEmoji
                 name={name}
+                onEmojiPress={onEmojiPress}
                 size={size}
-            />
-        );
-    } else {
-        emoji = (
-            <Emoji
-                emojiName={name}
-                size={size}
+                style={style}
             />
         );
     }
@@ -52,7 +46,10 @@ const TouchableEmoji = ({category, name, onEmojiPress, size = 30, style}: Props)
                 style={style}
                 type={'opacity'}
             >
-                {emoji}
+                <Emoji
+                    emojiName={name}
+                    size={size}
+                />
             </TouchableWithFeedback>
         </View>
     );

app/components/touchable_emoji/skinned_emoji.tsx

@@ -1,19 +1,26 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
 
 import {useEmojiSkinTone} from '@app/hooks/emoji_category_bar';
+import {preventDoubleTap} from '@app/utils/tap';
 import Emoji from '@components/emoji';
+import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {skinCodes} from '@utils/emoji';
 import {isValidNamedEmoji} from '@utils/emoji/helpers';
 
 type Props = {
     name: string;
+    onEmojiPress: (emoji: string) => void;
     size?: number;
+    style?: StyleProp<ViewStyle>;
 }
 
-const SkinnedEmoji = ({name, size = 30}: Props) => {
+const hitSlop = {top: 10, bottom: 10, left: 10, right: 10};
+
+const SkinnedEmoji = ({name, onEmojiPress, size = 30, style}: Props) => {
     const skinTone = useEmojiSkinTone();
     const emojiName = useMemo(() => {
         const skinnedEmoji = `${name}_${skinCodes[skinTone]}`;
@@ -23,11 +30,26 @@ const SkinnedEmoji = ({name, size = 30}: Props) => {
         return skinnedEmoji;
     }, [name, skinTone]);
 
+    const onPress = useCallback(preventDoubleTap(() => {
+        onEmojiPress(emojiName);
+    }), [emojiName]);
+
     return (
-        <Emoji
-            emojiName={emojiName}
-            size={size}
-        />
+        <View
+            style={style}
+        >
+            <TouchableWithFeedback
+                hitSlop={hitSlop}
+                onPress={onPress}
+                style={style}
+                type={'opacity'}
+            >
+                <Emoji
+                    emojiName={emojiName}
+                    size={size}
+                />
+            </TouchableWithFeedback>
+        </View>
     );
 };