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

src/components/Button.js

@@ -217,7 +217,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/index.js

@@ -187,6 +187,7 @@ class Picker extends PureComponent {
                         fixAndroidTouchableBug
                         onOpen={() => this.setState({isOpen: true})}
                         onClose={() => this.setState({isOpen: false})}
+                        textInputProps={{allowFontScaling: false}}
                         pickerProps={{
                             onFocus: () => this.setState({isOpen: true}),
                             onBlur: () => {

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 {
@@ -78,7 +78,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.textLight} />
                                     <Text
                                         selectable={false}

src/styles/styles.js

@@ -29,7 +29,7 @@ const picker = {
     paddingHorizontal: 11,
     paddingBottom: 8,
     paddingTop: 23,
-    height: 50,
+    height: variables.inputHeight,
     borderWidth: 0,
     borderRadius: variables.componentBorderRadiusNormal,
     textAlign: 'left',
@@ -216,25 +216,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.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textMicroBold: {
@@ -248,7 +248,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textExtraSmallSupporting: {
@@ -605,7 +605,7 @@ const styles = {
     badgeText: {
         color: themeColors.text,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -652,7 +652,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     chatItemComposeSecondaryRowOffset: {
@@ -679,7 +679,7 @@ const styles = {
     },
 
     componentHeightLarge: {
-        height: variables.componentSizeLarge,
+        height: variables.inputHeight,
     },
 
     textInputContainer: {
@@ -808,7 +808,7 @@ const styles = {
     },
     picker: (disabled = false) => ({
         iconContainer: {
-            top: 15,
+            top: Math.round(variables.inputHeight * 0.5) - 11,
             right: 10,
             zIndex: -1,
         },
@@ -862,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,
     },
 
@@ -965,7 +965,7 @@ const styles = {
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'center',
-        paddingVertical: 20,
+        paddingVertical: variables.lineHeightXLarge,
         width: '100%',
     },
 
@@ -1179,8 +1179,8 @@ const styles = {
 
     optionDisplayName: {
         fontFamily: fontFamily.EXP_NEUE,
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
         ...whiteSpace.noWrap,
     },
 
@@ -1199,8 +1199,8 @@ const styles = {
     },
 
     optionAlternateText: {
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     optionAlternateTextCompact: {
@@ -1312,7 +1312,7 @@ const styles = {
         fontFamily: fontFamily.EXP_NEUE_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         paddingRight: 5,
         paddingBottom: 4,
         ...wordBreak.breakWord,
@@ -1323,14 +1323,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.EXP_NEUE,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         marginTop: -2,
         marginBottom: -2,
         maxWidth: '100%',
@@ -1343,7 +1343,7 @@ const styles = {
         color: themeColors.link,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.EXP_NEUE,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     chatItemComposeWithFirstRow: {
@@ -1399,7 +1399,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
@@ -2466,7 +2466,7 @@ const styles = {
     peopleBadgeText: {
         color: themeColors.textReversed,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -2574,7 +2574,7 @@ const styles = {
     },
 
     communicationsLinkHeight: {
-        height: 20,
+        height: variables.communicationsLinkHeight,
     },
 
     floatingMessageCounterWrapper: {

src/styles/variables.js

@@ -1,6 +1,22 @@
+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 returns the defaultValue (first param). When the device font size increases/decreases, the PixelRatio.getFontScale() value increases/decreases as well.
+ * This means that if you have text and its 'fontSize' is 19, the device font size changed to the 5th level on the iOS slider and the actual fontSize is 19 * PixelRatio.getFontScale()
+ * = 19 * 1.11 = 21.09. Since we are disallowing font scaling we need to calculate it manually. We calculate it with: PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue :
+ * defaultValue * PixelRatio getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to 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,
@@ -17,17 +33,17 @@ 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),
     fontSizeHero: 36,
     fontSizeh1: 19,
     fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
-    fontSizeNormalHeight: 20,
+    fontSizeNormalHeight: getValueUsingPixelRatio(20, 28),
     lineHeightHero: 40,
     iconSizeXXXSmall: 4,
     iconSizeXXSmall: 8,
@@ -52,7 +68,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(50, 72),
+    formErrorLineHeight: getValueUsingPixelRatio(18, 23),
+    communicationsLinkHeight: getValueUsingPixelRatio(20, 30),
+    alternateTextHeight: getValueUsingPixelRatio(20, 24),
+    INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
 };