Fix - Some emojis sent are not shown in conversation

Author: dmkt9

src/CONST/index.ts

@@ -3489,10 +3489,6 @@ const CONST = {
         EMOJIS: /[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}](\u200D[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/du,
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI_SKIN_TONES: /[\u{1f3fb}-\u{1f3ff}]/gu,
-        /** Regex to match emojis that are not wrapped in `<emoji>` tags */
-        get UNWRAPPED_EMOJI() {
-            return new RegExp(`(?:(?!<emoji[^>]*>))(${this.EMOJIS.source})(?:(?!</emoji[^>]*>))`, 'gu');
-        },
 
         PRIVATE_USER_AREA: /[\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]/u,
 

src/components/RenderHTML.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {RenderHTMLSource} from 'react-native-render-html';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import CONST from '@src/CONST';
+import Parser from '@libs/Parser';
 
 type RenderHTMLProps = {
     /** HTML string to render */
@@ -15,8 +15,12 @@ type RenderHTMLProps = {
 function RenderHTML({html: htmlParam}: RenderHTMLProps) {
     const {windowWidth} = useWindowDimensions();
     const html = useMemo(() => {
-        // Wrap all unwrapped emojis in `<emoji>` tags.
-        return htmlParam.replace(CONST.REGEX.UNWRAPPED_EMOJI, '<emoji>$1</emoji>');
+        return (
+            Parser.replace(htmlParam, {shouldEscapeText: false, filterRules: ['emoji']})
+                // Remove double <emoji> tag if exists and keep the outermost tag (always the original tag).
+                .replace(/(<emoji[^>]*>)(?:<emoji[^>]*>)+/g, '$1')
+                .replace(/(<\/emoji[^>]*>)(?:<\/emoji[^>]*>)+/g, '$1')
+        );
     }, [htmlParam]);
     return (
         <RenderHTMLSource