Strange behavior of iOS datepicker in react-native 0.63.3

user_2082616 0
Viewed 1443

I use date pickers in my app and till the update of RN to 0.63 they were working fine. Date picking in the 'date' mode was done on iOS by means of selecting values on 3 vertically spinning "drums" : the date, the month and the year. Now after the update it looks like this :

  1. This is what a user sees instead of the "drums". The area is not spinnable nor swipable and only responds to a click on the highlighted date.enter image description here

  2. This is what a user sees after a click to the highlighted date enter image description here

It kind of works but offers an extremely convoluted UX. I wonder if this is a "new norm" or is there is a way to configure/hack an underlying native component in order to revert to previous behavior. The exact component I am using is xgfe/react-native-datepicker. I also tried to switch to a newer @react-native-community/datetimepicker, but the result is roughly the same with this strange intermediate control opening first and if clicked - opening a calendar modal.

react-native datepicker ios
1 Answers

I just figured out the @react-native-community/datetimepicker exposes a "display" property for IOS (possible values: 'default', 'compact', 'spinner', 'inline') which determines which exact UI driver to use. The 'spinner' renders the mentioned 'drums' that every IOS user is accustomed to, the 'inline' renders a calendar. I assume that 'default' can differ, but in my case it yielded the same result as 'compact' which is what you can see above. Apparently in the older RN components which do not expose such property the default driver will be used possibly resulting in all sorts of inconveniencies.

user_20826160
Related