Merge pull request #59301 from c3024/add-Unicode-custom-emojis

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

Author: grgia

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/app/src/main/res/font/custom_emoji_native_font.ttf

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

android/link-assets-manifest.json

@@ -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/css/fonts.css

@@ -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/common.ts

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

assets/emojis/en.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;