React-native-modal-datetime-picker: In version 8.x.x the dateTime pickers opens multiple times even after confirm

Created on 31 Dec 2019  路  1Comment  路  Source: mmazzarolo/react-native-modal-datetime-picker

Please note this is just an info to save somebody else from the pain. The answer will be in the comment below.

With the following set up , the datetime Popup appears many time in version 8.x.x. whereas works fine in 7.6.1

following is the sample code

import DateTimePicker from "react-native-modal-datetime-picker";

toggleDatePicker = () => {
    const { isDateVisible } = this.state;
    this.setState({ isDateVisible: !isDateVisible });
  };

confirm = val => {
    onChange(val) // this is onchange event for TextInput 
    this.toggleDatePicker();
  };

<DateTimePicker
            mode="datetime"
            date={ new Date()}
            isVisible={isDateVisible}
            onCancel={this.toggleDatePicker}
            minimumDate={new Date()}
            onConfirm={this.confirm}
  />

Do not forget to check the answer in the comment

bug

Most helpful comment

Above issue is related to https://github.com/react-native-community/react-native-datetimepicker/issues/54.
Inorder to fix it, one need to move any onChange code below the code that hides the DateTimePicker.

So from above sample code just move the onChange(val) below the setter which hides the DateTimePicker as follows:

confirm = val => {
    this.toggleDatePicker();
   //**Fix:** notice , onChange is moved below the toggle method 
    onChange(val) // this is onchange event for a TextInput 
  };

>All comments

Above issue is related to https://github.com/react-native-community/react-native-datetimepicker/issues/54.
Inorder to fix it, one need to move any onChange code below the code that hides the DateTimePicker.

So from above sample code just move the onChange(val) below the setter which hides the DateTimePicker as follows:

confirm = val => {
    this.toggleDatePicker();
   //**Fix:** notice , onChange is moved below the toggle method 
    onChange(val) // this is onchange event for a TextInput 
  };
Was this page helpful?
0 / 5 - 0 ratings