From 8733f8342f579c5a69db84fcf1164f318cbb5d24 Mon Sep 17 00:00:00 2001 From: Jakov Glavina Date: Sat, 8 Apr 2023 19:59:29 +0200 Subject: [PATCH] fix: resolve occasional styling bug with inline `display` in `datetime` mode on iOS (#697) BREAKING CHANGE: This is a light breaking change since it might break custom patches people applied to fix this issue in other way + we're bumping the `@react-native-community/datetimepicker` peer-dependency version --- README.md | 69 +++++++++++++++++----------------- package.json | 2 +- src/DateTimePickerModal.ios.js | 19 ++++++++++ 3 files changed, 54 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 5ba46f0..3040988 100644 --- a/README.md +++ b/README.md @@ -91,37 +91,38 @@ export default Example; 👉 Please notice that **all the [`@react-native-community/react-native-datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) props are supported** as well! -| Name | Type | Default | Description | -|---------------------------|-----------| ------------ |-----------------------------------------------------------------------------------------------------| -| `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) | -| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) | -| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests | -| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) | -| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests | -| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) | -| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) | -| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) | -| `customHeaderIOS` | component | | Overrides the default header component (iOS) | -| `customPickerIOS` | component | | Overrides the default native picker component (iOS) | -| `date` | obj | new Date() | Initial selected date/time | -| `isVisible` | bool | false | Show the datetime picker? | -| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) | -| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS | -| `modalStyleIOS` | style | | Style of the modal content (iOS) | -| `mode` | string | "date" | Choose between "date", "time", and "datetime" | -| `onCancel` | func | **REQUIRED** | Function called on dismiss | -| `onChange` | func | () => null | Function called when the date changes (with the new date as parameter). | -| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object | -| `onHide` | func | () => null | Called after the hide animation | -| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) | -| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) | +| Name | Type | Default | Description | +| ------------------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) | +| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) | +| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests | +| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) | +| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests | +| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) | +| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) | +| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) | +| `customHeaderIOS` | component | | Overrides the default header component (iOS) | +| `customPickerIOS` | component | | Overrides the default native picker component (iOS) | +| `date` | obj | new Date() | Initial selected date/time | +| `isVisible` | bool | false | Show the datetime picker? | +| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) | +| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS | +| `modalStyleIOS` | style | | Style of the modal content (iOS) | +| `mode` | string | "date" | Choose between "date", "time", and "datetime" | +| `onCancel` | func | **REQUIRED** | Function called on dismiss | +| `onChange` | func | () => null | Function called when the date changes (with the new date as parameter). | +| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object | +| `onHide` | func | () => null | Called after the hide animation | +| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) | +| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) | +| `pickerComponentStyleIOS` | style | | The style applied to the actual picker component - this can be either a native iOS picker or a custom one if `customPickerIOS` was provided | ## Frequently Asked Questions -This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question. +This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question. If you're experiencing issues, please check the FAQs below. For questions and support, please start [try starting a discussion](https://github.com/mmazzarolo/react-native-modal-datetime-picker/discussions) or try asking it on [StackOverflow](stackoverflow). -⚠️ __Please use [the GitHub issues](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues) only for well-described and reproducible bugs. Question/support issues will be closed.__ +⚠️ **Please use [the GitHub issues](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues) only for well-described and reproducible bugs. Question/support issues will be closed.** ### The component is not working as expected, what should I do? @@ -186,11 +187,10 @@ const [date, setDate] = useState('');

- ### How can I allow picking only specific dates? - -You can't — [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) doesn't allow you to do so. That said, you can allow only "range" of dates by setting a minimum and maximum date. See below for more info. - + +You can't — [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) doesn't allow you to do so. That said, you can allow only "range" of dates by setting a minimum and maximum date. See below for more info. + ### How can I set a minimum and/or maximum date? You can use the [`minimumDate`](https://github.com/react-native-datetimepicker/datetimepicker#minimumdate-optional) and [`maximumDate`](https://github.com/react-native-datetimepicker/datetimepicker#maximumdate-optional) props from [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker). @@ -231,12 +231,11 @@ NSString *currentLanguage = [[NSLocale preferredLanguages] firstObject]; Please make sure you're on the latest version of `react-native-modal-datetime-picker` and of the [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker). [We already closed several iOS 14 issues that were all caused by outdated/cached versions of the community datetimepicker](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues?q=%22ios+14%22). - -### Why is the picker not visible/transparent on iOS? - -Please make sure you're on the latest version of `react-native-modal-datetime-picker` and of [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker). -Also, double-check that the picker light/dark theme is aligned with the OS one (e.g., don't "force" a theme using `isDarkModeEnabled`). +### Why is the picker not visible/transparent on iOS? + +Please make sure you're on the latest version of `react-native-modal-datetime-picker` and of [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker). +Also, double-check that the picker light/dark theme is aligned with the OS one (e.g., don't "force" a theme using `isDarkModeEnabled`). ### Why can't I show an alert after the picker has been hidden (on iOS)? diff --git a/package.json b/package.json index 4157c41..67703ea 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "semantic-release": "^17.1.2" }, "peerDependencies": { - "@react-native-community/datetimepicker": ">=3.0.0", + "@react-native-community/datetimepicker": ">=6.7.0", "react-native": ">=0.65.0" }, "husky": { diff --git a/src/DateTimePickerModal.ios.js b/src/DateTimePickerModal.ios.js index 4152205..74c2aa3 100644 --- a/src/DateTimePickerModal.ios.js +++ b/src/DateTimePickerModal.ios.js @@ -41,6 +41,7 @@ export class DateTimePickerModal extends React.PureComponent { pickerContainerStyleIOS: PropTypes.any, pickerStyleIOS: PropTypes.any, backdropStyleIOS: PropTypes.any, + pickerComponentStyleIOS: PropTypes.any, onCancel: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired, onChange: PropTypes.func, @@ -59,6 +60,7 @@ export class DateTimePickerModal extends React.PureComponent { pickerContainerStyleIOS: {}, pickerStyleIOS: {}, backdropStyleIOS: {}, + pickerComponentStyleIOS: {}, }; state = { @@ -118,6 +120,7 @@ export class DateTimePickerModal extends React.PureComponent { modalPropsIOS, pickerContainerStyleIOS, pickerStyleIOS, + pickerComponentStyleIOS, onCancel, onConfirm, onChange, @@ -176,6 +179,22 @@ export class DateTimePickerModal extends React.PureComponent { {...otherProps} value={this.state.currentDate} onChange={this.handleChange} + // Recent versions @react-native-community/datetimepicker (at least starting with 6.7.0) + // have a peculiar iOS behaviour where sometimes, for example in react-native Modal, + // the inline picker is not rendered correctly if in datetime mode. Explicitly setting the height + // of the native picker to 370 fixes this issue. This is dependent on the other styles applied to the picker + // and may need to be adjusted if the other styles are changed. + style={[ + { + height: + !customPickerIOS && + otherProps.mode === "datetime" && + display === "inline" + ? 370 + : undefined, + }, + pickerComponentStyleIOS, + ]} />