CardField font size scales with system font size on Android

[saf94]

Describe the bug The font size of the CardField seems to scale with the system font size on Android. A few of our users are having issues with overlapping text in the fields because they have set their system font to be bigger than standard. I'm not sure if this is intended or not, but is there a way to disable the font scaling? As none of the rest of our app font scales, and i dont think this happens on iOS

To Reproduce Steps to reproduce the behavior:

1. Set system font size to be very large on an Android device
2. Render the card field
3. Add in card details
4. See text will overlap

Expected behavior Maybe it shouldn't scale or there could be an option to disable scaling?

Screenshots

Smartphone (please complete the following information):

• Device: tested on Samsung Galaxy S21 but also happens on other Android phones
• OS: Android

[charliecruzan-stripe]

Can you provide some sample code to reproduce this? If you can, I will close https://github.com/stripe/stripe-react-native/issues/773 in favor of this issue

[saf94]

This is the way we're rendering the CardField

const AddPaymentCard = () => {
  ...
  return (
    <CardField
      style={{ height: 20 }}
      cardStyle={{
        fontSize: 16,
      }}
      autofocus
    />
  )
}

Is that what you need? I think it pretty much would happen on any CardField component if the system font size is large enough

[CptFabulouso]

As a workaround, the scaling can be "disabled" using react-native-device-info by setting fontSize: fontSize: 14 / DeviceInfo.getFontScaleSync()