-
-
Notifications
You must be signed in to change notification settings - Fork 413
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dialog opens twice on Android #54
Comments
Did you resolve this problem @Niore? |
no still got no solution for it. |
Have you tried |
The problem is because of the rerender queue when using useState hooks explained here 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 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);
}} |
I fixed this problem by closing the picker before handling it's value.
Hope this will work |
@vovka-s I've been scratching my head all day on this one, thank you! |
Another solution is just creating a memoized wrapper for avoid render phase of native component: |
I fixed it with the following code:
|
Works like a charm. |
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. |
try that
If not, try to use |
Thank you very much ! It works ! |
@ vovka-s Thank you very much . It worked for me, you saved my day. |
This kind of solved it for me |
wow, that helped me as well, I spent about 4 hours trying to figure out what's wrong with the picker! |
Thank you that solved for me. |
I tried all the above, and none helped me.
worked like a charm :) |
Hi!
I hope it works for you. A greeting! |
react-native-datetimepicker has no onHide method |
working !! Tada !! |
Thanks @vovka-s |
Why: we would like for the user details form to provide a good UX on both iOS and Android. This commit: Updates the styling on the form, especially to the DatePicker element. Note that ReactNativeDatetimePicker has a UI bug on android that required an odd workaround with `setShowDatePickerAndroid(false)` reference: react-native-datetimepicker/datetimepicker#263 react-native-datetimepicker/datetimepicker#54
…#744) Why: we would like for the user details form to provide a good UX on both iOS and Android. This commit: Updates the styling on the form, especially to the DatePicker element. Note that ReactNativeDatetimePicker has a UI bug on android that required an odd workaround with `setShowDatePickerAndroid(false)` reference: react-native-datetimepicker/datetimepicker#263 react-native-datetimepicker/datetimepicker#54
Thank you so much!!! |
Thanks! It works. |
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 |
I fixed this problem to onConfirm={(selectedDate) => { |
I had this issue with the dialog showing up again after I'd selected the date value. My solution that worked is:
hope this helps! |
This solution was the only one that works for me. Someone can explain to me how useMemo works on this case? |
thank you! it worked |
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:
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? 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}
/>
)}
...
) |
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. |
Hello 👋 , With that, I'm closing the issue, |
Thank you so much |
Still works! |
which debugger do you mean exactly? |
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 ?
This is the result : Thanks in advance. |
@iamemiliano you need to wrap it with a state and show it according to it. Have a look in the example
|
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)=>{
}`
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) |
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. |
hi, im working on a task app, and when i use te DateTimePicker, it opens twice and doesnt show the selected date. |
This is what you might have done
You should do something like this
You should first hide the date picker than you can do any operations you want I had the same issue. fixed this way and working fine Here is the elaborated ansswer |
yes same here in deadline stage |
If anyone is still facing this issue, you can try this easy fix:
In onChange, setShowDatePicker's callback function updates the date and then updates the showdatePicker state by returning false. |
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:
Thx for your help
The text was updated successfully, but these errors were encountered: