I am using this package https://www.npmjs.com/package/react-native-picker-select
I've tried multiple methods to change the color of the RNPickerSelect
placeholder text. But none of them have worked.
Tried the following ways:
style = {
{
inputIOS: {color: Constants.colour.black},
inputAndroid: {color: Constants.colour.black},
placeholderColor: Constants.colour.grey_90,
}
}
placeholder = {
label: placeholderText,
value: null,
color: Constants.colour.grey_90
};
UPDATE:
For Android you should set placeholder color in the style proportie like this, hope i can help someone :) :
style={{
placeholder: {color: Constants.colour.grey_50},
inputIOS: { color: Constants.colour.black },
inputAndroid: { color: Constants.colour.black },
}}
I will suggest you to always look in the issue board in the github repository of a package at first if there is no example in the package homepage. You might have found a solution there. In this issue you will get your answer https://github.com/lawnstarter/react-native-picker-select/issues/100 .
Here is the example code:
<RNPickerSelect
placeholder={{
label: 'Select a color...',
value: null,
}}
placeholderTextColor="red"
items={this.state.items}
onValueChange={(value) => {
this.setState({
favColor: value,
});
}}
onUpArrow={() => {
this.inputRefs.name.focus();
}}
onDownArrow={() => {
this.inputRefs.picker2.togglePicker();
}}
style={{ ...pickerSelectStyles }}
value={this.state.favColor}
ref={(el) => {
this.inputRefs.picker = el;
}}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With