MM-36900 Fix mm emoji (#5526)

* wip

* fix typo

* fix snapshots

* move inside emojis

Co-authored-by: = <=>

app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap

@@ -1403,6 +1403,7 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
       "massage_man",
       "massage_woman",
       "mate_drink",
+      "mattermost",
       "mauritania",
       "mauritius",
       "mayotte",
@@ -3742,6 +3743,7 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
         "massage_man",
         "massage_woman",
         "mate_drink",
+        "mattermost",
         "mauritania",
         "mauritius",
         "mayotte",

app/components/emoji/emoji.tsx

@@ -11,6 +11,8 @@ import {
 } from 'react-native';
 import FastImage, {ImageStyle} from 'react-native-fast-image';
 
+const assetImages = new Map([['mattermost.png', require('@assets/images/emojis/mattermost.png')]]);
+
 type Props = {
 
     /*
@@ -23,6 +25,11 @@ type Props = {
      */
     imageUrl: string;
 
+    /*
+     * asset name in case it is bundled with the app
+     */
+    assetImage: string;
+
     /*
      * Set if this is a custom emoji.
      */
@@ -45,6 +52,7 @@ const Emoji: React.FC<Props> = (props: Props) => {
         customEmojiStyle,
         displayTextOnly,
         imageUrl,
+        assetImage,
         literal,
         unicode,
         testID,
@@ -88,6 +96,24 @@ const Emoji: React.FC<Props> = (props: Props) => {
         );
     }
 
+    if (assetImage) {
+        const key = Platform.OS === 'android' ? (`${assetImage}-${height}-${width}`) : null;
+
+        const image = assetImages.get(assetImage);
+        if (!image) {
+            return null;
+        }
+        return (
+            <FastImage
+                key={key}
+                source={image}
+                style={[customEmojiStyle, {width, height}]}
+                resizeMode={FastImage.resizeMode.contain}
+                testID={testID}
+            />
+        );
+    }
+
     if (!imageUrl) {
         return null;
     }

app/components/emoji/index.ts

@@ -26,11 +26,17 @@ function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
 
     let imageUrl = '';
     let unicode;
+    let assetImage = '';
     let isCustomEmoji = false;
     let displayTextOnly = false;
     if (EmojiIndicesByAlias.has(emojiName)) {
         const emoji = Emojis[EmojiIndicesByAlias.get(emojiName)!];
-        unicode = emoji.image;
+        if (emoji.category === 'custom') {
+            assetImage = emoji.fileName;
+            isCustomEmoji = true;
+        } else {
+            unicode = emoji.image;
+        }
     } else if (customEmojis.has(emojiName) && serverUrl) {
         const emoji = customEmojis.get(emojiName);
         imageUrl = Client4.getCustomEmojiImageUrl(emoji!.id);
@@ -45,6 +51,7 @@ function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
 
     return {
         imageUrl,
+        assetImage,
         isCustomEmoji,
         displayTextOnly,
         unicode,

app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap

@@ -12861,7 +12861,25 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
               "key": "flags",
             },
             Object {
-              "data": Array [],
+              "data": Array [
+                Object {
+                  "items": Array [
+                    Object {
+                      "aliases": Array [
+                        "mattermost",
+                      ],
+                      "name": "mattermost",
+                    },
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                  ],
+                  "key": "custom-0",
+                },
+              ],
               "defaultMessage": undefined,
               "icon": "emoticon-custom-outline",
               "id": "emoji_picker.custom",