React Native Picker Select: How to auto-select an item but still be able to select others?

Question

I'm using RNPickerSelect in my React Native app. I want to have three options: A B and C. I want A to be selected by default (like how USA is often selected by default in a picker list of countries). Here's what I tried:

<RNPickerSelect
  value={{label: 'A', value: 'A'}}
    items={[
      { label: 'A', value: 'A' },
      { label: 'B', value: 'B' },
      { label: 'C', value: 'C' },
    ]}
  onValueChange={value => {}}
/>

This does select A by default, but the problem is that it then doesn't allow you to select any other the others after.

How should I approach this?

score 6 · Accepted Answer · answered Jun 24 '20 at 14:21

First make a component state like

class DropDown extends Component {
   constructor() {
      this.state = {
          dropdownValue: 'A'
      }
   }
   
   handleDropdownChange = (name) => (value) => {
      this.setState({ [name]: value })
   }
   
   render() {
      const { dropdownValue } = this.state  

      return (
         <RNPickerSelect
            value={dropdownValue}
            items={[
              { label: 'A', value: 'A' },
              { label: 'B', value: 'B' },
              { label: 'C', value: 'C' },
            ]}
            onValueChange={this.handleDropdownChange('dropdownValue')}
         />
      )
   }
}

This does the trick! I was hoping to be able to do it without bringing state into it, but I think this is the most efficient way. — gkeenley, Jun 24 '20 at 14:29

score 1 · Answer 2 · answered Nov 10 '21 at 10:16

If you want the picker to show the first item selected. You can simply pass an empty object to the placeholder. Referred to this docs.

<RNPickerSelect
placeholder={{}}
items={[
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'C', value: 'C' },
]}
onValueChange={value => {}}

/>

Meanwhile you can have a state variable which has the first item selected and you use the same in onValueChange

For example:

const [selected, setSelected] = useState('A');

<RNPickerSelect 
placeholder={{}}
items={[
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
]}
 onValueChange={value => setSelected(value)}
/>

NOTE: You wont be able to add any placeholder. You can add label above the component though :)

score 0 · Answer 3 · answered Apr 19 '21 at 18:02

This works with me:

Add the atribute "pickerProps" to the RNPickerSelect with the option overflow: 'hidden'

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />

score 0 · Answer 4 · answered Dec 30 '21 at 06:03

Just wanted to share what worked for me when setting up my picker component and running into the same issue.

In the example below, the useEffect sets the initial picker value to the second option.

export default function ContactPicker({ contacts, contact, setContact, setNewState }) {

  useEffect(() => {
    contacts?.length > 1 && setContact(contacts[1]['id'])
  }, [contacts])

  return (
    <View>
      <Picker
        selectedValue={contact}
        onValueChange={(itemValue, itemPosition) => {
          setContact(itemValue)
          setNewState(prev => ({ ...prev, contact_id: itemValue }))
        }}
      >
        {contacts?.map((contact, index) => (
          <Picker.Item
            key={index}
            label={contact.name}
            value={contact.id}
          />
        ))}
      </Picker>
    </View>
  )
}

React Native Picker Select: How to auto-select an item but still be able to select others?

4 Answers4