[ BUG ] Value overflows and wraps in input, showing two lines of text on mobile IOS due to line height of input

[hash817]

Describe the bug When the value in a input is too long, it will line break and show two lines. So far I have only observed this on mobile IOS and not on web.

To Reproduce Steps to reproduce the behavior:

import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';
import { useForm, Controller } from "react-hook-form"

...

  return (
    <>
      <ScrollView className='p-6'>
        <Controller
          control={control}
          rules={{
            required: true,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <>
              <Label className='pb-3' nativeID='Test'>Test</Label>
              <Input
                placeholder="Test"
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
                aria-labelledby='Test'
              />
            </>
          )}
          name="address"
        />
     </>
);

Expected behavior The input should behave same as on web, showing only one line of text.

Screenshots

Platform (please complete the following information):

• Type: Device
• OS: IOS

Additional context Changing height of input from h-12 to h-10 works. The below input is after changing to a smaller height, but it should work without having to change the height.

import * as React from 'react';
import { TextInput, type TextInputProps } from 'react-native';
import { cn } from '~/lib/utils';

const Input = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
  ({ className, placeholderClassName, ...props }, ref) => {
    return (
      <TextInput
        ref={ref}
        className={cn(
          'web:flex h-10 native:h-10 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
          props.editable === false && 'opacity-50 web:cursor-not-allowed',
          className
        )}
        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
        {...props}
      />
    );
  }
);

Input.displayName = 'Input';

export { Input };