Merge pull request #27736 from jeet-dhandha/fix-27722

(cherry picked from commit 1127be9)
Expensify · Sep 20, 2023 · b51d2db · b51d2db
1 parent b570991
commit b51d2db
Showing 1 changed file with 26 additions and 6 deletions.
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
@@ -25,6 +25,10 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import RenderHTML from './RenderHTML';
+import getPlatform from '../libs/getPlatform';
+
+const platform = getPlatform();
+const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
 const propTypes = menuItemPropTypes;
 
@@ -119,6 +123,18 @@ const MenuItem = React.forwardRef((props, ref) => {
         titleRef.current = props.title;
     }, [props.title, props.shouldParseTitle]);
 
+    const getProcessedTitle = useMemo(() => {
+        if (props.shouldRenderAsHTML) {
+            return convertToLTR(props.title);
+        }
+
+        if (props.shouldParseTitle) {
+            return html;
+        }
+
+        return '';
+    }, [props.title, props.shouldRenderAsHTML, props.shouldParseTitle, html]);
+
     return (
         <Hoverable>
             {(isHovered) => (
@@ -235,10 +251,15 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && <RenderHTML html={convertToLTR(props.title)} />}
-
-                                            {Boolean(props.shouldParseTitle) && Boolean(html.length) && !props.shouldRenderAsHTML && <RenderHTML html={`<comment>${html}</comment>`} />}
-
+                                            {Boolean(props.title) &&
+                                                (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
+                                                (isNative ? (
+                                                    <RenderHTML html={getProcessedTitle} />
+                                                ) : (
+                                                    <View style={styles.chatItemMessage}>
+                                                        <RenderHTML html={getProcessedTitle} />
+                                                    </View>
+                                                ))}
                                             {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
@@ -248,7 +269,6 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     {convertToLTR(props.title)}
                                                 </Text>
                                             )}
-
                                             {Boolean(props.shouldShowTitleIcon) && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon