fix: textinput sizing for [email protected] (#4084)

Co-authored-by: Tomasz Janiczek <[email protected]>

Author: tjaniczek

example/assets/fonts/Abel-Regular.ttf

@@ -7,7 +7,9 @@ import {
   View,
 } from 'react-native';
 
+import { useFonts } from 'expo-font';
 import {
+  configureFonts,
   HelperText,
   List,
   MD2Colors,
@@ -141,6 +143,10 @@ const TextInputExample = () => {
     });
   };
 
+  const [fontsLoaded] = useFonts({
+    Abel: require('../../assets/fonts/Abel-Regular.ttf'),
+  });
+
   const [expandedId, setExpandedId] = React.useState<ExpandedId>('flat');
 
   const onAccordionPress = (id: string | number) =>
@@ -674,6 +680,23 @@ const TextInputExample = () => {
                 placeholder="Custom colors"
               />
             </View>
+            {fontsLoaded && theme.isV3 ? (
+              <View style={styles.inputContainerStyle}>
+                <TextInput
+                  mode="outlined"
+                  label="Text input with custom font"
+                  placeholder="Custom font"
+                  style={styles.fontSize}
+                  theme={{
+                    fonts: configureFonts({
+                      config: {
+                        fontFamily: 'Abel',
+                      },
+                    }),
+                  }}
+                />
+              </View>
+            ) : null}
           </List.Accordion>
         </List.AccordionGroup>
       </ScreenWrapper>

example/src/Examples/TextInputExample.tsx

@@ -59,7 +59,7 @@ export default function PaperExample() {
   useKeepAwake();
 
   const [fontsLoaded] = useFonts({
-    NotoSans: require('../assets/fonts/NotoSans-Regular.ttf'),
+    Abel: require('../assets/fonts/Abel-Regular.ttf'),
   });
 
   const [isReady, setIsReady] = React.useState(false);
@@ -220,7 +220,7 @@ export default function PaperExample() {
     ...combinedTheme,
     fonts: configureFonts({
       config: {
-        fontFamily: 'NotoSans',
+        fontFamily: 'Abel',
       },
     }),
   };

example/src/index.native.tsx

@@ -50,7 +50,7 @@ export default function PaperExample() {
   useKeepAwake();
 
   const [fontsLoaded] = useFonts({
-    NotoSans: require('../assets/fonts/NotoSans-Regular.ttf'),
+    Abel: require('../assets/fonts/Abel-Regular.ttf'),
   });
 
   const [isReady, setIsReady] = React.useState(false);
@@ -177,7 +177,7 @@ export default function PaperExample() {
     ...combinedTheme,
     fonts: configureFonts({
       config: {
-        fontFamily: 'NotoSans',
+        fontFamily: 'Abel',
       },
     }),
   };

example/src/index.tsx

@@ -83,14 +83,15 @@ const TextInputFlat = ({
 
   const {
     fontSize: fontSizeStyle,
-    lineHeight,
+    lineHeight: lineHeightStyle,
     fontWeight,
     height,
     paddingHorizontal,
     textAlign,
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+  const lineHeight = lineHeightStyle || fontSize * 1.2;
 
   const isPaddingHorizontalPassed =
     paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';

src/components/TextInput/TextInputFlat.tsx

@@ -86,13 +86,14 @@ const TextInputOutlined = ({
   const {
     fontSize: fontSizeStyle,
     fontWeight,
-    lineHeight,
+    lineHeight: lineHeightStyle,
     height,
     backgroundColor = colors?.background,
     textAlign,
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+  const lineHeight = lineHeightStyle || fontSize * 1.2;
 
   const {
     inputTextColor,

src/components/TextInput/TextInputOutlined.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import { StyleSheet, Text, Platform, I18nManager } from 'react-native';
+import { StyleSheet, Text, Platform, I18nManager, View } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
@@ -382,6 +382,76 @@ it("correctly applies theme background to label when input's background is trans
   });
 });
 
+it('always applies line height, even if not specified', () => {
+  const { getByTestId } = render(
+    <View>
+      <TextInput
+        mode="outlined"
+        label="Default font outlined"
+        value="Some test value"
+        testID="default-font"
+      />
+      <TextInput
+        mode="flat"
+        label="Default font outlined - flat"
+        value="Some test value"
+        testID="default-font-flat"
+      />
+      <TextInput
+        mode="outlined"
+        label="Large font outlined"
+        value="Some test value"
+        testID="large-font"
+        style={{
+          fontSize: 30,
+        }}
+      />
+      <TextInput
+        mode="outlined"
+        label="Large font outlined - flat"
+        value="Some test value"
+        testID="large-font-flat"
+        style={{
+          fontSize: 30,
+        }}
+      />
+      <TextInput
+        mode="outlined"
+        label="Custom line height outlined"
+        value="Some test value"
+        testID="custom-line-height"
+        style={{
+          fontSize: 40,
+          lineHeight: 29,
+        }}
+      />
+      <TextInput
+        mode="outlined"
+        label="Custom line height outlined - flat"
+        value="Some test value"
+        testID="custom-line-height-flat"
+        style={{
+          fontSize: 40,
+          lineHeight: 29,
+        }}
+      />
+    </View>
+  );
+
+  expect(getByTestId('default-font')).toHaveStyle({ lineHeight: 16 * 1.2 });
+  expect(getByTestId('default-font-flat')).toHaveStyle({
+    lineHeight: 16 * 1.2,
+  });
+
+  expect(getByTestId('large-font')).toHaveStyle({ lineHeight: 30 * 1.2 });
+  expect(getByTestId('large-font-flat')).toHaveStyle({ lineHeight: 30 * 1.2 });
+
+  expect(getByTestId('custom-line-height')).toHaveStyle({ lineHeight: 29 });
+  expect(getByTestId('custom-line-height-flat')).toHaveStyle({
+    lineHeight: 29,
+  });
+});
+
 describe('maxFontSizeMultiplier', () => {
   const createInput = (
     type: Exclude<Props['mode'], undefined>,