React Native - Picker Bouncing Back to the Top on IOS

Question

I am making a simple golf score tacking app and am using the react-native-picker library to help me select the course I want to view. The functionality is all working and it picks the correct value, but for some reason, the picker bounces back up to the first item in the list.

This screenshot was taken directly after I used the picker to scroll down to "Whispering Pines Golf Resort", and you can see that the subtitle underneath has updated correctly. Only the picker itself is bouncing back up to the top.

The weird part is that it looks completely fine on Android, which uses a drop-down style picker.

<Picker
  style={styles.picker}
  selectedValue={state.currentCourse}
  onValueChange={(itemValue) => getUserScores(itemValue)}
>
  {state.courses.map((course) => (
    <Picker.Item key={course.name} label={course.name} value={course} />
  ))}
</Picker>

And the getUserScores function:

const getUserScores = async (course) => {
  ...
  setState({
    currentCourse: course,
    userScores: userScores,
  });
};

The state.courses array is populated earlier just by importing a json file containing the data.

Is there something wrong with my code or is this a bug in the library?

Answer 1

You need to set the selected value in OnValueChange() event like:

const [selectedCourse, setSelectedCourse] = useState(state.courses[0]);
<Picker
  style={styles.picker}
  selectedValue={selectedCourse}
  onValueChange={(itemValue) => {
    setSelectedCourse(itemValue);
    getUserScores(itemValue);
  }}
>
  {state.courses.map((course) => (
    <Picker.Item key={course.name} label={course.name} value={course} />
  ))}
</Picker>;