CODEWITHSUNDEEP
react-native
Ajouve
Ajouve

Reputation: 10089

react-native-phone-input white content on iphone

I am using react-native-phone-input to allow my users to add a phone number.

The problem is that on some iOS version, I do not really why the text is white. On my iPhone I have no issues but one of my users which is a iPhone xs max everything is white

enter image description here

This library is good but not really maintained

I use it like that

<PhoneInput
    style={styles.input}
    ref={ref => { this.phone = ref }}
    initialCountry={this.state.region}
    value={this.props.number}
    allowZeroAfterCountryCode={false}
/>

And the style 

input: {
        padding: 5,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#000',
        marginBottom: 10,
        color: '#000'
    }

I added a black color to be sure but I still have the issue on some devices

Upvotes: 0

Views: 569

Answers (1)

Ajay
Ajay

Reputation: 500

The issue you are facing is because of the darkMode of the iOS. In case of the dark mode in iOS, the text input's color get white if no any color is supplied in the style of the text input. The style which you are using is not set to the text input. Try passing the black color in textProps prop like:

<PhoneInput
    textProps={{
        style: {
            color: '#000000'
        }
    }}
    ref={ref => { this.phone = ref }}
    initialCountry={this.state.region}
    value={this.props.number}
    allowZeroAfterCountryCode={false}
/>

If you want to disable dark mode's effect on your entire app, you can add UIUserInterfaceStyle to the Info.plist file in iOS like:

<key>UIUserInterfaceStyle</key>
    <string>Light</string>

Upvotes: 1

Related Questions