Selected Value can't be selected

[Salmankhan033]

I used two pickers, 1: I want that when selecting the first picker value then it shows the first index on the second picker. 2: When I change the First picker value and then assign the value to the second picker as the selected value but it didn't select the value.

https://user-images.githubusercontent.com/58082294/208516092-9b116e40-d7ec-4c05-8edf-607cb8ad8fe0.mov

[Fkiesnh86]

I am facing the similar problem. I found that the pickerData should be configured properly before binding selectedValue.

This is my case: ` const pickerData = props.months.map(e => ({value: e.value, label: e.label}));

{pickerData.length > 0 && <Picker selectedValue={selectedValue} pickerData = {pickerData}
onValueChange={(value, index) => onPickerSelect(value)} // eslint-disable-next-line react-native/no-inline-styles style={{backgroundColor: 'white', width: '100%', height: 200}} textSize={20} selectedItemTextSize={20} />} `

[ovidiumunteanu]

anyone who resolved this issue?

[elijahmg]

we are facing the same issue and even when there is a mapping to {value: v, label: v} app crashes update: label must be a string

[Salmankhan033]

https://github.com/react-native-picker/picker you can use this library

[TalhaAbid1]

I Have Solved It -Use useState To Get Latest updated Value-

Try This Code

<Picker
      style={[
        styles.Picker,
        isOpenCalender ? styles.heightValued : styles.heightZERO,
      ]}
      textColor="#bd8b13"
      textSize={20}
      selectTextColor="#F9B510"
      isShowSelectBackground={false}
      selectBackgroundColor="#ffffff"
      pickerData={months}
      isShowSelectLine={true}
      selectLineColor="#493D41"
      selectLineSize={6}
      onValueChange={value => {
        setSelectedM(value);
        console.log(value);
      }}
    />

[bkitduy]

this issue was not resolved

[sunilloharshoreline1]

if you want to update the selected value based on the state the following is one of the ways I found to achieve it :

interface Props {
    style?: StyleProp<TextStyle>;
    selectedValue: string;
    onValueChange: (value: string) => void;
    pickerData: string[]
}

export function SLPicker(props: Props) {
    const {
        style,
        selectedValue,
        onValueChange,
        pickerData
    } = props;

    const [selectedVal, setSelectedVal] = React.useState('');

    React.useEffect(() => {
        setSelectedVal(selectedValue)
    }, [selectedValue])

    return (
        <>
            {
                selectedVal
                    ? <Picker
                        style={{
                            backgroundColor: Colors.transparent,
                            width: 90,
                            marginLeft: 8,
                            marginRight: 8,
                            justifyContent: 'center'
                        }}
                        selectedValue={selectedVal}
                        pickerData={pickerData}
                        onValueChange={onValueChange}
                        textSize={23}
                    />
                    : <></>
            }
        </>
    )
}

call it from your component

<SLPicker
                    style={styles.picker}
                    selectedValue={selectedTo}
                    onValueChange={onToValueChange}
                    pickerData={hoursTo}
                />

main thing here to notice selectedVal