From bd1965c24c3e4da883988285d18d239c08ec380d Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 6 Jan 2022 23:45:06 +0530
Subject: [PATCH 01/20] fix:  Added component for Text with Ellipses

---
 src/components/TextWithEllipses/index.js | 63 ++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/TextWithEllipses/index.js

diff --git a/src/components/TextWithEllipses/index.js b/src/components/TextWithEllipses/index.js
new file mode 100644
index 000000000000..025e28df70ad
--- /dev/null
+++ b/src/components/TextWithEllipses/index.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import _ from 'underscore';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /** leading text, first text of the group */
+    leadingText: PropTypes.string.isRequired,
+
+    /** trailing text, second text of the group */
+    trailingText: PropTypes.string.isRequired,
+
+    /** styling for leading and trailing text */
+    textStyle: stylePropTypes,
+
+    /** styling for leading text View */
+    leadingTextParentStyle: stylePropTypes,
+
+    /** styling for trailing text View */
+    trailingTextParentStyle: stylePropTypes,
+
+    /** styling for parent View */
+    wrapperStyle: stylePropTypes,
+};
+
+const defaultProps = {
+    textStyle: {},
+    leadingTextParentStyle: {},
+    trailingTextParentStyle: {},
+    wrapperStyle: {},
+};
+
+const TextWithEllipses = (props) => {
+    const wrapperStyles = _.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle];
+    const leadingTextParentStyles = _.isArray(props.leadingTextParentStyle) ? props.leadingTextParentStyle : [props.leadingTextParentStyle];
+    const trailingTextParentStyles = _.isArray(props.trailingTextParentStyle) ? props.trailingTextParentStyle : [props.trailingTextParentStyle];
+    return (
+        <View style={[styles.flexRow, ...wrapperStyles]}>
+            <View style={[styles.flexShrink1, ...leadingTextParentStyles]}>
+                <Text
+                    style={props.textStyle}
+                    numberOfLines={1}
+                >
+                    {props.leadingText}
+                </Text>
+            </View>
+            <View style={[styles.flexShrink0, ...trailingTextParentStyles]}>
+                <Text style={props.textStyle}>
+                    {props.trailingText}
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+TextWithEllipses.propTypes = propTypes;
+TextWithEllipses.defaultProps = defaultProps;
+TextWithEllipses.displayName = 'TextWithEllipses';
+
+export default TextWithEllipses;

From c3a9b2960f49072cb14daf3b793f4f67de7fbe5e Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 6 Jan 2022 23:57:02 +0530
Subject: [PATCH 02/20] fix: Replaced existing reporting typing logic with new
 component

---
 .../home/report/ReportTypingIndicator.js      | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index 371b069994f5..c769e190486a 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -9,6 +9,7 @@ import styles from '../../../styles/styles';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Text from '../../../components/Text';
+import TextWithEllipses from '../../../components/TextWithEllipses';
 
 const propTypes = {
     /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
@@ -52,21 +53,13 @@ class ReportTypingIndicator extends React.Component {
                 return <View style={[styles.chatItemComposeSecondaryRow]} />;
             case 1:
                 return (
-                    <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow]}>
-                        <View style={[styles.chatItemComposeSecondaryRowOffset, styles.flexShrink1]}>
-                            <Text
-                                style={[styles.chatItemComposeSecondaryRowSubText]}
-                                numberOfLines={1}
-                            >
-                                {PersonalDetails.getDisplayName(this.state.usersTyping[0])}
-                            </Text>
-                        </View>
-                        <View style={[styles.flexShrink0]}>
-                            <Text style={[styles.chatItemComposeSecondaryRowSubText]}>
-                                {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
-                            </Text>
-                        </View>
-                    </View>
+                    <TextWithEllipses
+                        leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
+                        trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
+                        textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                        wrapperStyle={styles.chatItemComposeSecondaryRow}
+                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+                    />
                 );
             default:
                 return (

From 89b1902f34e869af4a204e6189b372ddb2c3157f Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 18:26:09 +0530
Subject: [PATCH 03/20] fix: Added subtitle component for Header

---
 src/components/Header.js                | 7 ++++---
 src/components/HeaderWithCloseButton.js | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index c692b028fab3..66a10a6da313 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import styles from '../styles/styles';
 import Text from './Text';
 import EnvironmentBadge from './EnvironmentBadge';
@@ -10,7 +11,7 @@ const propTypes = {
     title: PropTypes.string.isRequired,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
     /** Should we show the environment badge (dev/stg)?  */
     shouldShowEnvironmentBadge: PropTypes.bool,
@@ -22,12 +23,12 @@ const defaultProps = {
 };
 const Header = props => (
     <View style={[styles.flex1, styles.flexRow]}>
-        <View>
+        <View style={styles.w100}>
             <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
                 {props.title}
             </Text>
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
-            {props.subtitle ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : <></> }
+            {_.isString(props.subtitle) ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : props.subtitle }
         </View>
         {props.shouldShowEnvironmentBadge && (
             <EnvironmentBadge />
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
index c04036d9cc00..50000507a6d5 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithCloseButton.js
@@ -17,7 +17,7 @@ const propTypes = {
     title: PropTypes.string,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
     /** Method to trigger when pressing download button of the header */
     onDownloadButtonPress: PropTypes.func,

From 883796187fb27df42ae9aae251c5e895cc9db0f6 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 18:26:37 +0530
Subject: [PATCH 04/20] fix: Place subtitle component with filename

---
 src/components/AttachmentModal.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 6a318b2124bb..e0dc58a86a2d 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -16,6 +16,7 @@ import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ConfirmModal from './ConfirmModal';
+import TextWithEllipses from './TextWithEllipses';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -121,6 +122,16 @@ class AttachmentModal extends PureComponent {
         return !file || lodashGet(file, 'size', 0) < CONST.API_MAX_ATTACHMENT_SIZE;
     }
 
+    renderFileNamePreview() {
+        const fileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
+        const splittedFileName = fileName.split('.');
+        const trailingText = splittedFileName.pop();
+        const leadingText = splittedFileName.join('.');
+        return (
+            <TextWithEllipses leadingText={leadingText} trailingText={trailingText ? `.${trailingText}` : ''} wrapperStyle={styles.w100} />
+        );
+    }
+
     render() {
         const sourceURL = this.props.isAuthTokenRequired
             ? addEncryptedAuthTokenToURL(this.state.sourceURL)
@@ -148,7 +159,7 @@ class AttachmentModal extends PureComponent {
                         shouldShowDownloadButton={!this.props.isUploadingAttachment}
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
-                        subtitle={this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '')}
+                        subtitle={this.renderFileNamePreview()}
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (

From ce094d1c37e054e91ce673484fe799c23f32e8b5 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 19:57:21 +0530
Subject: [PATCH 05/20] fix: Added subtitle text styling

---
 src/components/AttachmentModal.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index e0dc58a86a2d..593ce7b3de83 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -128,7 +128,12 @@ class AttachmentModal extends PureComponent {
         const trailingText = splittedFileName.pop();
         const leadingText = splittedFileName.join('.');
         return (
-            <TextWithEllipses leadingText={leadingText} trailingText={trailingText ? `.${trailingText}` : ''} wrapperStyle={styles.w100} />
+            <TextWithEllipses
+                leadingText={leadingText.trim()}
+                trailingText={trailingText ? `.${trailingText.trim()}` : ''}
+                wrapperStyle={styles.w100}
+                textStyle={styles.mutedTextLabel}
+            />
         );
     }
 

From 86902b880033a2ccac438d5001b42d10c8d9cd9b Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 22:42:45 +0530
Subject: [PATCH 06/20] fix: fixed proptypes and moved function to component

---
 src/components/AttachmentModal.js       | 41 +++++++++++++++----------
 src/components/Header.js                |  2 +-
 src/components/HeaderWithCloseButton.js |  2 +-
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 593ce7b3de83..b1f72437dfd3 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -74,6 +74,21 @@ class AttachmentModal extends PureComponent {
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.isValidSize = this.isValidSize.bind(this);
+        this.getSplitFileName = this.getSplitFileName.bind(this);
+    }
+
+    /**
+     * Returns the filename split into leading and trailing text
+     * @returns {Object}
+     */
+    getSplitFileName() {
+        const fileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
+        const splittedFileName = fileName.split('.');
+        const trailingText = splittedFileName.pop();
+        const leadingText = splittedFileName.join('.');
+        return {
+            leadingText, trailingText,
+        };
     }
 
     /**
@@ -122,21 +137,6 @@ class AttachmentModal extends PureComponent {
         return !file || lodashGet(file, 'size', 0) < CONST.API_MAX_ATTACHMENT_SIZE;
     }
 
-    renderFileNamePreview() {
-        const fileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
-        const splittedFileName = fileName.split('.');
-        const trailingText = splittedFileName.pop();
-        const leadingText = splittedFileName.join('.');
-        return (
-            <TextWithEllipses
-                leadingText={leadingText.trim()}
-                trailingText={trailingText ? `.${trailingText.trim()}` : ''}
-                wrapperStyle={styles.w100}
-                textStyle={styles.mutedTextLabel}
-            />
-        );
-    }
-
     render() {
         const sourceURL = this.props.isAuthTokenRequired
             ? addEncryptedAuthTokenToURL(this.state.sourceURL)
@@ -145,6 +145,8 @@ class AttachmentModal extends PureComponent {
         const attachmentViewStyles = this.props.isSmallScreenWidth
             ? [styles.imageModalImageCenterContainer]
             : [styles.imageModalImageCenterContainer, styles.p5];
+
+        const {leadingText, trailingText} = this.getSplitFileName();
         return (
             <>
                 <Modal
@@ -164,7 +166,14 @@ class AttachmentModal extends PureComponent {
                         shouldShowDownloadButton={!this.props.isUploadingAttachment}
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
-                        subtitle={this.renderFileNamePreview()}
+                        subtitle={(
+                            <TextWithEllipses
+                                leadingText={leadingText.trim()}
+                                trailingText={trailingText ? `.${trailingText.trim()}` : ''}
+                                wrapperStyle={styles.w100}
+                                textStyle={styles.mutedTextLabel}
+                            />
+                        )}
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (
diff --git a/src/components/Header.js b/src/components/Header.js
index 66a10a6da313..868dc03e2723 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,7 +11,7 @@ const propTypes = {
     title: PropTypes.string.isRequired,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
     /** Should we show the environment badge (dev/stg)?  */
     shouldShowEnvironmentBadge: PropTypes.bool,
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
index 50000507a6d5..d332699a9e7f 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithCloseButton.js
@@ -17,7 +17,7 @@ const propTypes = {
     title: PropTypes.string,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
     /** Method to trigger when pressing download button of the header */
     onDownloadButtonPress: PropTypes.func,

From 8a1820ca163406b5abc515ffb552908499365cd0 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 23:36:41 +0530
Subject: [PATCH 07/20] fix: Code cleanup

---
 src/components/AttachmentModal.js        | 4 +---
 src/components/TextWithEllipses/index.js | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index b1f72437dfd3..e97ced8120de 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -86,9 +86,7 @@ class AttachmentModal extends PureComponent {
         const splittedFileName = fileName.split('.');
         const trailingText = splittedFileName.pop();
         const leadingText = splittedFileName.join('.');
-        return {
-            leadingText, trailingText,
-        };
+        return {leadingText, trailingText};
     }
 
     /**
diff --git a/src/components/TextWithEllipses/index.js b/src/components/TextWithEllipses/index.js
index 025e28df70ad..ae2c1226f5e8 100644
--- a/src/components/TextWithEllipses/index.js
+++ b/src/components/TextWithEllipses/index.js
@@ -40,10 +40,7 @@ const TextWithEllipses = (props) => {
     return (
         <View style={[styles.flexRow, ...wrapperStyles]}>
             <View style={[styles.flexShrink1, ...leadingTextParentStyles]}>
-                <Text
-                    style={props.textStyle}
-                    numberOfLines={1}
-                >
+                <Text style={props.textStyle} numberOfLines={1}>
                     {props.leadingText}
                 </Text>
             </View>

From b8249f678e273c9290538288b2a4f0d4d3296644 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 23:56:00 +0530
Subject: [PATCH 08/20] fix: Renamed component to TextWithEllipsis

---
 src/components/AttachmentModal.js                      |  4 ++--
 .../{TextWithEllipses => TextWithEllipsis}/index.js    | 10 +++++-----
 src/pages/home/report/ReportTypingIndicator.js         |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename src/components/{TextWithEllipses => TextWithEllipsis}/index.js (89%)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index e97ced8120de..8ce9f27dc968 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -16,7 +16,7 @@ import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ConfirmModal from './ConfirmModal';
-import TextWithEllipses from './TextWithEllipses';
+import TextWithEllipsis from './TextWithEllipsis';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -165,7 +165,7 @@ class AttachmentModal extends PureComponent {
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                         subtitle={(
-                            <TextWithEllipses
+                            <TextWithEllipsis
                                 leadingText={leadingText.trim()}
                                 trailingText={trailingText ? `.${trailingText.trim()}` : ''}
                                 wrapperStyle={styles.w100}
diff --git a/src/components/TextWithEllipses/index.js b/src/components/TextWithEllipsis/index.js
similarity index 89%
rename from src/components/TextWithEllipses/index.js
rename to src/components/TextWithEllipsis/index.js
index ae2c1226f5e8..10780a3ed3bc 100644
--- a/src/components/TextWithEllipses/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -33,7 +33,7 @@ const defaultProps = {
     wrapperStyle: {},
 };
 
-const TextWithEllipses = (props) => {
+const TextWithEllipsis = (props) => {
     const wrapperStyles = _.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle];
     const leadingTextParentStyles = _.isArray(props.leadingTextParentStyle) ? props.leadingTextParentStyle : [props.leadingTextParentStyle];
     const trailingTextParentStyles = _.isArray(props.trailingTextParentStyle) ? props.trailingTextParentStyle : [props.trailingTextParentStyle];
@@ -53,8 +53,8 @@ const TextWithEllipses = (props) => {
     );
 };
 
-TextWithEllipses.propTypes = propTypes;
-TextWithEllipses.defaultProps = defaultProps;
-TextWithEllipses.displayName = 'TextWithEllipses';
+TextWithEllipsis.propTypes = propTypes;
+TextWithEllipsis.defaultProps = defaultProps;
+TextWithEllipsis.displayName = 'TextWithEllipsis';
 
-export default TextWithEllipses;
+export default TextWithEllipsis;
diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index c769e190486a..aea493cadeb3 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -9,7 +9,7 @@ import styles from '../../../styles/styles';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Text from '../../../components/Text';
-import TextWithEllipses from '../../../components/TextWithEllipses';
+import TextWithEllipsis from '../../../components/TextWithEllipsis';
 
 const propTypes = {
     /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
@@ -53,7 +53,7 @@ class ReportTypingIndicator extends React.Component {
                 return <View style={[styles.chatItemComposeSecondaryRow]} />;
             case 1:
                 return (
-                    <TextWithEllipses
+                    <TextWithEllipsis
                         leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
                         trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         textStyle={[styles.chatItemComposeSecondaryRowSubText]}

From 5c828cdd94bceea58b2fd74dcfdbfd0fe22ccac6 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 8 Jan 2022 23:59:36 +0530
Subject: [PATCH 09/20] fix: Removed extra styling blocks and updated comments

---
 src/components/TextWithEllipsis/index.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index 10780a3ed3bc..d90740a06df8 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -7,36 +7,31 @@ import styles from '../../styles/styles';
 import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
-    /** leading text, first text of the group */
+    /** Leading text before the ellipsis */
     leadingText: PropTypes.string.isRequired,
 
-    /** trailing text, second text of the group */
+    /** Text after the ellipsis */
     trailingText: PropTypes.string.isRequired,
 
-    /** styling for leading and trailing text */
+    /** Styles for leading and trailing text */
     textStyle: stylePropTypes,
 
-    /** styling for leading text View */
+    /** Styles for leading text View */
     leadingTextParentStyle: stylePropTypes,
 
-    /** styling for trailing text View */
-    trailingTextParentStyle: stylePropTypes,
-
-    /** styling for parent View */
+    /** Styles for parent View */
     wrapperStyle: stylePropTypes,
 };
 
 const defaultProps = {
     textStyle: {},
     leadingTextParentStyle: {},
-    trailingTextParentStyle: {},
     wrapperStyle: {},
 };
 
 const TextWithEllipsis = (props) => {
     const wrapperStyles = _.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle];
     const leadingTextParentStyles = _.isArray(props.leadingTextParentStyle) ? props.leadingTextParentStyle : [props.leadingTextParentStyle];
-    const trailingTextParentStyles = _.isArray(props.trailingTextParentStyle) ? props.trailingTextParentStyle : [props.trailingTextParentStyle];
     return (
         <View style={[styles.flexRow, ...wrapperStyles]}>
             <View style={[styles.flexShrink1, ...leadingTextParentStyles]}>
@@ -44,7 +39,7 @@ const TextWithEllipsis = (props) => {
                     {props.leadingText}
                 </Text>
             </View>
-            <View style={[styles.flexShrink0, ...trailingTextParentStyles]}>
+            <View style={styles.flexShrink0}>
                 <Text style={props.textStyle}>
                     {props.trailingText}
                 </Text>

From 7552b88d0729e9092c356ab35ec059f4ebf02b61 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 00:00:58 +0530
Subject: [PATCH 10/20] fix: Updated proptype for react comp

---
 src/components/Header.js                | 2 +-
 src/components/HeaderWithCloseButton.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 868dc03e2723..d65854e5d744 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,7 +11,7 @@ const propTypes = {
     title: PropTypes.string.isRequired,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
     /** Should we show the environment badge (dev/stg)?  */
     shouldShowEnvironmentBadge: PropTypes.bool,
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
index d332699a9e7f..bb1760687737 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithCloseButton.js
@@ -17,7 +17,7 @@ const propTypes = {
     title: PropTypes.string,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
     /** Method to trigger when pressing download button of the header */
     onDownloadButtonPress: PropTypes.func,

From 36b033f46f2acdba1d0ae13dc2767844c10aa6f1 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 00:06:46 +0530
Subject: [PATCH 11/20] fix: Code cleanup and update variable naames

---
 src/components/AttachmentModal.js | 33 ++++++++++++++++---------------
 src/components/Header.js          |  4 +++-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 8ce9f27dc968..87e9e79cc305 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -74,19 +74,7 @@ class AttachmentModal extends PureComponent {
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.isValidSize = this.isValidSize.bind(this);
-        this.getSplitFileName = this.getSplitFileName.bind(this);
-    }
-
-    /**
-     * Returns the filename split into leading and trailing text
-     * @returns {Object}
-     */
-    getSplitFileName() {
-        const fileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
-        const splittedFileName = fileName.split('.');
-        const trailingText = splittedFileName.pop();
-        const leadingText = splittedFileName.join('.');
-        return {leadingText, trailingText};
+        this.splitExtensionFromFileName = this.splitExtensionFromFileName.bind(this);
     }
 
     /**
@@ -103,6 +91,19 @@ class AttachmentModal extends PureComponent {
         return modalType;
     }
 
+    /**
+     * Returns the filename split into leading and trailing text
+     * @returns {Object}
+     */
+    splitExtensionFromFileName() {
+        const fullFileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
+        const splittedFileName = fullFileName.split('.');
+        const fileExtension = splittedFileName.pop();
+        const fileName = splittedFileName.join('.');
+        return {fileName, fileExtension};
+    }
+
+
     /**
      * Execute the onConfirm callback and close the modal.
      */
@@ -144,7 +145,7 @@ class AttachmentModal extends PureComponent {
             ? [styles.imageModalImageCenterContainer]
             : [styles.imageModalImageCenterContainer, styles.p5];
 
-        const {leadingText, trailingText} = this.getSplitFileName();
+        const {fileName, fileExtension} = this.splitExtensionFromFileName();
         return (
             <>
                 <Modal
@@ -166,8 +167,8 @@ class AttachmentModal extends PureComponent {
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                         subtitle={(
                             <TextWithEllipsis
-                                leadingText={leadingText.trim()}
-                                trailingText={trailingText ? `.${trailingText.trim()}` : ''}
+                                leadingText={fileName.trim()}
+                                trailingText={fileExtension ? `.${fileExtension.trim()}` : ''}
                                 wrapperStyle={styles.w100}
                                 textStyle={styles.mutedTextLabel}
                             />
diff --git a/src/components/Header.js b/src/components/Header.js
index d65854e5d744..5dc281f4ce32 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -28,7 +28,9 @@ const Header = props => (
                 {props.title}
             </Text>
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
-            {_.isString(props.subtitle) ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : props.subtitle }
+            {_.isString(props.subtitle)
+                ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text>
+                : props.subtitle}
         </View>
         {props.shouldShowEnvironmentBadge && (
             <EnvironmentBadge />

From 5bc21a9b271c23f3f754961488750b58a3ae5223 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 00:19:17 +0530
Subject: [PATCH 12/20] fix: Moved to style array handling to utils

---
 src/components/TextWithEllipsis/index.js | 32 +++++++++++-------------
 src/styles/StyleUtils.js                 | 10 ++++++++
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index d90740a06df8..a440f50a935b 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import _ from 'underscore';
 import Text from '../Text';
 import styles from '../../styles/styles';
 import stylePropTypes from '../../styles/stylePropTypes';
+import * as StyleUtils from '../../styles/StyleUtils';
 
 const propTypes = {
     /** Leading text before the ellipsis */
@@ -29,24 +29,20 @@ const defaultProps = {
     wrapperStyle: {},
 };
 
-const TextWithEllipsis = (props) => {
-    const wrapperStyles = _.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle];
-    const leadingTextParentStyles = _.isArray(props.leadingTextParentStyle) ? props.leadingTextParentStyle : [props.leadingTextParentStyle];
-    return (
-        <View style={[styles.flexRow, ...wrapperStyles]}>
-            <View style={[styles.flexShrink1, ...leadingTextParentStyles]}>
-                <Text style={props.textStyle} numberOfLines={1}>
-                    {props.leadingText}
-                </Text>
-            </View>
-            <View style={styles.flexShrink0}>
-                <Text style={props.textStyle}>
-                    {props.trailingText}
-                </Text>
-            </View>
+const TextWithEllipsis = props => (
+    <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
+        <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
+            <Text style={props.textStyle} numberOfLines={1}>
+                {props.leadingText}
+            </Text>
         </View>
-    );
-};
+        <View style={styles.flexShrink0}>
+            <Text style={props.textStyle}>
+                {props.trailingText}
+            </Text>
+        </View>
+    </View>
+);
 
 TextWithEllipsis.propTypes = propTypes;
 TextWithEllipsis.defaultProps = defaultProps;
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index b15366c1f808..10e1b56fb412 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -375,6 +375,15 @@ function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped) {
     };
 }
 
+/**
+ * Parse styleParam and return Styles array
+ * @param {Object|Object[]} styleParam
+ * @returns {Object[]}
+ */
+function parseStyleAsArray(styleParam) {
+    return _.isArray(styleParam) ? styleParam : [styleParam];
+}
+
 export {
     getSafeAreaPadding,
     getSafeAreaMargins,
@@ -397,4 +406,5 @@ export {
     getLoginPagePromoStyle,
     getReportActionItemStyle,
     getMiniReportActionContextMenuWrapperStyle,
+    parseStyleAsArray,
 };

From 6e48f8e7bdf98f857766b71fc6d3797417d7b9f3 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 01:10:44 +0530
Subject: [PATCH 13/20] fix: Trim original filename and removed trim from props

---
 src/components/AttachmentModal.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 87e9e79cc305..552e57aaf430 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -92,18 +92,17 @@ class AttachmentModal extends PureComponent {
     }
 
     /**
-     * Returns the filename split into leading and trailing text
+     * Returns the filename split into fileName and fileExtension
      * @returns {Object}
      */
     splitExtensionFromFileName() {
-        const fullFileName = this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '');
+        const fullFileName = this.props.originalFileName ? this.props.originalFileName.trim() : lodashGet(this.state, 'file.name', '').trim();
         const splittedFileName = fullFileName.split('.');
         const fileExtension = splittedFileName.pop();
         const fileName = splittedFileName.join('.');
         return {fileName, fileExtension};
     }
 
-
     /**
      * Execute the onConfirm callback and close the modal.
      */
@@ -167,9 +166,9 @@ class AttachmentModal extends PureComponent {
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                         subtitle={(
                             <TextWithEllipsis
-                                leadingText={fileName.trim()}
-                                trailingText={fileExtension ? `.${fileExtension.trim()}` : ''}
-                                wrapperStyle={styles.w100}
+                                leadingText={fileName}
+                                trailingText={fileExtension ? `.${fileExtension}` : ''}
+                                wrapperStyle={[styles.w100]}
                                 textStyle={styles.mutedTextLabel}
                             />
                         )}

From db65a55212c02e54e91de5e8219d4f08a878c4fd Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 01:38:12 +0530
Subject: [PATCH 14/20] fix: Changed width to max-width

---
 src/components/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 5dc281f4ce32..060eb7c82a02 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -23,7 +23,7 @@ const defaultProps = {
 };
 const Header = props => (
     <View style={[styles.flex1, styles.flexRow]}>
-        <View style={styles.w100}>
+        <View style={styles.mw100}>
             <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
                 {props.title}
             </Text>

From 15b47e330ccd5bfd2d5f61f13380abf0de6963c9 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 9 Jan 2022 22:44:49 +0530
Subject: [PATCH 15/20] fix: Added space-wrap handling

---
 src/components/TextWithEllipsis/index.js | 2 +-
 src/styles/styles.js                     | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index a440f50a935b..fdfc153a548c 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -32,7 +32,7 @@ const defaultProps = {
 const TextWithEllipsis = props => (
     <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
         <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
-            <Text style={props.textStyle} numberOfLines={1}>
+            <Text style={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
                 {props.leadingText}
             </Text>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index dabd724ae5e4..fbad662f8c0a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2346,6 +2346,13 @@ const styles = {
         backgroundColor: colors.black,
         flex: 1,
     },
+
+    textWithEllipsis: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        ...whiteSpace.noWrap,
+        ...display.dInline,
+    },
 };
 
 export default styles;

From 042b7eb72ad3c6bd7fceb014a12f39528eb93567 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 10 Jan 2022 00:27:37 +0530
Subject: [PATCH 16/20] fix: Changed Text with TextWithOverflow component to
 handle inline display

---
 src/components/TextWithEllipsis/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index fdfc153a548c..8a9e333c82d0 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Text from '../Text';
+import TextWithOverflow from './TextWithOverflow';
 import styles from '../../styles/styles';
 import stylePropTypes from '../../styles/stylePropTypes';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -32,9 +33,9 @@ const defaultProps = {
 const TextWithEllipsis = props => (
     <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
         <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
-            <Text style={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
+            <TextWithOverflow textStyle={props.textStyle} numberOfLines={1}>
                 {props.leadingText}
-            </Text>
+            </TextWithOverflow>
         </View>
         <View style={styles.flexShrink0}>
             <Text style={props.textStyle}>

From 20f897c87d907ae1f3dfb18b7d744f10dae1cb42 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 10 Jan 2022 00:28:16 +0530
Subject: [PATCH 17/20] fix: Added TextWtihOverflow component to handle
 ellipsis with inline display

---
 .../TextWithOverflow/BaseTextWithOverflow.js  | 19 ++++++++++++++++
 .../TextWithOverflow/index.js                 | 22 +++++++++++++++++++
 .../TextWithOverflow/index.native.js          | 18 +++++++++++++++
 .../textWithOverflowPropTypes.js              | 22 +++++++++++++++++++
 4 files changed, 81 insertions(+)
 create mode 100644 src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
 create mode 100644 src/components/TextWithEllipsis/TextWithOverflow/index.js
 create mode 100644 src/components/TextWithEllipsis/TextWithOverflow/index.native.js
 create mode 100644 src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js

diff --git a/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js b/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
new file mode 100644
index 000000000000..fc5f43912b39
--- /dev/null
+++ b/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Text from '../../Text';
+import {propTypes, defaultProps} from './textWithOverflowPropTypes';
+
+const BaseTextWithInlineDisplay = props => (
+    <Text
+        style={props.textStyle}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </Text>
+);
+
+BaseTextWithInlineDisplay.propTypes = propTypes;
+BaseTextWithInlineDisplay.defaultProps = defaultProps;
+BaseTextWithInlineDisplay.displayName = 'BaseTextWithInlineDisplay';
+
+export default BaseTextWithInlineDisplay;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/index.js b/src/components/TextWithEllipsis/TextWithOverflow/index.js
new file mode 100644
index 000000000000..f4abde40df9c
--- /dev/null
+++ b/src/components/TextWithEllipsis/TextWithOverflow/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import _ from 'underscore';
+import BaseTextWithOverflow from './BaseTextWithOverflow';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import {propTypes, defaultProps} from './textWithOverflowPropTypes';
+
+const TextWithOverflow = props => (
+    <BaseTextWithOverflow
+        textStyle={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {..._.omit(props, 'textStyle')}
+    >
+        {props.children}
+    </BaseTextWithOverflow>
+);
+
+TextWithOverflow.propTypes = propTypes;
+TextWithOverflow.defaultProps = defaultProps;
+TextWithOverflow.displayName = 'TextWithOverflow';
+
+export default TextWithOverflow;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/index.native.js b/src/components/TextWithEllipsis/TextWithOverflow/index.native.js
new file mode 100644
index 000000000000..fe73dff4eb5b
--- /dev/null
+++ b/src/components/TextWithEllipsis/TextWithOverflow/index.native.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseTextWithOverflow from './BaseTextWithOverflow';
+import {propTypes, defaultProps} from './textWithOverflowPropTypes';
+
+const TextWithOverflow = props => (
+    <BaseTextWithOverflow
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </BaseTextWithOverflow>
+);
+
+TextWithOverflow.propTypes = propTypes;
+TextWithOverflow.defaultProps = defaultProps;
+TextWithOverflow.displayName = 'TextWithOverflow';
+
+export default TextWithOverflow;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js b/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js
new file mode 100644
index 000000000000..513a8b9a8118
--- /dev/null
+++ b/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import stylePropTypes from '../../../styles/stylePropTypes';
+
+const propTypes = {
+    /** Styles for Text */
+    textStyle: stylePropTypes,
+
+    /** Children to wrap with Tooltip. */
+    children: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array,
+        PropTypes.object,
+    ]).isRequired,
+};
+
+const defaultProps = {
+    textStyle: {},
+};
+
+export {
+    propTypes, defaultProps,
+};

From 2ca4803c00dfc63bf8afa4b070406a54fb1ba799 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 19 Jan 2022 03:52:34 +0530
Subject: [PATCH 18/20] fix: Revert TextWithOverflow component changes

---
 .../TextWithOverflow/BaseTextWithOverflow.js  | 19 ----------------
 .../TextWithOverflow/index.js                 | 22 -------------------
 .../TextWithOverflow/index.native.js          | 18 ---------------
 .../textWithOverflowPropTypes.js              | 22 -------------------
 src/components/TextWithEllipsis/index.js      |  5 ++---
 5 files changed, 2 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
 delete mode 100644 src/components/TextWithEllipsis/TextWithOverflow/index.js
 delete mode 100644 src/components/TextWithEllipsis/TextWithOverflow/index.native.js
 delete mode 100644 src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js

diff --git a/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js b/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
deleted file mode 100644
index fc5f43912b39..000000000000
--- a/src/components/TextWithEllipsis/TextWithOverflow/BaseTextWithOverflow.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Text from '../../Text';
-import {propTypes, defaultProps} from './textWithOverflowPropTypes';
-
-const BaseTextWithInlineDisplay = props => (
-    <Text
-        style={props.textStyle}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </Text>
-);
-
-BaseTextWithInlineDisplay.propTypes = propTypes;
-BaseTextWithInlineDisplay.defaultProps = defaultProps;
-BaseTextWithInlineDisplay.displayName = 'BaseTextWithInlineDisplay';
-
-export default BaseTextWithInlineDisplay;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/index.js b/src/components/TextWithEllipsis/TextWithOverflow/index.js
deleted file mode 100644
index f4abde40df9c..000000000000
--- a/src/components/TextWithEllipsis/TextWithOverflow/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import _ from 'underscore';
-import BaseTextWithOverflow from './BaseTextWithOverflow';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import {propTypes, defaultProps} from './textWithOverflowPropTypes';
-
-const TextWithOverflow = props => (
-    <BaseTextWithOverflow
-        textStyle={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {..._.omit(props, 'textStyle')}
-    >
-        {props.children}
-    </BaseTextWithOverflow>
-);
-
-TextWithOverflow.propTypes = propTypes;
-TextWithOverflow.defaultProps = defaultProps;
-TextWithOverflow.displayName = 'TextWithOverflow';
-
-export default TextWithOverflow;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/index.native.js b/src/components/TextWithEllipsis/TextWithOverflow/index.native.js
deleted file mode 100644
index fe73dff4eb5b..000000000000
--- a/src/components/TextWithEllipsis/TextWithOverflow/index.native.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import BaseTextWithOverflow from './BaseTextWithOverflow';
-import {propTypes, defaultProps} from './textWithOverflowPropTypes';
-
-const TextWithOverflow = props => (
-    <BaseTextWithOverflow
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </BaseTextWithOverflow>
-);
-
-TextWithOverflow.propTypes = propTypes;
-TextWithOverflow.defaultProps = defaultProps;
-TextWithOverflow.displayName = 'TextWithOverflow';
-
-export default TextWithOverflow;
diff --git a/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js b/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js
deleted file mode 100644
index 513a8b9a8118..000000000000
--- a/src/components/TextWithEllipsis/TextWithOverflow/textWithOverflowPropTypes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import stylePropTypes from '../../../styles/stylePropTypes';
-
-const propTypes = {
-    /** Styles for Text */
-    textStyle: stylePropTypes,
-
-    /** Children to wrap with Tooltip. */
-    children: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-        PropTypes.object,
-    ]).isRequired,
-};
-
-const defaultProps = {
-    textStyle: {},
-};
-
-export {
-    propTypes, defaultProps,
-};
diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index 8a9e333c82d0..fdfc153a548c 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Text from '../Text';
-import TextWithOverflow from './TextWithOverflow';
 import styles from '../../styles/styles';
 import stylePropTypes from '../../styles/stylePropTypes';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -33,9 +32,9 @@ const defaultProps = {
 const TextWithEllipsis = props => (
     <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
         <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
-            <TextWithOverflow textStyle={props.textStyle} numberOfLines={1}>
+            <Text style={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
                 {props.leadingText}
-            </TextWithOverflow>
+            </Text>
         </View>
         <View style={styles.flexShrink0}>
             <Text style={props.textStyle}>

From 2d6065ff9d57987a7589f655d7258e9b6444c916 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 19 Jan 2022 04:25:06 +0530
Subject: [PATCH 19/20] fix: Removed ellipses extra styles

---
 src/components/TextWithEllipsis/index.js | 2 +-
 src/styles/styles.js                     | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index fdfc153a548c..b0e4ee521ff3 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -32,7 +32,7 @@ const defaultProps = {
 const TextWithEllipsis = props => (
     <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
         <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
-            <Text style={[styles.textWithEllipsis, ...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
+            <Text style={[...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
                 {props.leadingText}
             </Text>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index ea7f4bd5fc4c..885fe89d8650 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2394,13 +2394,6 @@ const styles = {
         flex: 1,
     },
 
-    textWithEllipsis: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        ...whiteSpace.noWrap,
-        ...display.dInline,
-    },
-
     errorPageContainer: {
         backgroundColor: themeColors.componentBG,
     },

From aa9e4800b5642f71685b412cf375ea5f95b81a78 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 19 Jan 2022 21:18:19 +0530
Subject: [PATCH 20/20] fix: Remove extra bindings

---
 src/components/AttachmentModal.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 552e57aaf430..1fc8d10c5022 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -74,7 +74,6 @@ class AttachmentModal extends PureComponent {
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.isValidSize = this.isValidSize.bind(this);
-        this.splitExtensionFromFileName = this.splitExtensionFromFileName.bind(this);
     }
 
     /**