iOS compact style needs a width, is stuck left aligned

[chrisdrackett]

I'm trying to use the new compact date picker style in iOS but I'n having a hard time styling it.

When I first put it in I got the following:

<DateTimePicker
    display="compact"
    mode="date"
    value={DateTime.local().toJSDate()}
/>

The date picker is the gray square on the right. I tried to set flex: 1 but that didn't get things to display. Next I just set a width:

<DateTimePicker
    style={{width: 140}}
    display="compact"
    mode="date"
    value={DateTime.local().toJSDate()}
/>

Now I can see the date picker, but it's too far to the left. I'd like to right align it. At this point I got stuck. Nothing I seemed to do right aligns the picker and because I don't know the width (which is variable based on the contents).

Anyone run into this yet? any ideas?

[chrisdrackett]

as far as I can tell this is also an issue with the native component. I've seen it mentioned on swift forums as well so I'm guessing we'll just have to wait for apple to update the component.

[jaketoolson]

I've just run into this and was going crazy! Wrapping it in a View with a defined width solved this for me. I'm thinking this is due to a parent view somewhere having some flex settings causing this to be a problem.

[frankiejarrett]

While we wait for a more permanent fix, my dirty workaround ended up looking something like this:

<View style={{ alignItems: 'center', width: '100%' }}>
  <DateTimePicker
    display="compact"
    mode="datetime"
    style={{ width: 230 }}
    value={new Date()}
  />
</View>

[ASchwad]

A year has passed, any updates on this issue?

[lclnrd]

I'm really praying for a fix! Defining width is not reliable when switching locales :(

[otaviogaiao]

Just got this bug, is the problem really on the native side or in the lib?

[Adrian93Box]

Any updates?

[vonovak]

Hello and thanks for reporting, as of v6.3.4 the width should now be computed by the native side and you should not need to specify it manually. If you're still running into problems, please open a new issue. Thank you 🙂