BUG: iOS double state update

[ChrisSimoniMBT]

I'm not sure if this is a bug or if I'm using the component incorrectly.

Here is my component code:

<Picker
                            style={{ width: '50%' }}
                            key='inchPicker'
                            selectedValue={inches}
                            onValueChange={(value: number) => setInches(value)}
                        >
                            {inchArray.map((x, i) => <Picker.Item key={i} value={i} label={i.toString()} />)}
                        </Picker>

inches is a state variable. After scrolling has stopped the picker tries to go to the old value before my re-render happens . The picker component will start scrolling back to old item then after re-render it snaps to the true selected item.

Suspect code is this if statement: https://github.com/react-native-picker/picker/blob/99fd8699fda5114a33badcc82a07ec0cd2de4200/js/PickerIOS.ios.js#L137

JavaScript is single thread and for some reason we are calling value change and resetting the selectedIndex value before parent component can update the selectedIndex value with a state re-render.

This seems like a bug that would affect everyone, so am I using the component wrong?

[josh-thompson13]

I am having this issue as well, are you using a simulator or physical device?

[josh-thompson13]

The problem seemingly only occurs for me when I run my application in Debug mode.

[ChrisSimoniMBT]

The problem seemingly only occurs for me when I run my application in Debug mode.

I haven't came back to check this issue out but I am fairly new to react and have since learned that while debugging react renders components twice on mount to detect errors I believe. That could be the source of this issue. I'll need to test further when I have time.