react-native-picker-select icon indicating copy to clipboard operation
react-native-picker-select copied to clipboard

Placeholder not displaying when using state var for the label.

Open bitdelve opened this issue 1 year ago • 0 comments

Describe the bug
When I set the label of the placeholder with a state variable it doesn't display. It will show the correct State name when I select the picker, but doesn't show the value of the placeholder until I select the placeholder, as seen in the attached screenshot. (Shows Alabama Twice) I have tried to use itemKey and value props as well, but that doesn't work either.

To Reproduce
Here is my code creating the RNPickerSelect



<RNPickerSelect
  style={pickerSelectStyles}
  onValueChange={(value, index) => {this.onSelectState(this.state.itemsState[index === 0 ? 0 : index - 1], 
  index - 1)}}                               
  items = {stateOptions}
  useNativeAndroidPickerStyle = {false}
  placeholder={{value: '', label: this.state.State}}
  Icon={() => {
    return <Icon size={15} color='black' name='chevron-down' style={{paddingTop: 2}}></Icon>;}
  }
/>

Here is my style:

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 14,
    textAlign: 'left',
    paddingEnd: 25,
    paddingStart: 5,
    color: '#0B254B',
    borderRadius: 4,
    height: 40,
  },
  inputAndroid: {
    fontSize: 14,
    textAlign: 'left',
    paddingEnd: 25,
    paddingStart: 5,
    color: '#0B254B',
    borderRadius: 4,
    height: 40,
  },
  iconContainer: {top: 10, right: 5},
  placeholder: {
    color: 'black'
  }
})

Expected behavior
I expect the placehold to show the value in the state variable

Screenshots
Screenshot 2024-09-10 at 8 18 18 AM

Additional details
iPhone simulator RN version 0.74.3

Reproduction and/or code sample
I am unable to provide a snack as this is currently in production, and for the company I work for.

bitdelve avatar Sep 10 '24 13:09 bitdelve