Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change placeholder color React Native RNPickerSelect

Tags:

react-native

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 },
          }}
like image 456
Sam van beastlo Avatar asked Dec 02 '19 22:12

Sam van beastlo


1 Answers

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;
                }}
            />
like image 136
gypsicoder Avatar answered Sep 29 '22 14:09

gypsicoder