Dialog opens twice on Android

Question

Dialog opens twice on Android

Niore opened this issue 5 years ago · 45 comments

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

Answer 1 · 2019-11-11T07:08:20.000Z

Did you resolve this problem @Niore?
I'm having a similar issue :/

Answer 2 · 2019-11-11T07:32:11.000Z

no still got no solution for it.

Answer 3 · 2019-11-11T19:09:48.000Z

Have you tried setShowDatePicker(Platform.OS === 'ios' ? true : false);?
I remember having the same issue and I think the above was part of the solution.

Answer 4 · 2019-11-12T15:46:49.000Z

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);
}}

Answer 5 · 2019-11-14T10:31:15.000Z

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

Answer 6 · 2019-12-16T22:28:25.000Z

@vovka-s I've been scratching my head all day on this one, thank you!

Answer 7 · 2019-12-20T14:24:59.000Z

Another solution is just creating a memoized wrapper for avoid render phase of native component:
const MemoizedDateTimePicker = React.memo((props) => <DateTimePicker {...props} />)

Answer 8 · 2020-02-11T01:36:21.000Z

I fixed it with the following code:

const [state, setState] = useState({
  date: new Date(),
  mode: 'date',
  show: false
});
const onChange = (event, selectedDate) => {
  const currentDate = selectedDate || state.date;

  setState({...state, date: currentDate, show: false});
};
const showPicker = currentMode => {
  setState({...state, show: true});
};

{ state.show && 
  (<DateTimePicker
        testID="dateTimePicker"
        timeZoneOffsetInMinutes={0}
        value={state.date}
        mode={state.mode}
        is24Hour={true}
        display="default"
        onChange={onChange}
      />)
}

Answer 9 · 2020-02-19T01:06:56.000Z

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);
}}

Works like a charm.
Thanks!

Answer 10 · 2020-04-15T12:23:18.000Z

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

Answer 11 · 2020-04-24T03:07:19.000Z

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm
It works for me

Answer 12 · 2020-04-24T09:19:13.000Z

const handleConfirm = (datetime) => {
hideDatePicker() //must be first
console.log("A date has been picked: ", datetime)
setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

Thank you very much ! It works !

Answer 13 · 2020-06-09T13:49:12.000Z

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm
It works for me

@ vovka-s Thank you very much . It worked for me, you saved my day.

Answer 14 · 2020-06-30T11:21:26.000Z

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

This kind of solved it for me

Answer 15 · 2020-09-16T12:31:08.000Z

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

wow, that helped me as well, I spent about 4 hours trying to figure out what's wrong with the picker!

Answer 16 · 2020-10-06T14:57:27.000Z

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);
}}

Thank you that solved for me.
I have it set this way if anybody needs a Modal component that supports both OS.
DatePickerModal

Answer 17 · 2020-10-18T15:48:45.000Z

I tried all the above, and none helped me.
But using

onHide={() => setShowDatePicker(false)}

worked like a charm :)

Answer 18 · 2020-10-29T20:56:06.000Z

Hi!
for me work this example when you have two DateTimePicker in same page.

    const showTimepicker = (event: any) => {
        event.preventDefault()
        setShow(true);
    };
    <TextLinkButton onPress={(event) => showTimepicker(event)} label={label} />

I hope it works for you. A greeting!

Answer 19 · 2020-11-03T11:26:35.000Z

I tried all the above, and none helped me.
But using
onHide={() => setShowDatePicker(false)}
worked like a charm :)

react-native-datetimepicker has no onHide method

Answer 20 · 2020-11-11T08:18:14.000Z

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

working !! Tada !!

Answer 21 · 2020-11-27T12:49:57.000Z

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

Thanks @vovka-s

Answer 22 · 2021-01-06T09:02:40.000Z

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

Thank you so much!!!
You saved my life.

Answer 23 · 2021-01-21T01:10:07.000Z

Another solution is just creating a memoized wrapper for avoid render phase of native component:
const MemoizedDateTimePicker = React.memo((props) => <DateTimePicker {...props} />)

Thanks! It works.

Answer 24 · 2021-01-22T06:44:00.000Z

I tried this workaround. Works fine.

const DTPicker = ({ mode, onChange, value, placeholder, label,}) => {

    const [show, setShow] = useState(false);
    
    const handleDate = (e) => {
        if (e.nativeEvent.timestamp) onChange(e.nativeEvent.timestamp)
        setShow(Platform.OS === 'ios')
    }
    
    return <View>
        <TextInput placeHolder={placeholder} label={label} onFocus={() => setShow(true)} value={value} />
        {React.useMemo(() => {
            return show && <DateTimePicker
                value={new Date()}
                mode={mode}
                display="default"
                onChange={handleDate}
            />
        }, [show])}
    </View>
};

Answer 25 · 2021-01-22T10:29:56.000Z

I tried this workaround. Works fine.

Very weird use case for useMemo... Better try to extract it to React.memo'ized component

Answer 26 · 2021-01-22T11:18:46.000Z

I tried this workaround. Works fine.

Very weird use case for useMemo... Better try to extract it to React.memo'ized component

Yes. We can refactor the component as you are saying. I have just added it here in single function, so that everyone can understand

Answer 27 · 2021-01-30T18:32:49.000Z

I fixed this problem
onConfirm={selecteddate => {
setDate(selecteddate);
setPickerVisible(false);
} }

to

onConfirm={(selectedDate) => {
setPickerVisible(false);
setDate(selecteddate);
} }

Answer 28 · 2021-02-02T17:30:35.000Z

I had this issue with the dialog showing up again after I'd selected the date value. My solution that worked is:

const [show, setShow] = React.useState<boolean>(false);
const [birthday, setBirthday] = React.useState<string | undefined>(undefined);
const onChangeDate = useCallback((event, selectedDate) => {
    setBirthday(selectedDate);
    setShow(false);
  }, []);

// in the render
{show && (
  <View>
    <DateTimePicker
      testID="dateTimePicker"
      maximumDate={
        new Date(
          moment().subtract(13, "years").format("yyyy-MM-DD"),
        )
      }
      value={
        birthday
          ? new Date(birthday)
          : new Date(
              moment().subtract(13, "years").format("yyyy-MM-DD"),
            )
      }
      mode="date"
      display="default"
      onChange={(e, v) => {
        setShow(Platform.OS === "ios");
        onChangeDate(e, v);
      }}
    />
  </View>
  )}

hope this helps!

Answer 29 · 2021-02-23T02:04:08.000Z

I tried this workaround. Works fine.

const DTPicker = ({ mode, onChange, value, placeholder, label,}) => {

    const [show, setShow] = useState(false);
    
    const handleDate = (e) => {
        if (e.nativeEvent.timestamp) onChange(e.nativeEvent.timestamp)
        setShow(Platform.OS === 'ios')
    }
    
    return <View>
        <TextInput placeHolder={placeholder} label={label} onFocus={() => setShow(true)} value={value} />
        {React.useMemo(() => {
            return show && <DateTimePicker
                value={new Date()}
                mode={mode}
                display="default"
                onChange={handleDate}
            />
        }, [show])}
    </View>
};

This solution was the only one that works for me. Someone can explain to me how useMemo works on this case?

Answer 30 · 2021-06-13T07:11:05.000Z

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

thank you! it worked

Answer 31 · 2021-09-02T02:41:48.000Z

The suggested solution of closing the picker before anything else does not work for me. Also, I can't change the selected date.

What I believe it's happening in my case, is that due to the fact that two pickers are open, whenever I try selecting the new date on the visible picker, the picker behind it forces the date to be the previous selected value.

Here's what happens on my code when:

Closing the picker before setting the value:
- Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;
- Android Physical Device: when I close the picker, the second picker also gets closed and it's not possible to change the date;
Setting the value before closing the picker:
- On the Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;
- Android Physical Device, when I close the picker, the second picker becomes visible and it's possible to select the date;

Also, what's the default behaivour of 'onChange'? Should it get triggered whenever you click on a new date? Or only after you click 'Ok' to confirm the selected date?
If the first option is the default behaviour, I believe that this method is only getting attached to the 'second' picker, which is not visible at first.

Here's the relevant part of the current code I'm working with:

  const [usedAt, setUsedAt] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);
  ...

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={(e: Event, date?: Date) => {
            setShowDatePicker(Platform.OS === 'ios');
            setUsedAt(date || usedAt);
          }}
        />
      )}
      ...
  )

Answer 32 · 2021-09-02T12:45:43.000Z

The suggested solution of closing the picker before anything else does not work for me. Also, I can't change the selected date.

What I believe it's happening in my case, is that due to the fact that two pickers are open, whenever I try selecting the new date on the visible picker, the picker behind it forces the date to be the previous selected value.

Here's what happens on my code when:

Closing the picker before setting the value:

Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;

Android Physical Device: when I close the picker, the second picker also gets closed and it's not possible to change the date;

Setting the value before closing the picker:

On the Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;

Android Physical Device, when I close the picker, the second picker becomes visible and it's possible to select the date;

Also, what's the default behaivour of 'onChange'? Should it get triggered whenever you click on a new date? Or only after you click 'Ok' to confirm the selected date?
If the first option is the default behaviour, I believe that this method is only getting attached to the 'second' picker, which is not visible at first.

Here's the relevant part of the current code I'm working with:
  const [usedAt, setUsedAt] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);
  ...

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={(e: Event, date?: Date) => {
            setShowDatePicker(Platform.OS === 'ios');
            setUsedAt(date || usedAt);
          }}
        />
      )}
      ...
  )

I've managed to get it to work now. Basically, I had to create a function with the 'useCallback' hook to deal with the date selection event like so:

  const handleDateChange = useCallback(
    (event: Event, date: Date | undefined) => {
      if (Platform.OS === 'android') {
        setShowDatePicker(false);
      }
      if (date) setUsedAt(date);
    },
    [],
  );

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={handleDateChange}
        />
      )}
      ...
  )

Answer 33 · 2021-12-06T11:32:40.000Z

I'm 2 years late and I don't know if this is fixed already since I didn't read everything, but whoever still having this issue, just close the modal first before setting the new date.

Answer 34 · 2022-03-11T04:24:28.000Z

Hello 👋 ,
this issues should be resolved in #574

With that, I'm closing the issue,
Thank you! 🙂

Answer 35 · 2022-08-05T02:16:59.000Z

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm It works for me

Thank you so much
this work like charm
i was struggling from many days

Answer 36 · 2022-09-08T09:59:39.000Z

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm It works for me

Still works!

Answer 37 · 2022-10-13T09:32:11.000Z

DatePickerModal

which debugger do you mean exactly?

Answer 38 · 2022-10-15T17:30:30.000Z

I hope you are doing well. I have a problem with react native on Android. In IOS, it works well but when i open a componant who includes a DataTimePicker in Android, it automatically shows me the DatatimePicker. Do you know what the problem is in my code ?

             <View style={styles.dateContainer}>
                <Text style={styles.customLabelDate}>
                    Date de naissance
                </Text>
                <DateTimePicker
                    testID="dateTimePicker"
                    value={stateForm.dateOfBirth}
                    mode="date"
                    is24Hour={true}
                    display="calendar"
                    onChange={(event, value) => {
                        dispatchStateForm({
                            type: UPDATE,
                            payload: { name: "dateOfBirth", value: value },
                        });
                    }}
                    style={styles.dateTime}
                    locale="fr-FR"
                    textColor="red"
                />
            </View>

This is the result :

Thanks in advance.

Answer 39 · 2022-10-15T20:01:20.000Z

@iamemiliano you need to wrap it with a state and show it according to it. Have a look in the example

            {show && (
            <DateTimePicker
              testID="dateTimePicker"
              timeZoneOffsetInMinutes={tzOffsetInMinutes}
              minuteInterval={interval}
              maximumDate={maximumDate}
              minimumDate={minimumDate}
              value={date}
              mode={mode}
              is24Hour
              display={display}
              onChange={onChange}
              textColor={textColor || undefined}
              accentColor={accentColor || undefined}
              neutralButtonLabel={neutralButtonLabel}
              disabled={disabled}
            />
          )}`

Answer 40 · 2022-11-02T15:53:04.000Z

I have a problem where the dialog opens twice and I can't pick a date (after I click on a date it get back to the starting one instantly).

`const handleData1 = (event,date)=>{
setShowstart(Platform.OS === 'ios')

if(event.type === "set"){
  setStart(date)
  setShowstart(false)
}

}`

<Text onPress={()=>setShowstart(true)}>{start.toDateString()}</Text> {showStart==true &&(<View> <DateTimePicker value={start} mode="date" textColor='white' style={{ marginBottom:30, marginTop:30, zIndex:1000,}} themeVariant='dark' onChange={handleData1} accentColor="white"/> </View>) }

I've tried to console log the event type and the value of showStart and for example on the dismiss I get 2 console log of event.type dismiss and after I click on the first dialog cancel the second one is still open and the value of showStart is false (how is it possible that even if the value showStart is false it still render the dialog)

Answer 41 · 2022-11-16T14:19:48.000Z

setShowCalendarToDate(Platform.OS === 'ios' ? true : false); //first line of onChange function

This will solve the android issue. But if you do not do this, iOS will start misbehaving. For example, if you set either month, year, or date, the iOS picker will disappear before letting you select all three.

Answer 42 · 2022-12-18T22:41:17.000Z

hi, im working on a task app, and when i use te DateTimePicker, it opens twice and doesnt show the selected date.
i've tried all above and nothing really worked,
this is what im working on
<DateTimePicker value={date} mode={"time"} is24Hour={true} onChange={(event, value) => { setShowDatePicker(!showDatePicker); setDate(selectedDate); }} style={{width: "80%"}} />

Answer 43 · 2022-12-19T05:01:13.000Z

This is what you might have done

 const handleConfirm = selectedDateFromPicker => {
    Keyboard.dismiss();
    setDate(prevState => ({
      ...prevState,
      [type]: Helper.convertToIsoDateString(selectedDateFromPicker),
    }));
   **hideDatePicker();** --> _HERE_

You should do something like this

 const handleConfirm = selectedDateFromPicker => {
  **hideDatePicker();** --> _HERE_
    Keyboard.dismiss();
    setDate(prevState => ({
      ...prevState,
      [type]: Helper.convertToIsoDateString(selectedDateFromPicker),
    }));

You should first hide the date picker than you can do any operations you want
This will work. @Onikiri1

I had the same issue. fixed this way and working fine
if you don't get my code let me know i will show you the working of it

Here is the elaborated ansswer

Check this answer

Answer 44 · 2023-05-18T11:50:55.000Z

yes same here in deadline stage

Answer 45 · 2024-06-05T21:50:36.000Z

If anyone is still facing this issue, you can try this easy fix:

const [showDatePicker, setShowDatePicker] = useState(false);

{showDatePicker && (
  <DateTimePicker
    value={new Date()}
    mode={'date'}
    minimumDate={moment().startOf('day').toDate()}
    onChange={(_, newDate) => {
      setShowDatePicker(() => {
        setDate(newDate);
        return false; 
      });
    }}
  />
)}

In onChange, setShowDatePicker's callback function updates the date and then updates the showdatePicker state by returning false.