From d903534925e7317cc03da0f989d87dc5bb24a090 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 16:19:38 +0530
Subject: [PATCH 1/8] created platform based files

---
 src/components/MenuItem.js                    | 20 ++++------------
 .../MenuItemRenderHTMLTitle/index.js          | 23 +++++++++++++++++++
 .../MenuItemRenderHTMLTitle/index.native.js   | 17 ++++++++++++++
 .../MenuItemRenderHTMLTitle/propTypes.js      |  8 +++++++
 4 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.native.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/propTypes.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index bb4eeb7a18ac..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -24,11 +24,7 @@ import variables from '../styles/variables';
 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;
+import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
 
 const propTypes = menuItemPropTypes;
 
@@ -251,16 +247,10 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {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) && (
+                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                            )}
+                                            {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}
diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
new file mode 100644
index 000000000000..e4f0b27c4f09
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return (
+        <View style={styles.chatItemMessage}>
+            <RenderHTML html={props.title} />
+        </View>
+    );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
new file mode 100644
index 000000000000..b3dff8d77eff
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.native.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return <RenderHTML html={props.title} />;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/propTypes.js b/src/components/MenuItemRenderHTMLTitle/propTypes.js
new file mode 100644
index 000000000000..68e279eb28c3
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/propTypes.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Processed title to display for the MenuItem */
+    title: PropTypes.string.isRequired,
+};
+
+export default propTypes;

From 83e24ec882a668ee71b6664a2354c301dd9bc108 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 21:59:53 +0530
Subject: [PATCH 2/8] Fixed Overflow

---
 src/components/MenuItem.js | 6 ++++--
 src/styles/styles.js       | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 268351699567..824b23c84898 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -248,7 +248,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
+                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a748a0fb353b..2e411e7e63df 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3988,6 +3988,10 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
+
+    menuItemHtmlRendererScrollView: {
+        maxHeight: 115,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 0ad4fbaaea7f80d38914b8ab0c3f4f8e4a31faff Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:12:38 +0530
Subject: [PATCH 3/8] Fixed app not scrolling

---
 src/components/MenuItem.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 824b23c84898..c435d6330c15 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,6 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
+import {PressableWithoutFeedback} from './Pressable';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,7 +250,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    <PressableWithoutFeedback>
+                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    </PressableWithoutFeedback>
                                                 </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (

From 120eb74916bdd35ce88225d463dd27cff773ede9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:23:38 +0530
Subject: [PATCH 4/8] fixed eslint

---
 src/components/MenuItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c435d6330c15..12dbbf1e4903 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,7 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import {PressableWithoutFeedback} from './Pressable';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -250,7 +250,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback>
+                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
                                                         <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                                     </PressableWithoutFeedback>
                                                 </ScrollView>

From 00df2fcca20a0824f8ad9578ef99312fa43631f6 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:39:54 +0530
Subject: [PATCH 5/8] fix: cursor issue

---
 src/components/MenuItemRenderHTMLTitle/index.js |  2 +-
 src/styles/styles.js                            | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
index e4f0b27c4f09..f91e70dc1249 100644
--- a/src/components/MenuItemRenderHTMLTitle/index.js
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -10,7 +10,7 @@ const defaultProps = {};
 
 function MenuItemRenderHTMLTitle(props) {
     return (
-        <View style={styles.chatItemMessage}>
+        <View style={styles.renderHTMLTitle}>
             <RenderHTML html={props.title} />
         </View>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2e411e7e63df..b218a2eb435b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1661,6 +1661,16 @@ const styles = (theme) => ({
         ...wordBreak.breakWord,
     },
 
+    renderHTMLTitle: {
+        color: theme.text,
+        fontSize: variables.fontSizeNormal,
+        fontFamily: fontFamily.EXP_NEUE,
+        lineHeight: variables.lineHeightXLarge,
+        maxWidth: '100%',
+        ...whiteSpace.preWrap,
+        ...wordBreak.breakWord,
+    },
+
     chatItemComposeWithFirstRow: {
         minHeight: 90,
     },

From 1e1b83ce51f2b75d768cf78a234d05d04d373927 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:41:43 +0530
Subject: [PATCH 6/8] Removed extra scrollview and style

---
 src/components/MenuItem.js | 9 ++-------
 src/styles/styles.js       | 4 ----
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 12dbbf1e4903..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -25,7 +25,6 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,11 +248,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
-                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
-                                                    </PressableWithoutFeedback>
-                                                </ScrollView>
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b218a2eb435b..54df5b331690 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3998,10 +3998,6 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
-
-    menuItemHtmlRendererScrollView: {
-        maxHeight: 115,
-    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 04c6a9733505bc735abb5088f10cd7267ee504d9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:48:14 +0530
Subject: [PATCH 7/8] fix scroll at new task page

---
 src/pages/tasks/NewTaskPage.js | 88 +++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 9fb600e40753..1696961764ca 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -149,50 +149,52 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <View style={[styles.containerWithSpaceBetween]}>
-                    <View style={styles.mb5}>
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.title')}
-                            title={title}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.description')}
-                            title={description}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
-                            shouldShowRightIcon
-                            shouldParseTitle
-                            numberOfLinesTitle={2}
-                            titleStyle={styles.flex1}
-                        />
-                        <MenuItem
-                            label={assignee.displayName ? props.translate('task.assignee') : ''}
-                            title={assignee.displayName || ''}
-                            description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
-                            icon={assignee.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItem
-                            label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
-                            title={shareDestination.displayName || ''}
-                            description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
-                            icon={shareDestination.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
-                            interactive={!props.task.parentReportID}
-                            shouldShowRightIcon={!props.task.parentReportID}
+                <ScrollView>
+                    <View style={[styles.containerWithSpaceBetween]}>
+                        <View style={styles.mb5}>
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.title')}
+                                title={title}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.description')}
+                                title={description}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
+                                shouldShowRightIcon
+                                shouldParseTitle
+                                numberOfLinesTitle={2}
+                                titleStyle={styles.flex1}
+                            />
+                            <MenuItem
+                                label={assignee.displayName ? props.translate('task.assignee') : ''}
+                                title={assignee.displayName || ''}
+                                description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
+                                icon={assignee.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItem
+                                label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
+                                title={shareDestination.displayName || ''}
+                                description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                                icon={shareDestination.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
+                                interactive={!props.task.parentReportID}
+                                shouldShowRightIcon={!props.task.parentReportID}
+                            />
+                        </View>
+                        <FormAlertWithSubmitButton
+                            isAlertVisible={!_.isEmpty(errorMessage)}
+                            message={errorMessage}
+                            onSubmit={() => onSubmit()}
+                            enabledWhenOffline
+                            buttonText={props.translate('newTaskPage.confirmTask')}
+                            containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
                         />
                     </View>
-                    <FormAlertWithSubmitButton
-                        isAlertVisible={!_.isEmpty(errorMessage)}
-                        message={errorMessage}
-                        onSubmit={() => onSubmit()}
-                        enabledWhenOffline
-                        buttonText={props.translate('newTaskPage.confirmTask')}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
-                    />
-                </View>
+                </ScrollView>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

From c1e89eeaacbfdbd208bfd350812de5fda26c81fe Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 18:07:22 +0530
Subject: [PATCH 8/8] fixed styling for scroll view in NewTaskPage

---
 src/pages/tasks/NewTaskPage.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 1696961764ca..db63e01c4ce6 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -149,8 +149,8 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <ScrollView>
-                    <View style={[styles.containerWithSpaceBetween]}>
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View style={[styles.flex1]}>
                         <View style={styles.mb5}>
                             <MenuItemWithTopDescription
                                 description={props.translate('task.title')}
@@ -185,6 +185,8 @@ function NewTaskPage(props) {
                                 shouldShowRightIcon={!props.task.parentReportID}
                             />
                         </View>
+                    </View>
+                    <View style={[styles.flexShrink0]}>
                         <FormAlertWithSubmitButton
                             isAlertVisible={!_.isEmpty(errorMessage)}
                             message={errorMessage}