Input component bottom of letters getting clipped on ios

[yang-zhang-work]

Hi I tried using the Input component https://github.com/obytes/react-native-template-obytes/blob/master/src/components/ui/input.tsx

when I add text-lg, I noticed that the bottom of the letters get clipped.

It only happens on ios simulator, it works fine on Android emulator.

I tried a few things but didn't overcome this:

• Tried to increase line height here https://github.com/obytes/react-native-template-obytes/blob/master/src/components/ui/input.tsx#L22 by setting leading-6/leading-7.
• Tried setting text vertical alignment but it didn't help either. by adding { textAlignVertical: 'center' },

import { router } from 'expo-router';
import React from 'react';
import { View } from 'react-native';

import { Button, Input, Text } from '@/components/ui';

export default function RegisterEmailScreen() {
  const [email, setEmail] = React.useState('');

  const handleSubmit = () => {
    // TODO: Validate email
    // For now, just navigate to verification
    router.push('/register/verify');
  };

  return (
    <View className="flex-1 px-6">
      {/* Header */}
      <View className="py-8">
        <Text className="text-2xl font-bold">What is your email?</Text>
      </View>

      {/* Email Input */}
      <Input
        value={email}
        onChangeText={setEmail}
        placeholder="email@example.com"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
        autoCorrect={false}
        className="border-b border-gray-300 text-lg"
      />

      {/* Submit Button - Fixed to bottom */}
      <View className="mt-auto pb-6">
        <Button
          label="Continue"
          onPress={handleSubmit}
          variant="primary"
          disabled={!email}
        />
      </View>
    </View>
  );
}