henninghall / react-native-date-picker

React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue while open a datepicker over modal

live-jdinfotech opened this issue · comments

Describe the bug
Date picker closed immediately inside react native default modal
Here is the attached media:

Simulator Screen Recording - iPhone 14 Pro - 2024-01-24 at 18 07 04

Expected behavior
Open datepicker modal over react native default modal

To Reproduce
Add example code that reproduces the behavior.

import React, { useState, useEffect } from 'react';
import { Modal } from 'react-native';
import DatePicker from 'react-native-date-picker';
const MyComponent = ({ }) => {
  const [openDateTimePicker, setOpenDateTimePicker] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)
  const [dateTimeVal, setDateTimeVal] = useState('')
  return (
    <>
      <Modal
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
        animationType="fade"
      >
        ...
      </Modal>
      <DatePicker
        modal
        mode="datetime"
        open={openDateTimePicker}
        date={dateTimeVal}
        minuteInterval={5}
        onConfirm={(date) => {
          setOpenDateTimePicker(false)
          setDateTimeVal(date)
        }}
        onCancel={() => {
          setOpenDateTimePicker(false)
        }}
      />
    </>
  );
};

export default MyComponent;

Smartphone (please complete the following information):

  • OS: iOS
  • React Native version - 0.73.1
  • react-native-date-picker version - 4.3.5