Remove clipped texts throughout the app when device font size is increased

src/components/Button.js

@@ -214,7 +214,7 @@ class Button extends Component {
                         {textComponent}
                     </View>
                     {this.props.shouldShowRightIcon && (
-                        <View>
+                        <View style={styles.justifyContentCenter}>
                             <Icon
                                 src={this.props.iconRight}
                                 fill={this.props.iconFill}

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -50,7 +50,7 @@ const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]
 // costly invalidations and commits.
 const BaseHTMLEngineProvider = (props) => {
     // We need to memoize this prop to make it referentially stable.
-    const defaultTextProps = useMemo(() => ({selectable: props.textSelectable}), [props.textSelectable]);
+    const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false}), [props.textSelectable]);
 
     // We need to pass multiple system-specific fonts for emojis but
     // we can't apply multiple fonts at once so we need to pass fallback fonts.

src/components/Picker/BasePicker/index.js

@@ -53,6 +53,7 @@ class BasePicker extends React.Component {
                 fixAndroidTouchableBug
                 onOpen={this.props.onOpen}
                 onClose={this.props.onClose}
+                textInputProps={{allowFontScaling: false}}
                 pickerProps={{
                     onFocus: this.props.onOpen,
                     onBlur: this.executeOnCloseAndOnBlur,

src/components/RNTextInput.js

@@ -15,6 +15,7 @@ const defaultProps = {
 
 const RNTextInput = props => (
     <TextInput
+        allowFontScaling={false}
         ref={(ref) => {
             if (!_.isFunction(props.forwardedRef)) {
                 return;

src/components/TestToolRow.js

@@ -14,7 +14,7 @@ const propTypes = {
 
 const TestToolRow = props => (
     <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter]}>
-        <View style={styles.flex3}>
+        <View style={styles.flex2}>
             <Text>
                 {props.title}
             </Text>

src/components/Text.js

@@ -64,7 +64,7 @@ const Text = React.forwardRef(({
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <RNText ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
+        <RNText allowFontScaling={false} ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
     );
 });
 

src/components/TextInput/TextInputLabel/index.native.js

@@ -15,6 +15,7 @@ class TextInputLabel extends PureComponent {
     render() {
         return (
             <Animated.Text
+                allowFontScaling={false}
                 onLayout={({nativeEvent}) => {
                     this.setState({width: nativeEvent.layout.width});
                 }}

src/components/TextInput/styleConst.js

@@ -1,7 +1,9 @@
+import variables from '../../styles/variables';
+
 const ACTIVE_LABEL_TRANSLATE_Y = 4;
 const ACTIVE_LABEL_SCALE = 0.8668;
 
-const INACTIVE_LABEL_TRANSLATE_Y = 16;
+const INACTIVE_LABEL_TRANSLATE_Y = variables.INACTIVE_LABEL_TRANSLATE_Y;
 const INACTIVE_LABEL_SCALE = 1;
 
 export {

src/pages/home/report/FloatingMessageCounter/index.js

@@ -25,7 +25,7 @@ const defaultProps = {
     onClick: () => {},
 };
 
-const MARKER_INACTIVE_TRANSLATE_Y = -30;
+const MARKER_INACTIVE_TRANSLATE_Y = -40;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 
 class FloatingMessageCounter extends PureComponent {
@@ -75,7 +75,7 @@ class FloatingMessageCounter extends PureComponent {
                             small
                             onPress={this.props.onClick}
                             ContentComponent={() => (
-                                <View style={[styles.flexRow]}>
+                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                     <Icon small src={Expensicons.DownArrow} fill={themeColors.textReversed} />
                                     <Text
                                         selectable={false}

src/styles/styles.js

@@ -29,7 +29,7 @@ const picker = {
     paddingHorizontal: 11,
     paddingBottom: 8,
     paddingTop: 23,
-    height: 52,
+    height: variables.inputHeight,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: themeColors.border,
@@ -215,25 +215,25 @@ const styles = {
 
     label: {
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     textLabel: {
         color: themeColors.text,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     mutedTextLabel: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     textMicro: {
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textMicroBold: {
@@ -247,7 +247,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textExtraSmallSupporting: {
@@ -389,20 +389,23 @@ const styles = {
 
     buttonSmallText: {
         fontSize: variables.fontSizeSmall,
+        lineHeight: variables.lineHeightSmallFont,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         textAlign: 'center',
     },
 
     buttonMediumText: {
         fontSize: variables.fontSizeLabel,
+        lineHeight: variables.lineHeightLabelFont,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         textAlign: 'center',
     },
 
     buttonLargeText: {
         fontSize: variables.fontSizeNormal,
+        lineHeight: variables.lineHeightNormalFont,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         textAlign: 'center',
@@ -603,7 +606,7 @@ const styles = {
     badgeText: {
         color: themeColors.text,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -650,7 +653,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     chatItemComposeSecondaryRowOffset: {
@@ -673,7 +676,7 @@ const styles = {
     },
 
     componentHeightLarge: {
-        height: variables.componentSizeLarge,
+        height: variables.inputHeight,
     },
 
     textInputContainer: {
@@ -801,7 +804,7 @@ const styles = {
     },
     picker: (disabled = false, error = false, focused = false) => ({
         iconContainer: {
-            top: 16,
+            top: Math.round(variables.inputHeight * 0.5) - 10,
             right: 11,
             zIndex: -1,
         },
@@ -859,21 +862,21 @@ const styles = {
         fontWeight: fontWeightBold,
         color: themeColors.heading,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
         marginBottom: 8,
     },
 
     formHelp: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
         marginBottom: 4,
     },
 
     formError: {
         color: themeColors.textError,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.formErrorLineHeight,
         marginBottom: 4,
     },
 
@@ -962,7 +965,7 @@ const styles = {
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'center',
-        paddingVertical: 20,
+        paddingVertical: variables.lineHeightXLarge,
         width: '100%',
     },
 
@@ -1178,8 +1181,8 @@ const styles = {
 
     optionDisplayName: {
         fontFamily: fontFamily.GTA,
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
         ...whiteSpace.noWrap,
     },
 
@@ -1198,8 +1201,8 @@ const styles = {
     },
 
     optionAlternateText: {
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     optionAlternateTextCompact: {
@@ -1305,7 +1308,7 @@ const styles = {
         fontFamily: fontFamily.GTA_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         paddingRight: 5,
         paddingBottom: 4,
         ...wordBreak.breakWord,
@@ -1316,14 +1319,14 @@ const styles = {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeSmall,
         height: 24,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     chatItemMessage: {
         color: themeColors.text,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         marginTop: -2,
         marginBottom: -2,
         maxWidth: '100%',
@@ -1339,7 +1342,7 @@ const styles = {
         color: colors.blue,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     chatItemComposeWithFirstRow: {
@@ -1394,7 +1397,7 @@ const styles = {
         borderWidth: 0,
         borderRadius: 0,
         height: 'auto',
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         ...overflowXHidden,
 
         // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with
@@ -2369,7 +2372,7 @@ const styles = {
     peopleBadgeText: {
         color: themeColors.textReversed,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -2466,7 +2469,7 @@ const styles = {
     },
 
     communicationsLinkHeight: {
-        height: 20,
+        height: variables.communicationsLinkHeight,
     },
 
     floatingMessageCounterWrapper: {

src/styles/variables.js

@@ -1,6 +1,23 @@
+import {PixelRatio} from 'react-native';
+
+/**
+ * Calculate the fontSize, lineHeight and padding when the device font size is changed, In most cases users do not change their device font size so PixelRatio.getFontScale() = 1 and this
+ * method always return defaultValue (first param). when device font size increases/decrease, PixelRatio.getFontScale() value increases/decrease as well. this means if you hava a text
+ * and the 'fontSize' of it is 19, then the device font size changed to the 5th level on ios slider now the actual fontSize = 19 * PixelRatio.getFontScale() = 19 * 1.11 = 21.09 since we are
+ * disallowing font scaling we need to calculate it manually, so we are using this equation : PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.
+ * getFontScale() this equation means increases/decreases the fontSize when the device font size increases/decreases but do not increase it if the fontSize value exceed maxValue (second
+ * param).
+ * @param {Number} defaultValue
+ * @param {Number} maxValue
+ * @returns {Number}
+ */
+function getValueUsingPixelRatio(defaultValue, maxValue) {
+    return PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.getFontScale();
+}
+
 export default {
-    contentHeaderHeight: 65,
-    componentSizeSmall: 28,
+    contentHeaderHeight: getValueUsingPixelRatio(65, 100),
+    componentSizeSmall: getValueUsingPixelRatio(28, 32),
     componentSizeNormal: 40,
     inputComponentSizeNormal: 42,
     componentSizeLarge: 52,
@@ -15,17 +32,22 @@ export default {
     avatarSizeSmallSubscript: 14,
     fontSizeOnlyEmojis: 30,
     fontSizeOnlyEmojisHeight: 35,
-    fontSizeSmall: 11,
+    fontSizeSmall: getValueUsingPixelRatio(11, 17),
     fontSizeExtraSmall: 9,
-    fontSizeLabel: 13,
-    fontSizeNormal: 15,
-    fontSizeMedium: 16,
-    fontSizeLarge: 17,
+    fontSizeLabel: getValueUsingPixelRatio(13, 19),
+    fontSizeNormal: getValueUsingPixelRatio(15, 21),
+    fontSizeMedium: getValueUsingPixelRatio(16, 22),
+    fontSizeLarge: getValueUsingPixelRatio(17, 19),
+    lineHeightSmallFont: getValueUsingPixelRatio(11, 17),
+    lineHeightLabelFont: getValueUsingPixelRatio(13, 19),
+    lineHeightNormalFont: getValueUsingPixelRatio(15, 21),
+    lineHeightMediumFont: getValueUsingPixelRatio(16, 22),
+    lineHeightLargeFont: getValueUsingPixelRatio(17, 19),
     fontSizeHero: 36,
     fontSizeh1: 19,
     fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
-    fontSizeNormalHeight: 20,
+    fontSizeNormalHeight: getValueUsingPixelRatio(20, 28),
     lineHeightHero: 40,
     iconSizeXXXSmall: 4,
     iconSizeXXSmall: 8,
@@ -49,7 +71,16 @@ export default {
     minHeightToShowGraphics: 854, // Login form layout breaks below this height due to insufficient space to show the form and graphics
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
-    optionsListSectionHeaderHeight: 54,
+    optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60),
+    lineHeightSmall: getValueUsingPixelRatio(14, 16),
+    lineHeightNormal: getValueUsingPixelRatio(16, 21),
+    lineHeightLarge: getValueUsingPixelRatio(18, 24),
+    lineHeightXLarge: getValueUsingPixelRatio(20, 24),
+    inputHeight: getValueUsingPixelRatio(52, 72),
+    formErrorLineHeight: getValueUsingPixelRatio(18, 23),
+    communicationsLinkHeight: getValueUsingPixelRatio(20, 30),
+    alternateTextHeight: getValueUsingPixelRatio(20, 24),
+    INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
 };