Collecting date/time input

In this final section of this chapter, you’ll learn how to implement date/time pickers. React Native docs suggest using @react-native-community/datetimepicker independent date/time picker components for iOS and Android, which means that it is up to you to handle the cross-platform differences between the components.

To install datetimepicker, run the following command in the project:

npx expo install @react-native-community/datetimepicker

So, let’s start with a DatePicker component for iOS:

export default function DatePicker(props: DatePickerProps) {
  return (
    <View style={styles.datePickerContainer}>
      <Text style={styles.datePickerLabel}>{props.label}</Text>
      <DateTimePicker
        mode="date"
        display="spinner"
        value={props.value}
        onChange={(event, date) => {
          if (date) {
            props.onChange(date);
          }
        }}
 ...