Merge pull request #20528 from s-alves10/fix/issue-17368

fix: missing copy icons and social icons on Android
Expensify · Jun 14, 2023 · ee0ffa8 · ee0ffa8
2 parents f409019 + 38ff87c
commit ee0ffa8
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 26 deletions.
diff --git a/src/components/PressableWithDelayToggle.js b/src/components/PressableWithDelayToggle.js
@@ -98,9 +98,10 @@ function PressableWithDelayToggle(props) {
                 <>
                     <Text
                         suppressHighlighting
-                        style={[styles.mr1, ...props.textStyles]}
+                        style={props.textStyles}
                     >
                         {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
+                        &nbsp;
                     </Text>
                     <Pressable
                         ref={props.innerRef}

diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -118,7 +118,7 @@ function ContactMethodsPage(props) {
             />
             <ScrollView>
                 <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
-                    <Text>
+                    <Text numberOfLines={100}>
                         {props.translate('contacts.helpTextBeforeEmail')}
                         <CopyTextToClipboard
                             text="[email protected]"

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
@@ -191,7 +191,7 @@ function Footer(props) {
                                         </Hoverable>
                                     ))}
                                     {i === 2 && (
-                                        <View style={styles.mt5}>
+                                        <View style={styles.mt4}>
                                             <Socials />
                                         </View>
                                     )}

diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import * as Link from '../../libs/actions/Link';
 import Icon from '../../components/Icon';
-import Text from '../../components/Text';
+import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
 import CONST from '../../CONST';
-import Hoverable from '../../components/Hoverable';
-import TextLink from '../../components/TextLink';
 
 const socialsList = [
     {
@@ -36,27 +35,30 @@ const socialsList = [
 
 function Socials() {
     return (
-        <Text>
+        <View style={[styles.flexRow, styles.flexWrap]}>
             {_.map(socialsList, (social) => (
-                <Hoverable key={social.link}>
-                    {(hovered) => (
-                        <View>
-                            <TextLink
-                                style={styles.pr1}
-                                href={social.link}
-                            >
-                                <Icon
-                                    src={social.iconURL}
-                                    height={variables.iconSizeLarge}
-                                    width={variables.iconSizeLarge}
-                                    fill={hovered ? themeColors.link : themeColors.textLight}
-                                />
-                            </TextLink>
-                        </View>
+                <PressableWithoutFeedback
+                    key={social.link}
+                    href={social.link}
+                    onPress={(e) => {
+                        e.preventDefault();
+                        Link.openExternalLink(social.link);
+                    }}
+                    accessible={false}
+                    style={[styles.mr1, styles.mt1]}
+                    shouldUseAutoHitSlop={false}
+                >
+                    {({hovered, pressed}) => (
+                        <Icon
+                            src={social.iconURL}
+                            height={variables.iconSizeLarge}
+                            width={variables.iconSizeLarge}
+                            fill={hovered || pressed ? themeColors.link : themeColors.textLight}
+                        />
                     )}
-                </Hoverable>
+                </PressableWithoutFeedback>
             ))}
-        </Text>
+        </View>
     );
 }
 

diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -61,7 +61,7 @@ function WorkspaceBillsFirstSection(props) {
             containerStyles={[styles.cardSection]}
         >
             <View style={[styles.mv3]}>
-                <Text>
+                <Text numberOfLines={100}>
                     {props.translate('workspace.bills.askYourVendorsBeforeEmail')}
                     {props.user.isFromPublicDomain ? (
                         <TextLink onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -152,7 +152,7 @@ class WorkspaceReimburseView extends React.Component {
                     ]}
                 >
                     <View style={[styles.mv3, styles.flexRow, styles.flexWrap]}>
-                        <Text>
+                        <Text numberOfLines={100}>
                             {this.props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
                             <CopyTextToClipboard
                                 text="[email protected]"