Placeholder text color not able to change

[skyshine999]

I am using this library for picker, but i am not able to change placeholder text color, i tried all ways

placeholderTextColor = "black" placeholder={{ label: "Select Week", value: null,color:'black' }}

after doing these changes also it is showing in gray color i checked the code static defaultProps = { value: undefined, placeholder: { label: 'Select an item...', value: null, color: '#9EA0A4', }, i found default props

[mwood23]

@suresh777 I think the docs are wrong because that way doesn't work. Instead, you need to use the style prop except it's an object.

      <RNPickerSelect
        style={{
          placeholder: {
            color: "purple",
            fontSize: 12,
            fontWeight: "bold",
          },

[skyshine999]

this is working fine, thanks

[SrinivasanJms]

Am using like this, but it doesn't change the placeholder color

<RNPickerSelect placeholder = {{label: 'Type', value: ''}} style={{...pickerSelectStyles}}

const pickerSelectStyles = StyleSheet.create({ inputIOS: { width: width - 80, height: 45, borderWidth: 1, borderRadius: 3, borderColor: Colors.inputBorderColor, paddingHorizontal: 10 // to ensure the text is never behind the icon }, iconContainer: { top: 18, right: 10 }, placeholder: { color: 'lightgray', fontSize: 14 }, inputAndroid: { width: width - 80, height: 45, borderWidth: 1, borderRadius: 3, borderColor: Colors.inputBorderColor, paddingHorizontal: 10 // to ensure the text is never behind the icon }, });

[ajyku]

Use plain JSON instead of Stylesheet. That will work.

<RNPickerSelect
style={selectBoxStyle}

const selectBoxStyle = {
inputIOS: {
width: width - 80,
height: 45,
borderWidth: 1,
borderRadius: 3,
borderColor: Colors.inputBorderColor,
paddingHorizontal: 10 // to ensure the text is never behind the icon
},
iconContainer: {
top: 18,
right: 10
},
placeholder: {
color: 'lightgray',
fontSize: 14
},
inputAndroid: {
width: width - 80,
height: 45,
borderWidth: 1,
borderRadius: 3,
borderColor: Colors.inputBorderColor,
paddingHorizontal: 10 // to ensure the text is never behind the icon
}

[aziyatali]

you can use placeholderTextColor property

placeholder="some name"
placeholderTextColor-"some color"

[MatkoMilic]

style={{
          placeholder: {
            color: "purple",
            fontSize: 12,
            fontWeight: "bold",
          },

This doesn't work for me at the end of 2023 :(

[MatkoMilic]

I found the solution for 2023:

<RNPickerSelect
              onValueChange={handleChange("playerType")}
              placeholder={{
                label: "Choose National or Club level:",
                value: null,
                color: "red",
              }}
              onOpen={& here I will even put a condition with state variable to only get different placeholder color when opened}
              style={pickerStyle}
              items={[
                { label: "National", value: "national" },
                { label: "Club", value: "club" },
              ]}
              pickerProps={{ style: { overflow: "hidden" } }}
            />