Design issue with CardField component on Android when switching focus

[Sanjai-Uthup-Thomas]

There is a design issue with the CardField component specifically on Android devices. When entering card details, such as the card number and expiry date, the layout appears to be correct. However, upon switching focus to another field, the design of the CardField component becomes misaligned or improperly formatted.

Expected Behavior:

The CardField component should maintain a consistent and visually appealing layout when switching focus between different fields, ensuring a smooth and seamless user experience throughout the card entry process.

Current Behavior:

On Android devices, after entering data into the CardField component, the layout remains correct. However, upon switching focus to another field, such as the CVV or name field, the CardField's layout becomes misaligned or distorted. This inconsistency in design negatively impacts the overall usability and user experience of the application.

Steps to Reproduce:

Enter data into the CardField component for the card number and expiry date.

Switch focus to another field, such as the CVV or name field.

Observe the layout and presentation of the CardField component after switching focus.

React Native Stripe version: 0.35.0

React Native version: 0.72.7

Proposed Solution:

I recommend investigating the layout issues with the CardField component on Android devices when switching focus between different fields. This may involve ensuring that the CardField component maintains its layout consistency even after focus changes, possibly by adjusting the styling or layout properties.

Code:

<CardField

      postalCodeEnabled={false}

      placeholders={{

        number: '4242 4242 4242 4242',

      }}

      cardStyle={{

        backgroundColor: '#FFFFFF',

        textColor: '#000000',

      }}

      style={{

        width: '85%',

        height: 50,

        //marginVertical: 30,

        alignSelf:'center'

      }}

      onCardChange={(cardDetails) => {

        console.log('cardDetails', cardDetails);

      }}

      onFocus={(focusedField) => {

        console.log('focusField', focusedField);

      }}

    />

https://github.com/stripe/stripe-react-native/assets/105595415/8bc92c57-4802-4be4-812f-b81c3c392a84