fix 15438 maintain white space in display name

src/components/DisplayNames/index.js

@@ -71,7 +71,7 @@ class DisplayNames extends PureComponent {
             // No need for any complex text-splitting, just return a simple Text component
             return (
                 <Text
-                    style={this.props.textStyles}
+                    style={[...this.props.textStyles, (this.props.numberOfLines === 1 ? styles.pre : styles.preWrap)]}
                     numberOfLines={this.props.numberOfLines}
                 >
                     {this.props.fullTitle}
@@ -100,7 +100,7 @@ class DisplayNames extends PureComponent {
                             >
                                 {/*  // We need to get the refs to all the names which will be used to correct
                                     the horizontal position of the tooltip */}
-                                <Text ref={el => this.childRefs[index] = el} style={this.props.textStyles}>
+                                <Text ref={el => this.childRefs[index] = el} style={[...this.props.textStyles, styles.preWrap]}>
                                     {displayName}
                                 </Text>
                             </Tooltip>

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -44,6 +44,10 @@ const customHTMLElementModels = {
         tagName: 'email-comment',
         mixedUAStyles: {whiteSpace: 'normal'},
     }),
+    strong: defaultHTMLElementModels.span.extend({
+        tagName: 'strong',
+        mixedUAStyles: {whiteSpace: 'pre'},
+    }),
 };
 
 const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};

src/components/Header.js

@@ -34,7 +34,7 @@ const Header = props => (
             </Text>
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
             {_.isString(props.subtitle)
-                ? Boolean(props.subtitle) && <Text style={[styles.mutedTextLabel]} numberOfLines={1}>{props.subtitle}</Text>
+                ? Boolean(props.subtitle) && <Text style={[styles.mutedTextLabel, styles.pre]} numberOfLines={1}>{props.subtitle}</Text>
                 : props.subtitle}
         </View>
         {props.shouldShowEnvironmentBadge && (

src/components/LHNOptionsList/OptionRowLHN.js

@@ -67,13 +67,13 @@ const OptionRowLHN = (props) => {
         : styles.sidebarLinkText;
     const textUnreadStyle = optionItem.isUnread
         ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
-    const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, ...textUnreadStyle], props.style);
+    const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, ...textUnreadStyle], props.style);
     const textPillStyle = props.isFocused
         ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)]
         : [styles.ml1];
     const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT
-        ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
-        : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
+        ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
+        : [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting], props.style);
     const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT
         ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
         : [styles.flex1];

src/components/MenuItem.js

@@ -58,6 +58,7 @@ const MenuItem = (props) => {
         (props.icon ? styles.ml3 : undefined),
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
+        styles.pre,
     ], props.style);
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,

src/components/OptionRow.js

@@ -118,8 +118,8 @@ class OptionRow extends Component {
             : styles.sidebarLinkText;
         const textUnreadStyle = (this.props.boldStyle || this.props.option.boldStyle)
             ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
-        const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style);
-        const alternateTextStyle = StyleUtils.combineStyles(textStyle, styles.optionAlternateText, styles.textLabelSupporting, this.props.style);
+        const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre);
+        const alternateTextStyle = StyleUtils.combineStyles(textStyle, styles.optionAlternateText, styles.textLabelSupporting, this.props.style, styles.pre);
         const contentContainerStyles = [styles.flex1];
         const sidebarInnerRowStyle = StyleSheet.flatten([
             styles.chatLinkRowPressable,

src/pages/DetailsPage.js

@@ -147,7 +147,7 @@ class DetailsPage extends React.PureComponent {
                                     )}
                                 </AttachmentModal>
                                 {details.displayName && (
-                                    <Text style={[styles.textHeadline, styles.mb6]} numberOfLines={1}>
+                                    <Text style={[styles.textHeadline, styles.mb6, styles.pre]} numberOfLines={1}>
                                         {isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
                                     </Text>
                                 )}

src/pages/ReportDetailsPage.js

@@ -139,7 +139,7 @@ class ReportDetailsPage extends Component {
                                             displayNamesWithTooltips={displayNamesWithTooltips}
                                             tooltipEnabled
                                             numberOfLines={1}
-                                            textStyles={[styles.textHeadline, styles.mb2, styles.textAlignCenter]}
+                                            textStyles={[styles.textHeadline, styles.mb2, styles.textAlignCenter, styles.pre]}
                                             shouldUseFullTitle={isChatRoom || isPolicyExpenseChat}
                                         />
                                     </View>
@@ -149,6 +149,7 @@ class ReportDetailsPage extends Component {
                                             styles.optionAlternateText,
                                             styles.textLabelSupporting,
                                             styles.mb2,
+                                            styles.pre,
                                         ]}
                                         numberOfLines={1}
                                     >

src/pages/ReportSettingsPage.js

@@ -192,7 +192,7 @@ class ReportSettingsPage extends Component {
                                                     <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
                                                         {this.props.translate('newRoomPage.roomName')}
                                                     </Text>
-                                                    <Text numberOfLines={1} style={[styles.optionAlternateText]}>
+                                                    <Text numberOfLines={1} style={[styles.optionAlternateText, styles.pre]}>
                                                         {this.props.report.reportName}
                                                     </Text>
                                                 </View>
@@ -213,7 +213,7 @@ class ReportSettingsPage extends Component {
                                 <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
                                     {this.props.translate('workspace.common.workspace')}
                                 </Text>
-                                <Text numberOfLines={1} style={[styles.optionAlternateText]}>
+                                <Text numberOfLines={1} style={[styles.optionAlternateText, styles.pre]}>
                                     {linkedWorkspace.name}
                                 </Text>
                             </View>

src/pages/home/HeaderView.js

@@ -123,7 +123,7 @@ const HeaderView = (props) => {
                                     displayNamesWithTooltips={displayNamesWithTooltips}
                                     tooltipEnabled
                                     numberOfLines={1}
-                                    textStyles={[styles.headerText, styles.textNoWrap]}
+                                    textStyles={[styles.headerText, styles.pre]}
                                     shouldUseFullTitle={isChatRoom || isPolicyExpenseChat}
                                 />
                                 {(isChatRoom || isPolicyExpenseChat) && (
@@ -132,6 +132,7 @@ const HeaderView = (props) => {
                                             styles.sidebarLinkText,
                                             styles.optionAlternateText,
                                             styles.textLabelSupporting,
+                                            styles.pre,
                                         ]}
                                         numberOfLines={1}
                                     >

src/pages/home/report/ParticipantLocalTime.js

@@ -65,6 +65,7 @@ class ParticipantLocalTime extends PureComponent {
                     style={[
                         styles.chatItemComposeSecondaryRowSubText,
                         styles.chatItemComposeSecondaryRowOffset,
+                        styles.pre,
                     ]}
                     numberOfLines={1}
                 >

src/pages/home/report/ReportActionItemFragment.js

@@ -140,7 +140,7 @@ const ReportActionItemFragment = (props) => {
                 <Tooltip text={props.tooltipText}>
                     <Text
                         numberOfLines={props.isSingleLine ? 1 : undefined}
-                        style={[styles.chatItemMessageHeaderSender]}
+                        style={[styles.chatItemMessageHeaderSender, (props.isSingleLine ? styles.pre : styles.preWrap)]}
                     >
                         {Str.htmlDecode(props.fragment.text)}
                     </Text>

src/pages/settings/InitialSettingsPage.js

@@ -274,7 +274,7 @@ class InitialSettingsPage extends React.Component {
 
                                     <Pressable style={[styles.mt1, styles.mw100]} onPress={this.openProfileSettings}>
                                         <Tooltip text={this.props.translate('common.profile')}>
-                                            <Text style={[styles.textHeadline]} numberOfLines={1}>
+                                            <Text style={[styles.textHeadline, styles.pre]} numberOfLines={1}>
                                                 {this.props.currentUserPersonalDetails.displayName
                                                     ? this.props.currentUserPersonalDetails.displayName
                                                     : Str.removeSMSDomain(this.props.session.email)}

src/pages/workspace/WorkspaceInitialPage.js

@@ -220,6 +220,7 @@ class WorkspaceInitialPage extends React.Component {
                                                             style={[
                                                                 styles.textHeadline,
                                                                 styles.alignSelfCenter,
+                                                                styles.pre,
                                                             ]}
                                                         >
                                                             {this.props.policy.name}

src/styles/styles.js

@@ -323,6 +323,7 @@ const styles = {
 
     textHeadline: {
         ...headlineFont,
+        ...whiteSpace.preWrap,
         color: themeColors.heading,
         fontSize: variables.fontSizeXLarge,
     },
@@ -2888,6 +2889,7 @@ const styles = {
         flexShrink: 0,
         maxWidth: variables.badgeMaxWidth,
         fontSize: variables.fontSizeSmall,
+        ...whiteSpace.pre,
         ...spacing.ph2,
     },
 

src/styles/utilities/whiteSpace/index.js

@@ -5,4 +5,7 @@ export default {
     preWrap: {
         whiteSpace: 'pre-wrap',
     },
+    pre: {
+        whiteSpace: 'pre',
+    },
 };