Merge pull request #3848 from Expensify/Rory-FixFonts

Fix text styles by removing uses of the non-custom text component

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {StyleSheet} from 'react-native';
+import Text from '../../Text';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 
 /*

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Linking, StyleSheet, Text} from 'react-native';
+import {Linking, StyleSheet} from 'react-native';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import fileDownload from '../../../libs/fileDownload';
+import Text from '../../Text';
 
 /*
  * This is a default anchor component for regular links.

src/components/AttachmentView.js

@@ -1,5 +1,5 @@
 import React, {memo} from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import styles from '../styles/styles';
@@ -9,6 +9,7 @@ import Icon from './Icon';
 import {Paperclip} from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
+import Text from './Text';
 
 const propTypes = {
     /** URL to full-sized attachment */
@@ -56,7 +57,7 @@ const AttachmentView = (props) => {
             <View style={styles.mr2}>
                 <Icon src={Paperclip} />
             </View>
-            <Text style={[styles.textP, styles.textStrong]}>{props.file && props.file.name}</Text>
+            <Text style={[styles.textStrong]}>{props.file && props.file.name}</Text>
         </View>
     );
 };

src/components/Button.js

@@ -2,11 +2,12 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-    Text, Pressable, ActivityIndicator,
+    Pressable, ActivityIndicator,
 } from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import OpacityView from './OpacityView';
+import Text from './Text';
 
 const propTypes = {
     /** The text for the button label */

src/components/CheckboxWithLabel.js

@@ -58,7 +58,7 @@ const CheckboxWithLabel = ({
                 ]}
             >
                 {label && (
-                    <Text style={[styles.ml2, styles.textP]}>
+                    <Text style={[styles.ml2]}>
                         {label}
                     </Text>
                 )}

src/components/ConfirmModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Header from './Header';
 import Modal from './Modal';
@@ -9,6 +9,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import Button from './Button';
+import Text from './Text';
 
 const propTypes = {
     /** Title of the modal */
@@ -61,7 +62,7 @@ const ConfirmModal = props => (
                 <Header title={props.title} />
             </View>
 
-            <Text style={styles.textP}>
+            <Text>
                 {props.prompt}
             </Text>
 

src/components/DisplayNames/index.js

@@ -1,9 +1,10 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import {propTypes, defaultProps} from './displayNamesPropTypes';
 import styles from '../../styles/styles';
 import Tooltip from '../Tooltip';
+import Text from '../Text';
 
 class DisplayNames extends PureComponent {
     constructor(props) {
@@ -83,7 +84,7 @@ class DisplayNames extends PureComponent {
 
             // Tokenization of string only support 1 numberOfLines on Web
             <Text
-                style={[this.props.textStyles, styles.pRelative]}
+                style={[...this.props.textStyles, styles.pRelative]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
                 ref={el => this.containerRef = el}

src/components/DisplayNames/index.native.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Text} from 'react-native';
 import {propTypes, defaultProps} from './displayNamesPropTypes';
+import Text from '../Text';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 const DisplayNames = ({

src/components/EnvironmentBadge.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import styles from '../styles/styles';
 import CONST from '../CONST';
+import Text from './Text';
 import withEnvironment, {environmentPropTypes} from './withEnvironment';
 
 const EnvironmentBadge = (props) => {

src/components/GrowlNotification/index.js

@@ -1,11 +1,12 @@
 import React, {Component} from 'react';
 import {
-    Text, View, Animated,
+    View, Animated,
 } from 'react-native';
 import {
     Directions, FlingGestureHandler, State, TouchableWithoutFeedback,
 } from 'react-native-gesture-handler';
 import colors from '../../styles/colors';
+import Text from '../Text';
 import Icon from '../Icon';
 import {Checkmark, Exclamation} from '../Icon/Expensicons';
 import styles from '../../styles/styles';

src/components/IOUBadge.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Text, Pressable} from 'react-native';
+import {Pressable} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../ONYXKEYS';
 import styles, {getBadgeColorStyle} from '../styles/styles';
@@ -9,6 +9,7 @@ import ROUTES from '../ROUTES';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import CONST from '../CONST';
+import Text from './Text';
 
 const propTypes = {
     /** IOU Report data object */

src/components/InlineCodeBlock/WrappedText.js

@@ -1,8 +1,9 @@
 import _ from 'underscore';
 import React, {Fragment} from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
+import Text from '../Text';
 
 /**
  * Breaks the text into matrix

src/components/MenuItem.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import {
-    View, Text, Pressable,
+    View, Pressable,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import Text from './Text';
 import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles/styles';
 import Icon from './Icon';
 import {ArrowRight} from './Icon/Expensicons';

src/components/OptionsList.js

@@ -1,11 +1,12 @@
 import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import OptionRow from '../pages/home/sidebar/OptionRow';
 import optionPropTypes from './optionPropTypes';
 import SectionList from './SectionList';
+import Text from './Text';
 
 const propTypes = {
     /** option Background Color */

src/components/PopoverMenu/BasePopoverMenu.js

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Popover from '../Popover';
 import styles from '../../styles/styles';
@@ -9,6 +9,7 @@ import {
     propTypes as createMenuPropTypes,
     defaultProps as defaultCreateMenuPropTypes,
 } from './PopoverMenuPropTypes';
+import Text from '../Text';
 
 const propTypes = {
     /** Callback fired when the menu is completely closed */

src/components/ReportActionItem/IOUPreview.js

@@ -3,7 +3,6 @@ import {
     View,
     ActivityIndicator,
     TouchableOpacity,
-    Text,
     TouchableWithoutFeedback,
 } from 'react-native';
 import PropTypes from 'prop-types';
@@ -21,6 +20,7 @@ import themeColors from '../../styles/themes/default';
 import Icon from '../Icon';
 import CONST from '../../CONST';
 import {Checkmark} from '../Icon/Expensicons';
+import Text from '../Text';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */

src/components/ReportActionItem/IOUQuote.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import Text from '../Text';
 import styles from '../../styles/styles';
 import ReportActionPropTypes from '../../pages/home/report/ReportActionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';

src/components/ReportTransaction.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {
-    Text, View, Pressable, ActivityIndicator,
+    View, Pressable, ActivityIndicator,
 } from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default';
 import {rejectTransaction} from '../libs/actions/IOU';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle';
+import Text from './Text';
 
 const propTypes = {
     /** The chatReport which the transaction is associated with */

src/components/Text.js

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import {Text as RNText} from 'react-native';
 import fontFamily from '../styles/fontFamily';
 import themeColors from '../styles/themes/default';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** The color of the text */
@@ -28,22 +29,22 @@ const propTypes = {
 };
 const defaultProps = {
     color: themeColors.text,
-    fontSize: 15,
+    fontSize: variables.fontSizeNormal,
     family: 'GTA',
     textAlign: null,
     children: null,
     style: {},
 };
 
-const Text = ({
+const Text = React.forwardRef(({
     color,
     fontSize,
     textAlign,
     children,
     family,
     style,
     ...props
-}) => {
+}, ref) => {
     // If the style prop is an array of styles, we need to mix them all together
     const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
         ...finalStyles,
@@ -61,9 +62,9 @@ const Text = ({
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <RNText style={[componentStyle]} {...props}>{children}</RNText>
+        <RNText ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
     );
-};
+});
 
 Text.propTypes = propTypes;
 Text.defaultProps = defaultProps;

src/components/TextInputAutoWidth.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles, {getAutoGrowTextInputStyle} from '../styles/styles';
+import Text from './Text';
 import TextInputFocusable from './TextInputFocusable';
 
 const propTypes = {

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -1,8 +1,9 @@
 import React, {memo} from 'react';
 import PropTypes from 'prop-types';
-import {Animated, Text, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import ReactDOM from 'react-dom';
 import getTooltipStyles from '../../styles/getTooltipStyles';
+import Text from '../Text';
 
 const propTypes = {
     /** Window width */

src/components/WelcomeText.js

@@ -1,33 +1,36 @@
 import React from 'react';
-import {Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
 
 const propTypes = {
 
     /** Fontsize */
-    textSize: PropTypes.oneOf(['default', 'large']),
+    smallFontSize: PropTypes.bool,
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    textSize: 'default',
+    smallFontSize: false,
 };
 
-const WelcomeText = props => (
-    <>
-        <Text style={[props.textSize === 'large' ? styles.textP : styles.textLabel, styles.textStrong, styles.mb1]}>
-            {props.translate('welcomeText.phrase1')}
-        </Text>
-        <Text style={[props.textSize === 'large' ? styles.textP : styles.textLabel]}>
-            {props.translate('welcomeText.phrase2')}
-            {' '}
-            {props.translate('welcomeText.phrase3')}
-        </Text>
-    </>
-);
+const WelcomeText = (props) => {
+    const textSize = props.smallFontSize ? styles.textLabel : undefined;
+    return (
+        <>
+            <Text style={[textSize, styles.textStrong, styles.mb1]}>
+                {props.translate('welcomeText.phrase1')}
+            </Text>
+            <Text style={[textSize]}>
+                {props.translate('welcomeText.phrase2')}
+                {' '}
+                {props.translate('welcomeText.phrase3')}
+            </Text>
+        </>
+    );
+};
 
 WelcomeText.displayName = 'WelcomeText';
 WelcomeText.propTypes = propTypes;

src/pages/DetailsPage.js

@@ -103,7 +103,7 @@ const DetailsPage = ({
                                             ? 'common.phoneNumber'
                                             : 'common.email')}
                                     </Text>
-                                    <Text style={[styles.textP]} numberOfLines={1}>
+                                    <Text numberOfLines={1}>
                                         {isSMSLogin
                                             ? toLocalPhone(getPhoneNumber(details))
                                             : details.login}
@@ -115,7 +115,7 @@ const DetailsPage = ({
                                     <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         {translate('profilePage.preferredPronouns')}
                                     </Text>
-                                    <Text style={[styles.textP]} numberOfLines={1}>
+                                    <Text numberOfLines={1}>
                                         {details.pronouns}
                                     </Text>
                                 </View>
@@ -125,7 +125,7 @@ const DetailsPage = ({
                                     <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
                                         {translate('detailsPage.localTime')}
                                     </Text>
-                                    <Text style={[styles.textP]} numberOfLines={1}>
+                                    <Text numberOfLines={1}>
                                         {timezone.format('LT')}
                                         {' '}
                                         {currentTime}