CardField Dark Mode Broken for Android & iOS

[skoolaidl]

Describe the bug The CardField for the React Native SDK does not work with dark mode. I have not implemented dark mode into my app, it's in the plans but for now I am just trying to get it up and running. FYI if you try to change the TextColor in cardStyles, it does not work for every scenario. This is not a valid solution.

The behavior is slightly different depending on the OS and setting (see screenshots for each scenario):

Android Dark Mode: You cannot see the icon, placeholder text, or the text you type Android Light Mode: You can see the icon, placeholder text, and the text you type iOS Dark Mode: You cannot see the icon or the text you type, you can see the placeholder text iOS light Mode You can see the icon, placeholder text, and the text you type

To Reproduce Steps to reproduce the behavior:

1) Add CardField component to any app like so:

<CardField
    postalCodeEnabled={true}
    placeholders={{
        number: '4242 4242 4242 4242',
    }}
    cardStyle={{
        borderColor: '#ffffff',
        borderWidth: 1,
    }}
    style={{
        width: '90%',
        height: 50,
        marginVertical: 30,
    }}
/>

Expected behavior You should be able to see the text if dark mode is enabled. Dark mode is broken and light mode works.

Additionally, you should be able to disable the component from automatically changing the colors regardless of if the phone is in dark mode or light mode. Not having that simple level of control is very difficult.

Screenshots Result is this in Android with dark mode enabled:

Android Light Mode:

iOS Dark Mode With no input

With input

iOS Light Mode:

Smartphone (please complete the following information):

• Device: All devices
• OS: All OS
• Browser [e.g. stock browser, safari]
• Version React Native SDK 0.39.0, RN version 0.75.4

Additional context None.