iOS Organizer DateTimePicker

[MatteoBuffo]

Hello everybody. I'm toying with this library, and I would like to achieve an iOS Organizer-like date and time picker (actually, it's two separate pickers).

Please check the video below. It was recorded on an iPhone 8 running iOS 15.1.

https://user-images.githubusercontent.com/56068232/192572548-62cc422b-6722-443a-89a8-2ea942d73aa3.mp4

As you can see, the date calendar and the time spinners, when they appear for the first time, shift the content below (in an accordion-like fashion). Also, there's a label in the left side of the row (Inizio/Start in the first row, Fine/End in the second one).

This below is my example app with the two datetime pickers.

https://user-images.githubusercontent.com/56068232/192574499-f4cdc09d-46b5-4844-abf6-b0d11a35c5fa.mp4

Related code:

<DateTimePicker
	testID="dateTimePicker1"
	value={date}
	mode={"datetime"}
	onChange={onChange}
	display={"compact"}
/>
<DateTimePicker
	testID="dateTimePicker2"
	value={date}
	mode={"datetime"}
	is24Hour={true}
	onChange={onChange}
	display={"compact"}
/>

Thanks!

[MatteoBuffo]

@chrisdrackett I've just seen your issue here: can you tell me how did you put that "Log" label in the left side of the row, please?

[chrisdrackett]

<View flexDirection="row" flexGrow="1" alignItems="center" justifyContent="space-between">
  <Text>Log</Text>
  <DateTimePicker … />
</View>

I haven't updated this package yet and I'm still hardcoding the width of the picker, FYI

[vonovak]

Hello and thanks for asking, animating the picker is possible:

https://user-images.githubusercontent.com/1566403/201970801-d535c93d-633f-4735-804f-935bf6d28158.mp4

Also, with the code that was provided in the previous comment (related to #339) you can see that the problem with DateTimePicker alignment is fixed.

To animated the picker styles, use react-native-reanimated:

class DateTimePickerClass extends React.Component {
  render() {
    return <DateTimePicker {...this.props} />;
  }
}
const AnimatedDateTimePicker = Animated.createAnimatedComponent(DateTimePickerClass);

and then use useAnimatedStyle hook.

Thank you 🙂