iOS 14 UI discussion

[scott-massey]

Hi!

While working on my project, I worked on a way to get the date picker to show up like the new iOS 14 native date picker. A GIF is attached to show what it looks like.

It removes the header text, as well as the cancel and confirm buttons. Instead of changing with the onConfirm, I leverage @react-native-community/datetimepicker's onChange prop. And instead of using a cancel button, the user can just tap outside the modal to have the window close.

If you're interested, would love to work with you to implement this version into your library. Let me know what you need from me.

Best,
Scott

[mmazzarolo]

Hey @scott-massey welcome back :D

This looks exactly like what I was planning to do after #558 gets merged.

My idea was to show the "new" picker for the date and datetime mode, and use the old spinner picker for the time mode planning to pick just the time — because using the new layout on the time alone doesn't look very good in a modal.
Are you doing the same?

I'm curious to see what changes you're making... IIRC in my case #558 + changing the display mode was enough to achieve a look like the one you're using in your picker 🤔

[mmazzarolo]

I'm dumb. I didn't notice you remove the confirm/cancel buttons 😬 Let's talk about it. From my perspective, the problem with it, is that it would have a different API from Android — and I think it's pretty important to maintain the same API between the two platforms (given it's one of the main use cases)

[scott-massey]

If you're worried about the buttons missing, we can implement buttons that look like this instead. That way the modal looks more friendly in the center of the screen. The one frustrating thing with the buttons though is that there is no built-in localization support like there is on android, and we can't implement that without forcing devs to install react-native-localize, which seems like an undue burden.

[scott-massey]

Additionally, I had to do a decent amount of work to get the modal to show up in the center of the screen, as well as bump it up when the keyboard opens. Nothing crazy but we'd want to implement that code as well.

[mmazzarolo]

If you're worried about the buttons missing, we can implement buttons that look like this instead. That way the modal looks more friendly in the center of the screen.

Looking good. Do you know if there's any native API that is using this "look" for a picker? Or any iOS setting that I can tap on to show a modal/dialog with buttons? Just to understand what the official iOS guidelines are promoting.

The one frustrating thing with the buttons though is that there is no built-in localization support like there is on android, and we can't implement that without forcing devs to install react-native-localize, which seems like an undue burden.

Isn't this the same problem we already have with the current version?
The workaround is to localize them using cancelTextIOS and confirmTextIOS — on one hand, it's true that it would be better if users didn't have to go through it to customize the buttons... on the other hand, if you're localizing your app you're probably already using a localization lib (which is why this issue hasn't been reported often) :/

Additionally, I had to do a decent amount of work to get the modal to show up in the center of the screen, as well as bump it up when the keyboard opens. Nothing crazy but we'd want to implement that code as well.

Yeah sorry, I didn't see you removed the confirm/cancel button. By going down this path there's definitely some UI work that needs to be done, I agree 👍

[scott-massey]

Looking good. Do you know if there's any native API that is using this "look" for a picker? Or any iOS setting that I can tap on to show a modal/dialog with buttons? Just to understand what the official iOS guidelines are promoting.

I just looked up "ios 14 date picker" on google images. Most didn't have any buttons, but a couple had smaller buttons. I recreated one of the screenshots I saw pretty easily, see the attached screenshot. Would love your thoughts.

Isn't this the same problem we already have with the current version?
The workaround is to localize them using cancelTextIOS and confirmTextIOS — on one hand, it's true that it would be better if users didn't have to go through it to customize the buttons... on the other hand, if you're localizing your app you're probably already using a localization lib (which is why this issue hasn't been reported often) :/

Makes lots of sense, got it.

[mmazzarolo]

Thanks. I'll look for native modals/dialog for examples/inspirations 👍

[mmazzarolo]

How would you deal with the time-picker?

[scott-massey]

I haven't needed to for my project, but it would probably make sense to keep the time picker as a spinner like before

[mmazzarolo]

Hey @scott-massey. I investigated a bit, the iOS guidelines aren't still saying anything about what kind of button/modals to use. So, for the time being, I'm still planning to use the same components we're currently usings since they work well with all use cases.
I also updated #558 to add some more info on how to support the new iOS 14 style (e.g.: added padding to the modal + updated the README.md). I'm open to feedback and I'm keeping this issue open to continue the discussion in the future :)

[stearruda]

Hi @scott-massey!

I'm currently working on something pretty similar on what you implemented.
Could you share how you came up with the solution?

I was considering implementing without this library, but after @react-native-community/datetimepicker closing your issue there, I'm mostly lost on what to do.

[mmazzarolo]

Hey @stearruda , just FYI, we now support all picker styles: #558 .
Additionally, it looks like from iOS 15 their reverting back to the pre-iOS14 style as the default time and date picker.

[stearruda]

Tks for the info @mmazzarolo!
I'll share the info of iOS 15 with my team too. I didn't know that.

BTW In the end, I've implemented the Date Picker with react-native-modal-datetime-picker together with my Text Input from RN-Paper.
I believe it would take me much more time to do it my own than using the library.

I was having some foundation on how to implement from a previous code of my job (in the deprecated RN the Date Picker) which had an open method. It made me really confused on what to do without it and in this new world of Date Picker. 😅

[scott-massey]

Hi @stearruda! Apologies on not responding, I totally missed this. I ended up using the React Native modal styles to hack together a version that fit with what I needed. Let me know if you still want more info.

[stearruda]

No worries @scott-massey !
Like I said before I've used the library in the end because of time constraints on my project.
I'm glad that I could find something that handled that already. 🙌