Skip to content

Commit 8733f83

Browse files
fobos531fobos531
authored
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
1 parent 83363d7 commit 8733f83

File tree

3 files changed

+54
-36
lines changed

3 files changed

+54
-36
lines changed

‎README.md

+34-35
Original file line numberDiff line numberDiff line change
@@ -91,37 +91,38 @@ export default Example;
9191

9292
👉 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!
9393

94-
| Name | Type | Default | Description |
95-
|---------------------------|-----------| ------------ |-----------------------------------------------------------------------------------------------------|
96-
| `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) |
97-
| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |
98-
| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |
99-
| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) |
100-
| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |
101-
| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) |
102-
| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |
103-
| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |
104-
| `customHeaderIOS` | component | | Overrides the default header component (iOS) |
105-
| `customPickerIOS` | component | | Overrides the default native picker component (iOS) |
106-
| `date` | obj | new Date() | Initial selected date/time |
107-
| `isVisible` | bool | false | Show the datetime picker? |
108-
| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
109-
| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |
110-
| `modalStyleIOS` | style | | Style of the modal content (iOS) |
111-
| `mode` | string | "date" | Choose between "date", "time", and "datetime" |
112-
| `onCancel` | func | **REQUIRED** | Function called on dismiss |
113-
| `onChange` | func | () => null | Function called when the date changes (with the new date as parameter). |
114-
| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
115-
| `onHide` | func | () => null | Called after the hide animation |
116-
| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |
117-
| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |
94+
| Name | Type | Default | Description |
95+
| ------------------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
96+
| `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) |
97+
| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |
98+
| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |
99+
| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) |
100+
| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |
101+
| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) |
102+
| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |
103+
| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |
104+
| `customHeaderIOS` | component | | Overrides the default header component (iOS) |
105+
| `customPickerIOS` | component | | Overrides the default native picker component (iOS) |
106+
| `date` | obj | new Date() | Initial selected date/time |
107+
| `isVisible` | bool | false | Show the datetime picker? |
108+
| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
109+
| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |
110+
| `modalStyleIOS` | style | | Style of the modal content (iOS) |
111+
| `mode` | string | "date" | Choose between "date", "time", and "datetime" |
112+
| `onCancel` | func | **REQUIRED** | Function called on dismiss |
113+
| `onChange` | func | () => null | Function called when the date changes (with the new date as parameter). |
114+
| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
115+
| `onHide` | func | () => null | Called after the hide animation |
116+
| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |
117+
| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |
118+
| `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 |
118119

119120
## Frequently Asked Questions
120121

121-
This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question.
122+
This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question.
122123
If you're experiencing issues, please check the FAQs below.
123124
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).
124-
⚠️ __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.__
125+
⚠️ **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.**
125126

126127
### The component is not working as expected, what should I do?
127128

@@ -186,11 +187,10 @@ const [date, setDate] = useState('');
186187
</p>
187188
</details>
188189

189-
190190
### How can I allow picking only specific dates?
191-
192-
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.
193-
191+
192+
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.
193+
194194
### How can I set a minimum and/or maximum date?
195195

196196
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];
231231
232232
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).
233233
[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).
234-
235-
### Why is the picker not visible/transparent on iOS?
236-
237-
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).
238-
Also, double-check that the picker light/dark theme is aligned with the OS one (e.g., don't "force" a theme using `isDarkModeEnabled`).
239234
235+
### Why is the picker not visible/transparent on iOS?
236+
237+
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).
238+
Also, double-check that the picker light/dark theme is aligned with the OS one (e.g., don't "force" a theme using `isDarkModeEnabled`).
240239
241240
### Why can't I show an alert after the picker has been hidden (on iOS)?
242241

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"semantic-release": "^17.1.2"
5151
},
5252
"peerDependencies": {
53-
"@react-native-community/datetimepicker": ">=3.0.0",
53+
"@react-native-community/datetimepicker": ">=6.7.0",
5454
"react-native": ">=0.65.0"
5555
},
5656
"husky": {

‎src/DateTimePickerModal.ios.js

+19
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export class DateTimePickerModal extends React.PureComponent {
4141
pickerContainerStyleIOS: PropTypes.any,
4242
pickerStyleIOS: PropTypes.any,
4343
backdropStyleIOS: PropTypes.any,
44+
pickerComponentStyleIOS: PropTypes.any,
4445
onCancel: PropTypes.func.isRequired,
4546
onConfirm: PropTypes.func.isRequired,
4647
onChange: PropTypes.func,
@@ -59,6 +60,7 @@ export class DateTimePickerModal extends React.PureComponent {
5960
pickerContainerStyleIOS: {},
6061
pickerStyleIOS: {},
6162
backdropStyleIOS: {},
63+
pickerComponentStyleIOS: {},
6264
};
6365

6466
state = {
@@ -118,6 +120,7 @@ export class DateTimePickerModal extends React.PureComponent {
118120
modalPropsIOS,
119121
pickerContainerStyleIOS,
120122
pickerStyleIOS,
123+
pickerComponentStyleIOS,
121124
onCancel,
122125
onConfirm,
123126
onChange,
@@ -176,6 +179,22 @@ export class DateTimePickerModal extends React.PureComponent {
176179
{...otherProps}
177180
value={this.state.currentDate}
178181
onChange={this.handleChange}
182+
// Recent versions @react-native-community/datetimepicker (at least starting with 6.7.0)
183+
// have a peculiar iOS behaviour where sometimes, for example in react-native Modal,
184+
// the inline picker is not rendered correctly if in datetime mode. Explicitly setting the height
185+
// of the native picker to 370 fixes this issue. This is dependent on the other styles applied to the picker
186+
// and may need to be adjusted if the other styles are changed.
187+
style={[
188+
{
189+
height:
190+
!customPickerIOS &&
191+
otherProps.mode === "datetime" &&
192+
display === "inline"
193+
? 370
194+
: undefined,
195+
},
196+
pickerComponentStyleIOS,
197+
]}
179198
/>
180199
</View>
181200
<ConfirmButtonComponent

0 commit comments

Comments
 (0)