CODEWITHSUNDEEP
reactjsreact-nativepickerreact-native-picker-select
gkeenley
gkeenley

Reputation: 7348

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

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?

Upvotes: 3

Views: 13552

Answers (5)

Jonny Love
Jonny Love

Reputation: 11

Using a combination of what others have said, I found a work around. The downside is the display is always the light placeholder color and you will show the text for your current option at the top and the middle, but at least it won't revert to null or the standard value...

I put the state value in the placeholder value AND the value option.

const list = [1, 2, 3, 4, 5]

const Component = () => {
const [value, setValue] = useState(apiVal)

const items = list.map(item => ({
    label: `Value level: ${item.toString()}`,
    value: item,
  }))

  return (
    <View style={styles.container}>
      <RNPickerSelect
        Icon={() => <Octicons name='single-select' size={20} />}
        onValueChange={value => setValue(value)}
        items={items}
        placeholder={{label: `Current choice: ${value}`, value: value}}
        value={value}
      />
    </View>
  )
}

Upvotes: 0

sandypockets
sandypockets

Reputation: 409

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>
  )
}

Upvotes: 0

Varun Khalate
Varun Khalate

Reputation: 91

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 :)

Upvotes: 3

Kike Gamboa
Kike Gamboa

Reputation: 1104

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' } }}
                ...
            />

Upvotes: 0

ahmer munaf
ahmer munaf

Reputation: 76

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')}
         />
      )
   }
}

Upvotes: 6

Related Questions