Fix broken emoji (Safari, Firefox)

src/components/EmojiPicker/EmojiSkinToneList.js

@@ -67,7 +67,7 @@ class EmojiSkinToneList extends Component {
                                 styles.alignItemsCenter,
                             ]}
                         >
-                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem]}>
+                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem, styles.textNoWrap]}>
                                 {selectedEmoji.code}
                             </Text>
                             <Text style={[styles.emojiSkinToneTitle]}>

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -52,13 +52,18 @@ const BaseHTMLEngineProvider = (props) => {
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable}), [props.textSelectable]);
 
+    // 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 = {'GTAmericaExp-Regular': fontFamily.EMOJI_TEXT_FONT};
+
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
             systemFonts={_.values(fontFamily)}
+            fallbackFonts={fallbackFonts}
         >
             <RenderHTMLConfigProvider
                 defaultTextProps={defaultTextProps}

src/pages/home/report/ReportActionItemFragment.js

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

src/styles/fontFamily/emoji/index.js

@@ -0,0 +1,5 @@
+// In windows and ubuntu, we need these system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
+const emojiFont = 'GTAmericaExp-Regular, Segoe UI Emoji, Noto Color Emoji';
+
+export default emojiFont;

src/styles/fontFamily/emoji/index.native.js

@@ -0,0 +1,3 @@
+const emojiFont = 'GTAmericaExp-Regular';
+
+export default emojiFont;

src/styles/fontFamily/index.js

@@ -1,4 +1,5 @@
 import bold from '../bold';
+import emojiFont from './emoji';
 
 const fontFamily = {
     GTA_ITALIC: 'GTAmericaExp-RgIt',
@@ -9,6 +10,7 @@ const fontFamily = {
     MONOSPACE_ITALIC: 'GTAmericaExpMono-RgIt',
     MONOSPACE_BOLD: 'GTAmericaExpMono-Bd',
     MONOSPACE_BOLD_ITALIC: 'GTAmericaExpMono-BdIt',
+    EMOJI_TEXT_FONT: emojiFont,
 };
 
 export default fontFamily;

src/styles/styles.js

@@ -1397,7 +1397,7 @@ const styles = {
         backgroundColor: themeColors.componentBG,
         borderColor: themeColors.border,
         color: themeColors.text,
-        fontFamily: fontFamily.GTA,
+        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         fontSize: variables.fontSizeNormal,
         borderWidth: 0,
         borderRadius: 0,
@@ -1474,7 +1474,7 @@ const styles = {
 
     // Emoji Picker Styles
     emojiText: {
-        fontFamily: fontFamily.GTA_BOLD,
+        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         textAlign: 'center',
         fontSize: variables.emojiSize,
         ...spacing.pv0,