Bug on Cardfield default text color style and Samsung S24 with Android 14

[almighty972]

Describe the bug When using the CardField component, the default cardStyle text color is white on Samsung Galaxy S24 (Android 14) On an emulator with Android 8, the CardField text color is white only when you select the desired network (see attached videos)

To Reproduce Steps to reproduce the behavior:

1. Install Stripe sdk "@stripe/stripe-react-native": "0.38.6"
2. Add <CardField/> to your screen
3. Launch the application on a Samsung Galaxy S24 with Android 14
4. You can see that initial CardField text color is white in preferred networks dropdown list

Expected behavior The CardField has initially the proper text color, the default grey icon should show up, and the text color of the differents networks should not be white.

Screenshots

You can find 2 videos below, one from a Samsung Galaxy S24 on Android 14, and a video from an Android Emulator with Android 8.

https://github.com/user-attachments/assets/44b7d04e-6297-465a-9eb1-5637b26f0557 https://github.com/user-attachments/assets/619d0887-72d5-4631-944b-5f7a4d24b081

Desktop (please complete the following information):

• OS: Android 14

Smartphone (please complete the following information):

• Device: Samsung S24, Android 8 emulator

Additional context

Stripe sdk -> "@stripe/stripe-react-native": "0.38.6"

Here is the code of the CardField :

<CardField
    style={styles.cardField}
    cardStyle={styles.cardStyle}
    onCardChange={setCardDetails}
    postalCodeEnabled={false}
    autofocus
    preferredNetworks={[
      CardBrand.Mastercard,
      CardBrand.Visa,
      CardBrand.CartesBancaires,
    ]}
/>

And here is the styles object used by the CardField:

const styles = StyleSheet.create({
  container: {
    marginTop: 15,
    marginHorizontal: 15,
  },
  label: {
    color: theme.secondaryColor,
    fontSize: 16,
    fontWeight: '500',
  },
  cardField: {
    marginTop: 20,
    width: '100%',
    height: 50,
  },
  cardStyle: {
    textColor: '#5E5E5E',
    backgroundColor: '#FAFAFA',
    borderColor: '#9B9B9B',
    borderWidth: 1,
  },
  button: {
    marginTop: 20,
  },
});

[almighty972]

It seems that the issue comes from whether the dark mode is enabled or not in the Android settings... My apps doesn't handle the dark mode, but it seems the Stripe sdk does.

Can you disable the dark mode on the Stripe React Native SDK ?

[almighty972]

The issue seems to come from whether or not the system is in dark or light mode. The Stripe CardField component seems to adapt its style accordingly.

My Application is always in light mode. So I forced the app to be in light mode with this line:

Appearance.setColorScheme('light');

That way, the Stripe SDK will always be in light mode. However I still have a bug in the selected network dropdown. The text color is white on a white background as you cann see on the video below.

https://github.com/user-attachments/assets/21fe4a74-60f6-4e60-b796-62340a41d904

[almighty972]

Hello, I can confirm that there is a bug in the SDk with the light mode (Android only) when you select the payment network, as you can see on the video. The selected network text color stays in white color. The cardStyle acts only on the CardField component style, but not on the network selection dropdown style.

https://github.com/user-attachments/assets/48754430-edcc-47a1-a9fb-4426118a84ec