Describe the bug I'm using this module it is working fine. I

How to set value initially? about react-native-picker-select HOT 2 OPEN

harika-zazz commented on August 18, 2024 3

How to set value initially?

from react-native-picker-select.

Comments (2)

valentin-debris commented on August 18, 2024 3

I had the same problem with a form, everytime I changed a field, the select was reset to the initial value.

The solution is to update the variable you used in 'value' , in the onValueChange

    const [defaultV, setDefaultV] = useState();

    return (
        <View>
            <RNPickerSelect
                items={data}
                value={defaultV}
                onValueChange={(value) => {
                    setDefaultV(value);
                }}
            />
        </View>
    );

from react-native-picker-select.

harika-zazz commented on August 18, 2024 1

I've added the value and key prop in RNPickerSelect. The value was shown by default. But when i try to edit the Picker value, it was resetting for the first time. How can i fix this issue?

Code:-

  const picker = useRef<RNPickerSelect>(null);
  useEffect(() => {
  
      const {
        propertyBuildOnYear,
      } = route?.params?.property;
      setHomeBuild({ value: propertyBuildOnYear, label: propertyBuildOnYear.toString(), })
      picker.current?.setState({ value: propertyBuildOnYear, label: propertyBuildOnYear.toString() });
    
  }, [])
<RNPickerSelect

              placeholder={{
                label: "Home purchased in *",
                value: null,
                color: colors.defaultTxtColor,
                fontFamily: fontFamilyType.HND.Regular,

              }}
              onValueChange={(value) => {
                Keyboard.dismiss();
                setHomePurchage(value)
              }}
              key={homepurchage.value}
              value={homepurchage.value}
              items={yearsList}
              style={{
                ...pickerSelectStyles,
                placeholder: {
                  color: colors.defaultTxtColor,
                  fontSize: scaler(16),
                  fontFamily: fontFamilyType.HND.Regular
                },
                iconContainer: {
                  top: 15,
                  right: 15,

                },
              }}
              useNativeAndroidPickerStyle={false}
              Icon={() => {
                return <Image source={icon.dropdownIcon} style={{ ...styles.dropdownIconStyle, tintColor: "grey" }} />;
              }}
            />

Screen recording:-

Screen.Recording.2023-12-28.at.3.00.13.PM.mov