How to display the calendar using modal datetime picker

Question

I am using the react-native-modal-datetime-picker library and I am trying to use the display prop to display the calendar. If you look at my reproducible example found on snack expo here, you can see the issue I am having. I have also posted the code below.

The issue I am having is that when you hit 'Show Data Picker', you can see it renders this bottom modal with the current date. If you press the date, the calendar renders. How can I skip the first bottom modal that gets rendered? I just want to go straight to the calendar.

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'pink'}}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
        display={"default"}
      />
    </View>
  );
};

export default Example;

The calendar I want, but without the bottom modal that renders, I want just the calendar.

Answer 1

set display prop to inline instead of calendar

display={"inline"}

for more details see the documentation about this: here