How to make react-native Picker stay at newly selected option?

Question

I have a picker that I'm testing on iOS right now with two options. Every time I drag down from the first option to the second option, the picker immediately returns to the first option.

This is what my the code for my picker looks like.

<Picker        style={{         width: 100,       }}       selectedValue={(this.state && this.state.pickerValue) || 'a'}       onValueChange={(value) => {         this.setState({value});       }} itemStyle={{color: 'white'}}>       <Picker.Item label={'Hello'} value={'a'} />       <Picker.Item label={'World'} value={'b'} /> </Picker> 

I want the selector to stay at the newly scrolled-to option. I've also removed the || 'a' part of the selectedValue attribute but that didn't solve the issue either.

Answer 1

On value change you need to specify which property of the state changed and change it accordingly with this.setState

onValueChange={(value) => {this.setState({pickerValue: value}); 

Complete Code

<Picker        style={{         width: 100,       }}       selectedValue={(this.state && this.state.pickerValue) || 'a'}       onValueChange={(value) => {         this.setState({pickerValue: value});       }} itemStyle={{color: 'white'}}>       <Picker.Item label={'Hello'} value={'a'} />       <Picker.Item label={'World'} value={'b'} /> </Picker> 

Answer 2

I just came across this and was facing the same issue, the scrolling reaches the new item and resets to the first item. I have done this using stateless component (Hooks):

I have an array of objects as the value and option as key

const data = useState({ "options":[{ "name":"Dish 1","price":0},{"name":"Dish 2","price":0}]}) 

const [selected, setSelected] = useState(0)

The Picker component:

<PickerIOS     selectedValue={selected_choice}     onValueChange={(value, index) => {             set_selected_choice(index)           }}         >           {data?.map((item, index) => (             <PickerIOS.Item               key={item}               value={index}               label={item.name}             />           ))} </PickerIOS> 

Here, I have stored the index of the array elements in the selected state and have updated it from the PickerIOS Item, keeping the value as index.