Add font support for emojis

README.md

@@ -78,6 +78,7 @@ const markdownStyle: MarkdownStyle = {
   },
   emoji: {
     fontSize: 20,
+    fontFamily: FONT_FAMILY_EMOJI,
   },
   blockquote: {
     borderColor: 'gray',

android/src/main/java/com/expensify/livemarkdown/MarkdownFormatter.java

@@ -70,7 +70,8 @@ private void applyRange(@NonNull SpannableStringBuilder ssb, @NonNull MarkdownRa
         setSpan(ssb, new MarkdownStrikethroughSpan(), start, end);
         break;
       case "emoji":
-        setSpan(ssb, new MarkdownEmojiSpan(markdownStyle.getEmojiFontSize()), start, end);
+        setSpan(ssb, new MarkdownFontFamilySpan(markdownStyle.getEmojiFontFamily(), mAssetManager), start, end);
+        setSpan(ssb, new MarkdownFontSizeSpan(markdownStyle.getEmojiFontSize()), start, end);
         break;
       case "mention-here":
         setSpan(ssb, new MarkdownForegroundColorSpan(markdownStyle.getMentionHereColor()), start, end);

android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java

@@ -21,6 +21,9 @@ public class MarkdownStyle {
 
   private final float mH1FontSize;
 
+  @NonNull
+  private final String mEmojiFontFamily;
+
   private final float mEmojiFontSize;
 
   @ColorInt
@@ -77,6 +80,7 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mLinkColor = parseColor(map, "link", "color", context);
     mH1FontSize = parseFloat(map, "h1", "fontSize");
     mEmojiFontSize = parseFloat(map, "emoji", "fontSize");
+    mEmojiFontFamily = parseString(map, "emoji", "fontFamily");
     mBlockquoteBorderColor = parseColor(map, "blockquote", "borderColor", context);
     mBlockquoteBorderWidth = parseFloat(map, "blockquote", "borderWidth");
     mBlockquoteMarginLeft = parseFloat(map, "blockquote", "marginLeft");
@@ -142,6 +146,10 @@ public float getEmojiFontSize() {
     return mEmojiFontSize;
   }
 
+  public String getEmojiFontFamily() {
+    return mEmojiFontFamily;
+  }
+
   @ColorInt
   public int getBlockquoteBorderColor() {
     return mBlockquoteBorderColor;

apple/MarkdownFormatter.mm

@@ -74,7 +74,7 @@ - (void)applyRangeToAttributedString:(NSMutableAttributedString *)attributedStri
                                           variant:nil
                                   scaleMultiplier:0];
     } else if (type == "emoji") {
-      font = [RCTFont updateFont:font withFamily:nil
+      font = [RCTFont updateFont:font withFamily:markdownStyle.emojiFontFamily
                                             size:[NSNumber numberWithFloat:markdownStyle.emojiFontSize]
                                           weight:nil
                                             style:nil

apple/RCTMarkdownStyle.h

@@ -10,6 +10,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) UIColor *linkColor;
 @property (nonatomic) CGFloat h1FontSize;
 @property (nonatomic) CGFloat emojiFontSize;
+@property (nonatomic) NSString *emojiFontFamily;
 @property (nonatomic) UIColor *blockquoteBorderColor;
 @property (nonatomic) CGFloat blockquoteBorderWidth;
 @property (nonatomic) CGFloat blockquoteMarginLeft;

apple/RCTMarkdownStyle.mm

@@ -14,6 +14,7 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
     _h1FontSize = style.h1.fontSize;
 
     _emojiFontSize = style.emoji.fontSize;
+    _emojiFontFamily = RCTNSStringFromString(style.emoji.fontFamily);
 
     _blockquoteBorderColor = RCTUIColorFromSharedColor(style.blockquote.borderColor);
     _blockquoteBorderWidth = style.blockquote.borderWidth;

src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -9,6 +9,7 @@ interface MarkdownStyle {
   };
   emoji: {
     fontSize: Float;
+    fontFamily: string;
   };
   link: {
     color: ColorValue;

src/styleUtils.ts

@@ -10,6 +10,12 @@ const FONT_FAMILY_MONOSPACE = Platform.select({
   default: 'monospace',
 });
 
+const FONT_FAMILY_EMOJI = Platform.select({
+  ios: 'Apple Color Emoji',
+  android: 'Noto Color Emoji',
+  default: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji',
+});
+
 function makeDefaultMarkdownStyle(): MarkdownStyle {
   return {
     syntax: {
@@ -23,6 +29,7 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     },
     emoji: {
       fontSize: 20,
+      fontFamily: FONT_FAMILY_EMOJI,
     },
     blockquote: {
       borderColor: 'gray',