Missing emoji support

[ghost]

I use this map to convert colors in labels in Trello migration tool:

const COLOR_MAP = {
  green: "🟩",
  yellow: "🟨",
  orange: "🟧",
  red: "🟥",
  blue: "🟦",
  purple: "🟪",
  pink: "💗",
  sky: "#️⃣",
  black: "⬛",
};

However it is not working (maybe because of font?).

[tasn]

Yup, it looks like the font is missing these emojis. As you can see, the more common ones are present.

[ghost]

Is there a way how to make it work? Force font that has them for example?

[tasn]

Do you have a font on your phone that supports them? What happens when you for example if you use the icons in other apps?

I'd have expected fallback to be automatic to be honest, though we may need to ship our own, more exhaustive, font.

[zecakeh]

I looked into that a couple of months ago. The Native Android way of doing that is to use the EmojiCompat library to provide the missing emojis to older Android versions. However I didn't figure out how to implement it with React Native.

What I did however is to bundle the Noto Color Emoji font in the app and parse text for emojis and replace the font just for the emoji. If I tried to use the font for all the text there were spacing issues.

[tasn]

This sounds like a good workaround for now. As long as it's isolated in one place (e.g. our Markdown rendering widget), I think it's a good idea to go with it. What happens on the web?

[zecakeh]

We actually only applied the patch on Android (with a Platform condition). Is browser support good enough nowadays that we don't need to think about it? I just tested on Firefox and Chromium on Linux and they seem to be working fine.

[zecakeh]

I found a library that does the Native Android thing here: https://github.com/bankifyio/react-native-emoji-compat-text

It's a bit outdated but it's easy to update, it's mainly copy-paste from the react native repo. The only issue is that you have to use an EmojiCompatText instead of Text and an EmojiCompatTextInput instead of TextInput. So that means basically reapplying the React Native Paper styles manually everywhere we want Emoji support.

There could be emojis in the name or the content of a note, and the name or description of a notebook.

Of the top of my head, the views that need it:

• NoteListScreens's List.Item
• Markdown renderers
• ItemEditScreen TextEditor and Header
• NoteEditDialog Name TextInput
• CollectionEditScreen Display name and Description TextInputs
• Drawers Notebooks List.Item

So the question is: is it worth it? Knowing that we also have to check when we update RN if the source files have changed to get the latest fixes.

The other solution I talked about is to parse the text that we give to the components, and wrap the emojis in a styled Text so it only works with components that accept the source as children, not as a string. In my previous implementation we didn't care about TextInput so this wasn't an issue.

[tasn]

We already have out custom TextInput in widgets that we should be using everywhere, so no problem there. I'm more concerned about List.Item that I'm not sure we can even change as it comes from paper. I wonder what's the solution other apps use.