"Confirm" and "Cancel" buttons don't work in portrait mode (iOS)

[Aleksandern]

Environment

Platforms

Versions

• iOS: 14.0
• react-native-modal-datetime-picker: 9.0.0
• react-native-community/datetimepicker: 3.0.4
• react-native: 0.63.3
• react: 16.13.1

Description

"Confirm" and "Cancel" buttons don't work in portrait mode (not tappable).

code:

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>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

Reproducible Demo

[midoalone]

@Aleksandern did you get a solution for this? I am also facing it on iOS 14

[Aleksandern]

@midoalone
No I didn't. I've just posted it.

[midoalone]

@Aleksandern I discovered that this issue is related to react native Modal class not this library, I am searching for a solution and hope I find a fix
I think it is related to react native 62.2 version

[Aleksandern]

@midoalone
14.1 update fixed that.

[Aleksandern]

It looks like this error is still happening on iOS 14.1

[mmazzarolo]

🤔 I'll give it a try this weekend. @midoalone do you have any links on the subject?
Thanks for starting the discussion btw

[mmazzarolo]

Working fine in the example, using:

• "react": "16.13.1",
• "react-native": "0.63.2",

iPhone 11 - 14.0

[czegarram]

I'm experiencing the same issue in ios 14.

React: 16.9.0
React Native: 0.63.3

[czegarram]

I also tried with:

"react": "16.13.1",
"react-native": "0.63.2",

but no luck.

[mmazzarolo]

Hmmm does it work with just the example? Can you provide a MINIMAL repro repo?

…

On Sat, 24 Oct 2020 at 23:28, Cesar Zegarra ***@***.***> wrote: I also tried with: "react": "16.13.1", "react-native": "0.63.2", but no luck. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#485 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACIYGYVFSAEXABOYEANLJKLSMNBI7ANCNFSM4SYEAB6A> .

[mmazzarolo]

Can't debug this without a minimal reproducible code. Also, the example is working fine for my tests, so I'm closing the issue.

[OlegPanfyorov]

Faced exactly the same issue :((((

[dylan-westbury]

Facing this issue also. Can't click the confirm or cancel buttons, nothing happens.

iPhone 11 simulator ios 14.3

"react-native-modal-datetime-picker": "^9.1.0",
"@react-native-community/datetimepicker": "^3.0.9",
"react-native": "0.63.3",
"react": "16.13.1",

[dylan-westbury]

I tried upgrading to react-native 63.4 and not fixed.

@mmazzarolo I have created a reproducable repo

https://github.com/dylan-westbury/datepicker-reproduce-confirm-cancel-bug

Running on ios 14.3 iphone 11

[mmazzarolo]

@dylan-westbury thank you. Is the example working for you?

[dylan-westbury]

@mmazzarolo no can't press cancel or confirm in portrait mode

[mmazzarolo]

@dylan-westbury

Screen.Recording.2021-01-10.at.18.00.20.mov

[binlaniua]

facebook/flipper#1399 (comment)

facebook/react-native#29492 (comment)

[PentamapRainer]

Any solution on this behavior?

Portrait_Mode.mov

When opening the DatePicker in landscape mode, the view changes to portrait mode. When closing the DatePicker, the view changes to landscape mode again.