Not able to select Number values since @react-native-picker/picker upgrade to 2.6.1

[fahad86]

Describe the bug
If value is a number, then it always defaults to the first item

Issue started happening after upgrading peer dependancy: @react-native-picker/picker to version 2.6.1

To Reproduce
change values to numbers

Expected behavior
Value selected should change when using the picker

Screenshots
n/a

Additional details

• Device: iPhone8
• OS: 17
• react-native-picker-select version: 9.0.0
• react-native version: 0.72.7
• expo sdk version: n/a
• @react-native-picker/picker: 2.6.1

Reproduction and/or code sample

[wesleyvandevoorde]

We are having the same issue, also objects as values don't seem to work. Only strings are working

[karo-dc]

Same here, any update?

[joeldebont]

I'm having the same issue on react-native 73.2.

[zabojad]

Has anyone found a solution?

[dpatra]

Any Solutions please

[zabojad]

use strings only with picker and convert them to numbers when needed...

[girardinsamuel]

I experienced the same issue ! I will convert values to strings in the meantime.

[andrejpavlovic]

Seems issue originates from here: https://github.com/react-native-picker/picker/issues/538

[hardchopshoppirate]

Temporary solution: create a wrapper component that converts a value (if it is a number) to a string, then back to the original type. Cannot use prev version due to expo 50 complains. That is the only way it may work for me :(

Pseudocode below:

type SelectProps = {
  value: string | number;
  options: { value: string | number; label: string };
  onChange: (value: any) => void;
}

const Select = ({ selectedValue, options, onChange }) => {
  const originalValueType = useRef(
    detectType(value),
  );

  const valueString = String(selectedValue);
  const options = options.map((item) => ({ label: item.label, value: String(item.value) }));
  const handleChange = (value: any) => {
    onChange(
      convertToType(value, originalValueType),
     );
  };

  return (
    <RNPickerSelect
      value={valueString}
      items={options}
      onValueChange={handleChange}
    />
  );
}