lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.74k stars 499 forks source link

Placeholder text changes color with custom TextInput Style #418

Open iway1 opened 3 years ago

iway1 commented 3 years ago

Describe the bug
If you supply a custom style to the TextInput, the color of the TextInput text placeholder changes to match the non placeholder color. This is very strange, and does not occur when supplying a style prop to a normal TextInput.

To Reproduce
Steps to reproduce the behavior: Do this

<RNPickerSelect 
    ...
    textInputProps={{
        style: {}
    }}
/>

Indeed, even if we supply a placeholderTextColor to textInputProps, we get the same error.

<RNPickerSelect 
    ...
    textInputProps={{
        style: {},
        placeholderTextColor: '#e0e0e0'
    }}
/>

Here, placeholderTextColor does nothing at all, even though it is a valid prop for a TextInput.

Expected behavior
Placeholder text color should remain the same even when supplying a style prop to the TextInput. Even if that did not work, supplying the additional placeholderTextColor should at least allow me to override the placeholder text color and get the effect I want.

Screenshots

Screen Shot 2021-02-13 at 8 18 05 PM

Additional details

Reproduction and/or code sample
https://snack.expo.io/@iway1/bad-stroopwafels

Note that the color of the placeholder is not the light grey normal color, but instead the default textinput regular text color. If you remove the line textInputProps={{style: {}}} from the code, the placeholder text will return to the default color like it should be to begin with.

RodolfoGS commented 3 years ago

I think that this happen because is not an input. You can do:

<RNPickerSelect 
    ...
    textInputProps={{
        style: {
            ...(!this.state.picker ? { color: '#e0e0e0' } : {}),
        },
    }}
/>