Apply system emoji fonts to all font families

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -60,7 +60,7 @@ const BaseHTMLEngineProvider = (props) => {
 
     // We need to pass multiple system-specific fonts for emojis but
     // we can't apply multiple fonts at once so we need to pass fallback fonts.
-    const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EMOJI_TEXT_FONT};
+    const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EXP_NEUE};
 
     return (
         <TRenderEngineProvider

src/pages/home/report/ReportActionItemFragment.js

@@ -116,7 +116,6 @@ const ReportActionItemFragment = (props) => {
             }
             return (
                 <Text
-                    family="EMOJI_TEXT_FONT"
                     selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                     style={[EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}
                 >

src/styles/fontFamily/bold/index.js

@@ -0,0 +1,3 @@
+const bold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
+
+export default bold;

src/styles/fontFamily/index.js

@@ -1,18 +1,18 @@
-import bold from '../bold';
-import emojiFont from './emoji';
+import bold from './bold';
 
+// In windows and ubuntu, we need some extra system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
 const fontFamily = {
-    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
+    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
     EXP_NEUE_BOLD: bold,
-    EXP_NEUE: 'ExpensifyNeue-Regular',
-    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
-    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
+    EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
+    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
     SYSTEM: 'System',
-    MONOSPACE: 'ExpensifyMono-Regular',
-    MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
-    MONOSPACE_BOLD: 'ExpensifyMono-Bold',
-    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
-    EMOJI_TEXT_FONT: emojiFont,
+    MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
 };
 
 export default fontFamily;

src/styles/fontFamily/index.native.js

@@ -0,0 +1,16 @@
+import bold from './bold';
+
+const fontFamily = {
+    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
+    EXP_NEUE_BOLD: bold,
+    EXP_NEUE: 'ExpensifyNeue-Regular',
+    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
+    SYSTEM: 'System',
+    MONOSPACE: 'ExpensifyMono-Regular',
+    MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
+    MONOSPACE_BOLD: 'ExpensifyMono-Bold',
+    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
+};
+
+export default fontFamily;

src/styles/styles.js

@@ -187,13 +187,11 @@ const styles = {
     },
 
     emojiSuggestionsEmoji: {
-        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         fontSize: variables.fontSizeMedium,
         width: 51,
         textAlign: 'center',
     },
     emojiSuggestionsText: {
-        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         fontSize: variables.fontSizeMedium,
     },
 
@@ -1546,7 +1544,7 @@ const styles = {
             backgroundColor: themeColors.componentBG,
             borderColor: themeColors.border,
             color: themeColors.text,
-            fontFamily: fontFamily.EMOJI_TEXT_FONT,
+            fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeNormal,
             borderWidth: 0,
             height: 'auto',
@@ -1631,7 +1629,6 @@ const styles = {
 
     // Emoji Picker Styles
     emojiText: {
-        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         textAlign: 'center',
         fontSize: variables.emojiSize,
         ...spacing.pv0,