provide a width for the inline style picker

[chrisdrackett]

Feature request

Right now if you are using the inline picker style on iOS you need to provide a width to the parent to make sure the picker renders. At the easy end (time picker) this is bit of work as you need to take into account dynamic text size. At the hard end (date picker) this is hard as the width will change depending on the available space for the component.

It would be nice if this component did its best to provide a width when possible. In our app we're currently working along the following lines:

1. if the input is a time only input use the following to figure out the width:

const { fontScale } = useWindowDimensions()

  /**
   * Change the width of the picker based on fontScale
   * Highest width it should be is the font scale 1.353 (picked to scale by 75)
   * Lowest width it should be is the font scale 0.823 (picked to scale by 100)
   */
  const topWidth = 101 // highest font scale - 1.353 * 75  = 101
  const bottomWidth = 82 // lowest font scale - 0.823 * 100  = 82
  const distance = topWidth - bottomWidth
  const width = topWidth + (fontScale / 100) * distance

(note that the 82 and 101 are probably not exact yet and need tuned.

2. for the date input things are a bit harder. Especially as this component will adjust how it displays based on the available space. We're still debating how to best handle this one.

[rikur]

The library either providing width or removing the width requirement altogether would be a big help.

Here's my quick solution, works well with 12/24 hour time pickers.

  const { fontScale } = useWindowDimensions()
  const baseWidth = is24Hour ? 115 : 200
  const width = baseWidth * parseFloat(fontScale) * 0.8 + 10

[p-schlickmann]

I think this issue should be addressed. It really sucks to input arbitrary widths.

[vonovak]

:tada: This issue has been resolved in version 6.3.3 :tada:

If this package helps you, consider sponsoring us! :rocket: