Modal that supports DatePicker for Android and IOS

RNDatePickerModal.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
  Modal,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Platform
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

import Color from '../../resources/Color';

const styles = StyleSheet.create({
  modal: { flex: 1, zIndex: 111, justifyContent: 'flex-end' },
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: Color.ModalBackground
  },
  view: { padding: 16, backgroundColor: Color.White },
  header: { flexDirection: 'row', justifyContent: 'space-between' },
  title: { fontWeight: 'bold', paddingVertical: 8 },
  action: { paddingVertical: 8, color: Color.Blue, textAlign: 'right' },
  spacer: { width: 16 }
});

const IosPicker = ({ date, setDate, visible, onClose, picker }) => {
  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
  };

  return (
    <Modal
      visible={visible}
      onRequestClose={onClose}
      transparent
      style={styles.modal}
      animationType="fade"
    >
      <View style={styles.container}>
        <View style={styles.view}>
          <View style={styles.header}>
            <Text allowFontScaling={false} style={styles.title}>
              {picker.type === 'time' ? 'Select the Time' : 'Select the Date'}
            </Text>
            <View style={styles.spacer} />
            <TouchableOpacity
              activeOpacity={0.85}
              onPress={() => onClose(date, picker)}
            >
              <Text allowFontScaling={false} style={styles.action}>
                DONE
              </Text>
            </TouchableOpacity>
          </View>
          <DateTimePicker
            testID="dateTimePicker"
            value={date}
            mode={picker.type}
            is24Hour
            display="default"
            onChange={onChange}
          />
        </View>
      </View>
    </Modal>
  );
};

const AndroidPicker = ({ date, setShowDatePicker, onClose, picker }) => {
  const onChange = (event, selectedDate) => {
    setShowDatePicker(Platform.OS === 'ios');
    onClose(selectedDate, picker);
  };
  return (
    <DateTimePicker
      testID="dateTimePicker"
      value={date}
      mode={picker.type}
      is24Hour
      display="default"
      onChange={onChange}
    />
  );
};

const DatePickerModal = ({ mainDate, ...props }) => {
  const [date, setDate] = useState(mainDate || new Date());

  return Platform.OS === 'ios' ? (
    <IosPicker date={date} setDate={setDate} {...props} />
  ) : (
    <AndroidPicker date={date} setDate={setDate} {...props} />
  );
};

IosPicker.propTypes = {
  date: PropTypes.instanceOf(Date),
  visible: PropTypes.bool,
  onClose: PropTypes.func,
  setDate: PropTypes.func,
  picker: PropTypes.instanceOf(Object)
};

AndroidPicker.propTypes = {
  date: PropTypes.instanceOf(Date),
  onClose: PropTypes.func,
  setShowDatePicker: PropTypes.func,
  picker: PropTypes.instanceOf(Object)
};

DatePickerModal.propTypes = {
  mainDate: PropTypes.instanceOf(Date),
  visible: PropTypes.bool,
  onClose: PropTypes.func,
  picker: PropTypes.instanceOf(Object)
};

DatePickerModal.defaultProps = {
  picker: {
    field: 'start',
    type: 'date'
  }
};

export default DatePickerModal;

/* onClose function from parent example:
  const handleCloseDatesModal = (newDate, picker) => {
    if (picker.field === 'start') {
      if (picker.type === 'date') setStartDate(newDate);
      if (picker.type === 'time') setActiveFrom(newDate);
    }
    if (picker.field === 'end') {
      if (picker.type === 'date') setDueDate(newDate);
      if (picker.type === 'time') setActiveUntil(newDate);
    }
    setShowDatePicker(false);
  };
*/

/* Component call example:
  {showDatePicker && (
    <DatePickerModal
      mainDate={datePickerType.field === 'start' ? startDate : dueDate}
      visible={showDatePicker}
      picker={datePickerType}
      onClose={handleCloseDatesModal}
      setShowDatePicker={setShowDatePicker}
    />
  )}
*/