Add Custom Emojis with Unicode Private User Area with a new font

android/app/src/main/java/com/expensify/chat/MainApplication.kt

@@ -63,10 +63,10 @@ class MainApplication : MultiDexApplication(), ReactApplication {
 
     override fun onCreate() {
         super.onCreate()
+        ReactFontManager.getInstance().addCustomFont(this, "Custom Emoji Font", R.font.custom_emoji_font)
         ReactFontManager.getInstance().addCustomFont(this, "Expensify New Kansas", R.font.expensify_new_kansas)
         ReactFontManager.getInstance().addCustomFont(this, "Expensify Neue", R.font.expensify_neue)
         ReactFontManager.getInstance().addCustomFont(this, "Expensify Mono", R.font.expensify_mono)
-
         RNPerformance.getInstance().mark("appCreationStart", false);
 
         if (isOnfidoProcess()) {

android/app/src/main/res/font/custom_emoji_font.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+  <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/custom_emoji_native_font"/>
+</font-family>

android/link-assets-manifest.json

@@ -1,6 +1,10 @@
 {
   "migIndex": 2,
   "data": [
+    {
+      "path": "assets/fonts/native/CustomEmojiNativeFont.ttf",
+      "sha1": "83acdb6db84b418c51037af51f96ff9c18273a62"
+    },
     {
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
       "sha1": "d70e12540200613e9e6ac9068bed57e4bf477bfe"

assets/css/fonts.css

@@ -73,6 +73,11 @@
     src: url('/fonts/seguiemj.ttf');
 }
 
+@font-face {
+    font-family: Custom Emoji Font;
+    src: url('/fonts/CustomEmojiWebFont.ttf') format('truetype');
+}
+
 * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

assets/emojis/common.ts

@@ -7,6 +7,7 @@ import TravelAndPlaces from '@assets/images/emojiCategoryIcons/plane.svg';
 import AnimalsAndNature from '@assets/images/emojiCategoryIcons/plant.svg';
 import Activities from '@assets/images/emojiCategoryIcons/soccer-ball.svg';
 import FrequentlyUsed from '@assets/images/history.svg';
+import CONST from '@src/CONST';
 import type {HeaderEmoji, PickerEmojis} from './types';
 
 const skinTones = [
@@ -7862,6 +7863,10 @@ const emojis: PickerEmojis = [
         name: 'wales',
         code: '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
     },
+    {
+        name: 'global_create',
+        code: CONST.CUSTOM_EMOJIS.GLOBAL_CREATE,
+    },
 ];
 
 const categoryFrequentlyUsed: HeaderEmoji = {

assets/emojis/en.ts

@@ -5613,6 +5613,9 @@ const enEmojis: EmojisList = {
     '🏴󠁧󠁢󠁷󠁬󠁳󠁿': {
         keywords: ['flag'],
     },
+    '\uE100': {
+        keywords: ['fab', 'floating', 'action', 'button', 'green', 'plus'],
+    },
 };
 
 export default enEmojis;

assets/emojis/es.ts

@@ -7483,6 +7483,10 @@ const esEmojis: EmojisList = {
         name: 'gales',
         keywords: ['bandera', 'bandera-gales'],
     },
+    '\uE100': {
+        name: 'crear-global',
+        keywords: ['fab', 'flotante', 'acción', 'botón', 'verde', 'más'],
+    },
 };
 
 export default esEmojis;

ios/NewExpensify.xcodeproj/project.pbxproj

@@ -48,6 +48,7 @@
 		ED222ED90E074A5481A854FA /* ExpensifyNeue-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 8B28D84EF339436DBD42A203 /* ExpensifyNeue-BoldItalic.otf */; };
 		F0C450EA2705020500FD2970 /* colors.json in Resources */ = {isa = PBXBuildFile; fileRef = F0C450E92705020500FD2970 /* colors.json */; };
 		FF941A8D48F849269AB85C9A /* ExpensifyNewKansas-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 44BF435285B94E5B95F90994 /* ExpensifyNewKansas-Medium.otf */; };
+		59164B2F48344A53975791A9 /* CustomEmojiNativeFont.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B42BBCC5FB8E4E40B1A9202C /* CustomEmojiNativeFont.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -158,6 +159,7 @@
 		F0C450E92705020500FD2970 /* colors.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; name = colors.json; path = ../colors.json; sourceTree = "<group>"; };
 		F4F8A052A22040339996324B /* ExpensifyNeue-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Regular.otf"; path = "../assets/fonts/native/ExpensifyNeue-Regular.otf"; sourceTree = "<group>"; };
 		F8839E9820F4C312BD1C9339 /* Pods-NewExpensify.releasedevelopment.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-NewExpensify.releasedevelopment.xcconfig"; path = "Target Support Files/Pods-NewExpensify/Pods-NewExpensify.releasedevelopment.xcconfig"; sourceTree = "<group>"; };
+		B42BBCC5FB8E4E40B1A9202C /* CustomEmojiNativeFont.ttf */ = {isa = PBXFileReference; name = "CustomEmojiNativeFont.ttf"; path = "../assets/fonts/native/CustomEmojiNativeFont.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -319,6 +321,7 @@
 				8B28D84EF339436DBD42A203 /* ExpensifyNeue-BoldItalic.otf */,
 				BF6A4C5167244B9FB8E4D4E3 /* ExpensifyNeue-Italic.otf */,
 				F4F8A052A22040339996324B /* ExpensifyNeue-Regular.otf */,
+				B42BBCC5FB8E4E40B1A9202C /* CustomEmojiNativeFont.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -491,6 +494,7 @@
 				D27CE6B77196EF3EF450EEAC /* PrivacyInfo.xcprivacy in Resources */,
 				524F95D57E75496EBD14B0AA /* ExpensifyMono-BoldItalic.otf in Resources */,
 				0F749C2B3B8F4562B816DEAB /* BuildFile in Resources */,
+				59164B2F48344A53975791A9 /* CustomEmojiNativeFont.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/NewExpensify/Info.plist

@@ -99,6 +99,7 @@
 		<string>ExpensifyNeue-BoldItalic.otf</string>
 		<string>ExpensifyNeue-Italic.otf</string>
 		<string>ExpensifyNeue-Regular.otf</string>
+		<string>CustomEmojiNativeFont.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/link-assets-manifest.json

@@ -1,6 +1,10 @@
 {
   "migIndex": 2,
   "data": [
+    {
+      "path": "assets/fonts/native/CustomEmojiNativeFont.ttf",
+      "sha1": "83acdb6db84b418c51037af51f96ff9c18273a62"
+    },
     {
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
       "sha1": "d70e12540200613e9e6ac9068bed57e4bf477bfe"

package.json

@@ -86,7 +86,7 @@
     "@expensify/nitro-utils": "file:./modules/ExpensifyNitroUtils",
     "@expensify/react-native-background-task": "file:./modules/background-task",
     "@expensify/react-native-hybrid-app": "file:./modules/hybrid-app",
-    "@expensify/react-native-live-markdown": "0.1.288",
+    "@expensify/react-native-live-markdown": "0.1.289",
     "@expensify/react-native-wallet": "^0.1.5",
     "@expo/metro-runtime": "^5.0.4",
     "@firebase/app": "^0.10.10",

src/CONST/index.ts

@@ -1727,6 +1727,10 @@ const CONST = {
     // Amount of emojis to render ahead at the end of the update cycle
     EMOJI_DRAW_AMOUNT: 100,
 
+    CUSTOM_EMOJIS: {
+        GLOBAL_CREATE: '\uE100',
+    },
+
     INVISIBLE_CODEPOINTS: ['fe0f', '200d', '2066'],
 
     UNICODE: {
@@ -3429,10 +3433,14 @@ const CONST = {
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
         // eslint-disable-next-line max-len, no-misleading-character-class, no-empty-character-class
-        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/du,
+        EMOJIS: /[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}](\u200D[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/du,
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI_SKIN_TONES: /[\u{1f3fb}-\u{1f3ff}]/gu,
 
+        PRIVATE_USER_AREA: /[\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]/u,
+
+        ONLY_PRIVATE_USER_AREA: /^[\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]+$/u,
+
         TAX_ID: /^\d{9}$/,
         NON_NUMERIC: /\D/g,
         ANY_SPACE: /\s/g,

src/components/EmojiWithTooltip/index.android.tsx

@@ -1,8 +1,13 @@
+import {useMemo} from 'react';
 import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {containsCustomEmoji} from '@libs/EmojiUtils';
 import type EmojiWithTooltipProps from './types';
 
 function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) {
-    return <Text style={style}>{emojiCode}</Text>;
+    const isCustomEmoji = useMemo(() => containsCustomEmoji(emojiCode), [emojiCode]);
+    const styles = useThemeStyles();
+    return <Text style={[style, isCustomEmoji && styles.customEmojiFont]}>{emojiCode}</Text>;
 }
 
 EmojiWithTooltip.displayName = 'EmojiWithTooltip';

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -22,6 +22,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
+import {containsCustomEmoji as containsCustomEmojiUtils, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import {shouldOptionShowTooltip, shouldUseBoldText} from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
 import Performance from '@libs/Performance';
@@ -36,6 +37,7 @@ import {
     isSystemChat,
     isThread,
 } from '@libs/ReportUtils';
+import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
 import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import variables from '@styles/variables';
@@ -106,6 +108,11 @@ function OptionRowLHN({
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
 
+    const alternateTextContainsCustomEmojiWithText = useMemo(
+        () => containsCustomEmojiUtils(optionItem?.alternateText) && !containsOnlyCustomEmoji(optionItem?.alternateText),
+        [optionItem?.alternateText],
+    );
+
     if (!optionItem && !isOptionFocused) {
         // rendering null as a render item causes the FlashList to render all
         // its children and consume significant memory on the first render. We can avoid this by
@@ -187,7 +194,6 @@ function OptionRowLHN({
         hideProductTrainingTooltip();
         onSelectRow(optionItem, popoverAnchor);
     };
-
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -307,15 +313,23 @@ function OptionRowLHN({
                                                     </Tooltip>
                                                 )}
                                             </View>
-                                            {optionItem.alternateText ? (
+                                            {!!optionItem.alternateText && (
                                                 <Text
                                                     style={alternateTextStyle}
                                                     numberOfLines={1}
                                                     accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
                                                 >
-                                                    {Parser.htmlToText(optionItem.alternateText)}
+                                                    {alternateTextContainsCustomEmojiWithText ? (
+                                                        <TextWithEmojiFragment
+                                                            message={Parser.htmlToText(optionItem.alternateText)}
+                                                            style={[alternateTextStyle, styles.mh0]}
+                                                            isAlternateText
+                                                        />
+                                                    ) : (
+                                                        Parser.htmlToText(optionItem.alternateText)
+                                                    )}
                                                 </Text>
-                                            ) : null}
+                                            )}
                                         </View>
                                         {optionItem?.descriptiveText ? (
                                             <View style={[styles.flexWrap]}>

src/components/Text.tsx

@@ -1,9 +1,10 @@
 import type {ForwardedRef} from 'react';
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText, StyleSheet} from 'react-native';
 import type {TextProps as RNTextProps, TextStyle} from 'react-native';
 import useTheme from '@hooks/useTheme';
+import {containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import type {FontUtilsType} from '@styles/utils/FontUtils';
 import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
@@ -51,6 +52,14 @@ function Text(
         componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }
 
+    const isOnlyCustomEmoji = useMemo(() => {
+        return typeof children === 'string' ? containsOnlyCustomEmoji(children) : false;
+    }, [children]);
+
+    if (isOnlyCustomEmoji) {
+        componentStyle.fontFamily = FontUtils.fontFamily.single.CUSTOM_EMOJI_FONT?.fontFamily;
+    }
+
     return (
         <RNText
             allowFontScaling={false}

src/hooks/useMarkdownStyle.ts

@@ -35,6 +35,7 @@ function useMarkdownStyle(hasMessageOnlyEmojis: boolean, excludeStyles: Array<ke
                 fontSize: variables.fontSizeLarge,
             },
             emoji: {
+                ...FontUtils.fontFamily.platform.CUSTOM_EMOJI_FONT,
                 fontSize: emojiFontSize,
                 lineHeight: variables.lineHeightXLarge,
             },

src/libs/EmojiUtils.tsx

@@ -34,7 +34,7 @@
 const sortByName = (emoji: Emoji, emojiData: RegExpMatchArray) => !emoji.name.includes(emojiData[0].toLowerCase().slice(1));
 
 let frequentlyUsedEmojis: FrequentlyUsedEmoji[] = [];
 Onyx.connect({
     key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
     callback: (val) => {
         if (!val) {
@@ -661,6 +661,24 @@
     );
 }
 
+function containsCustomEmoji(text?: string): boolean {
+    if (!text) {
+        return false;
+    }
+
+    const privateUseAreaRegex = CONST.REGEX.PRIVATE_USER_AREA;
+    return privateUseAreaRegex.test(text);
+}
+
+function containsOnlyCustomEmoji(text?: string): boolean {
+    if (!text) {
+        return false;
+    }
+
+    const privateUseAreaRegex = CONST.REGEX.ONLY_PRIVATE_USER_AREA;
+    return privateUseAreaRegex.test(text);
+}
+
 export type {HeaderIndices, EmojiPickerList, EmojiPickerListItem};
 
 export {
@@ -686,4 +704,6 @@
     getRemovedSkinToneEmoji,
     getSpacersIndexes,
     splitTextWithEmojis,
+    containsCustomEmoji,
+    containsOnlyCustomEmoji,
 };

src/libs/StringUtils/index.ts

@@ -18,14 +18,22 @@ function sanitizeString(str: string): string {
  *  Check if the string would be empty if all invisible characters were removed.
  */
 function isEmptyString(value: string): boolean {
+    // We implemented a custom emoji on this Unicode Private Use Area (PUA) code point
+    // so we should not remove it.
+    // Temporarily replace \uE100 with a placeholder
+    const PLACEHOLDER = '<<KEEP_E100>>';
+    let transformed = value.replace(/\uE100/g, PLACEHOLDER);
+
     // \p{C} matches all 'Other' characters
     // \p{Z} matches all separators (spaces etc.)
     // Source: http://www.unicode.org/reports/tr18/#General_Category_Property
-    let transformed = value.replace(CONST.REGEX.INVISIBLE_CHARACTERS_GROUPS, '');
+    transformed = transformed.replace(CONST.REGEX.INVISIBLE_CHARACTERS_GROUPS, '');
 
     // Remove other invisible characters that are not in the above unicode categories
     transformed = transformed.replace(CONST.REGEX.OTHER_INVISIBLE_CHARACTERS, '');
 
+    transformed = transformed.replace(new RegExp(PLACEHOLDER, 'g'), '\uE100');
+
     // Check if after removing invisible characters the string is empty
     return transformed === '';
 }
@@ -36,6 +44,12 @@ function isEmptyString(value: string): boolean {
 function removeInvisibleCharacters(value: string): string {
     let result = value;
 
+    // We implemented a custom emoji on this Unicode Private Use Area (PUA) code point
+    // so we should not remove it.
+    // Temporarily replace \uE100 with a placeholder
+    const PLACEHOLDER = '<<KEEP_E100>>';
+    result = result.replace(/\uE100/g, PLACEHOLDER);
+
     // Remove spaces:
     // - \u200B: zero-width space
     // - \u2060: word joiner
@@ -60,6 +74,9 @@ function removeInvisibleCharacters(value: string): string {
     // Remove all characters from the 'Separator' (Z) category except for Space Separator (Zs)
     result = result.replace(/[\p{Zl}\p{Zp}]/gu, '');
 
+    // Restore \uE100 from placeholder
+    result = result.replace(new RegExp(PLACEHOLDER, 'g'), '\uE100');
+
     // If the result consist of only invisible characters, return an empty string
     if (isEmptyString(result)) {
         return '';