react-native-modal-datetime-picker showing only current date

Question

I'm using react-native-modal-datetime-picker in my React Native app on iOS, and when the modal pops up, instead of having a range of dates to scroll through, it shows only the current date:

<DateTimePickerModal
    datePickerModeAndroid={'spinner'}
    mode={'date'}
    is24Hour={false}
    isVisible={this.state.isDatePickerVisible}
    onConfirm={() => {}}
    onCancel={() => {}}/>

[email protected] [email protected]

Does anyone know how to approach solving this?

Answer 1

Just add display={"spinner"}

Your device/simulator use default display style which is calendar and in calendar case above UI will be render.

Example Code:

<DateTimePickerModal
    date={this.props.currentDate || undefined}
    maximumDate={this.props.maximumDate}
    minimumDate={this.props.minimumDate}
    mode="date"
    onCancel={this.onCancel}
    onConfirm={this.onConfirm}
    isVisible={this.state.modalOpened}
    display={this.props.display}
/>

Answer 2

1. add display = 'spinner'

   and inside ios->myappname->AppDelegate.m add these lines inside didfinishlaunch options;

    
    if (@available(iOS 14, *)) {
        UIDatePicker *picker = [UIDatePicker appearance];
        picker.preferredDatePickerStyle = UIDatePickerStyleWheels;  }