Dialog opens twice on Android

If i open the Datepicker it opens twice on Android. I select in the first Dialog a date. then the same dialog opens again and i have to select a date again . After the second time it will accept the input. Can someone help me?

Thats the code of the component. Most of the components are just for styling:

const DatePickerInput = ({
  inputName,
  locale,
  labelKey,
  max,
  min,
}) => {
  const { values, setFieldValue } = useFormikContext();
  const [t] = useTranslation('validatedTextInput');
  const [showDatePicker, setShowDatePicker] = useState(false);
  const initialDate = values[inputName] || new Date();
  const [selectedDate, setSelectedDate] = useState(moment(initialDate).toDate());
  const datePlaceholderKey = 'datePlaceholder';
  return (
    <DatePickerContainer>
      <DatePickerLabel>
        {t(labelKey)}
      </DatePickerLabel>
      <DatePickerButtonContainer>
        <DatePickerButton
          onPress={() => setShowDatePicker(!showDatePicker)}
        >
          <DatePickerButtonText>
            {selectedDate
              ? moment(selectedDate).format('L')
              : t(datePlaceholderKey)}
          </DatePickerButtonText>
          <DatePickerButtonImage source={Calendar} />
        </DatePickerButton>
      </DatePickerButtonContainer>
      {
        showDatePicker && (
          <DateTimePicker
            mode="date"
            display="spinner"
            value={selectedDate}
            onChange={(event, value) => {
              setFieldValue(inputName, value);
              setShowDatePicker(!showDatePicker);
              // setSelectedDate(value);
            }}
            maximumDate={max}
            minimumDate={min}
            locale={locale}
          />
        )
      }
    </DatePickerContainer>
  );
};

Thx for your help

[vovka-s]

I fixed this problem by closing the picker before handling it’s value. Swap setFieldValue and setShowDatePicker into onChange handler

onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}

Hope this will work

[Freerider689]

The problem is because of the rerender queue when using useState hooks explained here https://stackoverflow.com/a/54120412

To implicitly order the rerenders and avoid a second datepicker just do

onChange={(event, value) => {
 setShowDatePicker(Platform.OS === 'ios'); // first state update hides datetimepicker
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}

To be more explicit I suggest the useStateWithCallback hook created by @rwieruch here https://github.com/the-road-to-learn-react/use-state-with-callback/blob/master/src/index.js

And replace your current selectedDate state hook with the following:

const [selectedDate, setSelectedDate] = useStateWithCallback(
    initialDate,
    () => setShowDatePicker(Platform.OS === 'ios'),
); 

With this you no longer need to set the showDatePicker state onChange() so just this:

onChange={(event, value) => {
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}