Closed skyshine999 closed 3 years ago
@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",
},
this is working fine, thanks
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 }, });
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
}
you can use placeholderTextColor property
placeholder="some name"
placeholderTextColor-"some color"
style={{ placeholder: { color: "purple", fontSize: 12, fontWeight: "bold", },
This doesn't work for me at the end of 2023 :(
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" } }}
/>
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