React-native: DatePickerIOS is not visible when parent element uses style with alignItems: 'center'

[dmendis]

[Edit by @hramos: link to Snack provided by @davidsawa: https://snack.expo.io/By9RqDx8b]

Undoing this commit makes the date picker work.

https://github.com/facebook/react-native/commit/002024cc456246761421f6e5c354466baa819843

Specifically, adding back a width value.

Is there a way to style the <DatePickerIOS> control that makes the RCTDatePicker appear correctly?

[dmendis]

I have found that putting any style attribute to DatePickerIOS will make it stop displaying. The fact that DatePickerIOS inheriting all properties of View would imply all style elements are applicable. I got my DatePickerIOS showing up by removing all styles applied to it. I had a flex-end and height added to it.

[grabbou]

I've just added flex: 1 and it's displaying properly, mind providing an rn-play example showing an issue?

[Jaikant]

I am new to react native and I have spent many many hours endlessly trying to debug this. Thanks so much, for your work to find the cause of it.

[alongubkin]

This happened to me when the DatePickerIOS was under a View had flexbox props such as justifyContent: 'center'

[purnomoeko]

@Jaikant Remove all flex box attributes on parent node such as AlignItems or JustifyContent.

[techpanga]

RN 0.32, DatePickerIOS not displayed. Is there any solution?

[jjshammas]

I know this issue is old but I ran into this today on RN 0.37.

I needed to apply flex: 1 to my DatePickerIOS. I believe the issue is that the element by default has a 0 width/height, so it needs to either inherit these attributes from its parent (via flex: 1), or an explicit height and width must be set.

An explicit height used to be all that was necessary—now it seems the width also defaults to 0.

[coderdave]

I had to change the DatePickerIOS style from alignSelf: 'center' to justifyContent: 'center' for it to show up. :shrug:

[ShogunPanda]

I had similar issue.
In my case apparently the height was fine but width was not. I resolved by setting:

style={{width: Dimensions.get("window").width}}

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[dawidsawa]

The issue is still present with react-native 0.45.1 and is demonstrable with the following code https://snack.expo.io/By9RqDx8b Just like it was already mentioned by some people, the elements of the picker become invisible when the parent element uses style with alignItems: 'center'.

[SSTPIERRE2]

Following up here, using RN 0.50.3, like many have stated, if you want to center your DatePickerIOS component along the primary axis (default vertical), it appears you must use flex: 1, justifyContent: 'center' for the parent's style, but you cannot use alignItems: 'center' or else the date picker will not render.

Luckily, the date picker is already centered on the secondary axis :)