(FIX) onValueChange being called twice

Hello! 🙂

As some other users have noted, it seems that there is often an issue with this library where the "onValueChange" function is called twice. (For example, see issues #311 , #265 , #242 , #180 , #112 ).

In my case, I had this issue while using the component with reduxForm, which made the component either: 1) bounce back to the previous value every time I tried to select something on iOS, or 2) simply not change anything when selecting a value on Android. (Probably the same thing was happening under the hood, the Android picker just wasn't animated).

I have solved the issue in my local app by replacing getDerivedStateFromProps with compononentDidUpdate in the index.js file of the react-native-picker-select component. I have opened a pull request ( #368 ) with the hope that it may solve others' problems as well.

Describe the bug

The picker doesn't work because the onValueChange call back is called twice, making the selected value reset itself each time. (See GIF).

To Reproduce

Create a custom Field component with the Redux Form library (such as the one I added below). Try to select a value on iOS or Android.

Expected behavior

New value is selected with no problems.

Actual behavior

Value is selected, but the onValueChange callback is immediately called again, forcing the value to go back to its previous state.

Screenshots

Additional details

Device: iPhone11 simulator (or Android through AVD)
OS: iOS14 (or Android)
react-native-picker-select version: latest
react-native version: 0.63
expo sdk version: n/a

Reproduction and/or code sample

export class PickerField extends PureComponent<BaseFieldProps & PickerSelectProps> {
  getStyle = (params: { active?: boolean, dirty: boolean, invalid: boolean, style: any }) => {
    const { active, dirty, invalid, style } = params;

    let styleObj = { ...styles.inputContainerStyle, ...{ color: Colors.black } };

    if (active) {
      styleObj = { ...styleObj, ...styles.inputBoxActive }
    }
    if (dirty) {
      styleObj = { ...styleObj, ...styles.inputBoxDirty }
    }
    if (invalid) {
      styleObj = { ...styleObj, ...styles.invalidBox }
    }
    if (style) {
      styleObj = { ...styleObj, ...style, }
    }

    return styleObj;
  }

  renderPicker = ({ input, meta }: WrappedFieldProps) => {
    const { items, style, ...rest } = this.props;

    const { onChange, value } = input;
    const { invalid, active, dirty, } = meta;

    const combinedStyle = this.getStyle({ active, dirty, invalid, style });

    return (
      <RNPickerSelect
        value={value}
        items={items}
        onValueChange={onChange}
        style={{
          chevron: { display: 'none' },
          inputIOS: combinedStyle,
          inputAndroid: combinedStyle,
          iconContainer: {
            top: '50%',
            right: '2%',
            transform: [{ translateY: -(1 / 2) * this.iconHeight }],
          },
        }}
        // placeholder={{ label: I18n.t("SelectAnItem") }}
        useNativeAndroidPickerStyle={false}
        {...rest}
      />
    )
  }

  render() {

    const { name, validate } = this.props;
    return (
      <Field name={name} component={this.renderPicker} validate={validate} />
    )
  }
}

This issue is present on Android in the new version of the package. It works fine on iOS.

This is still an issue.
The way in which onValueChange is structured opens to a possible race condition between the internal state update and value prop coming from the parent component. To be more precise, when a controlled component triggers the onValueChange function, the onValueChange prop is called before the asynchronous internal state update. If the updated value prop is updated before the internal state is updated, then componentDidUpdate will detect a discrepancy between the previous selected value and the actual value prop, causing another invocation of onValueChange.

Here is a link showing the problem: https://snack.expo.io/L0LhveQem

A possible solution could be transforming the onValueChange function so that the onValueChange prop is invoked after the internal state update has been performed.

onValueChange(value, index) {
  const { onValueChange } = this.props;
  this.setState((prevState) => {
    return { selectedItem: prevState.items[index] }    
  }, () => onValueChange(value, index));
}

In addition, I cannot understand what this line of code is for:

react-native-picker-select/src/index.js

Line 161 in ca6488c

this.props.onValueChange(selectedItem.value, idx);

I think everything will work fine even without this line. Am I wrong?

If you are ok with these observation I can provide a small PR to fix.

@federicobadini

hello @federicobadini! I've only commented this line and it's not being called twice anymore but only on iOS

react-native-picker-select/src/index.js

Line 161 in ca6488c

this.props.onValueChange(selectedItem.value, idx);

I don't understand what that line is for either

update

Sorry, was my mistake on Android, now it is not being called twice in both platforms by commenting that line

Why is this line still a part of the code?

Issue still persist

Still have the issue

Issue still exists

Navigation Menu

Repository navigation

(FIX) onValueChange being called twice #369

update

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

(FIX) onValueChange being called twice #369

Description

Activity

kadiraydinli commented on Nov 18, 2020

federicobadini commented on Jan 16, 2021

sclavijo93 commented on Apr 16, 2021

update

TheRealStriker commented on May 4, 2023

ogheneovo12 commented on Sep 1, 2023

GaetanFauconnier85 commented on Sep 5, 2023

wbwlkr commented on Nov 28, 2023

Fosol commented on Oct 31, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions