Feature request: Change gap in between numbers

[fredrikburmester]

Is there a way (or could you implement a way) to decrease the padding in between the numbers? Both vertically and horizontally.

Thanks!

[troberts-28]

Hey @fredrikburmester!

This is possible by adjusting the width of the pickerItemContainer in the styles property. For example:

styles={{ pickerItemContainer: { width: 100 }, }}

You will also likely need to adjust the styles of pickerLabelContainer to re-align the labels. They're absolutely positioned so you'll need to adjust top/bottom/left/right. There is a minor limitation with the current release that stops those labels overflowing their container; I'll release a patch today that addresses that.

Here's a full example of a TimerPicker with a narrower width and the labels centred and adjusted.

<TimerPicker
    padWithNItems={2}
    hourLabel=":"
    minuteLabel=":"
    secondLabel=""
    LinearGradient={LinearGradient}
    styles={{
        theme: "light",
        pickerItem: {
            fontSize: 34,
        },
        pickerLabel: {
            fontSize: 32,
            marginTop: 0,
        },
        pickerContainer: {
            marginRight: 6,
        },
        pickerItemContainer: {
            width: 100,
        },
        pickerLabelContainer: {
            right: -20,
            top: 0,
            bottom: 6,
            width: 40,
            alignItems: "center",
        },
    }}
/>;

[fredrikburmester]

Thank you! This worked like a charm. Another question, is there a way to disable changing the time? Like a disabled prop? I couldn't seem to find one. @troberts-28

[troberts-28]

No there isn't, but there should be! I'll put out another release this weekend that adds those props and the ability to add styling for the picker when in the disabled state.

[troberts-28]

Hey @fredrikburmester, I've added that feature. There's three props (one for each picker):

• hoursPickerIsDisabled
• minutesPickerIsDisabled
• secondsPickerIsDisabled

You can adjust the styling of a disabled picker with the style prop disabledPickerContainer. The default is {opacity: 0.4}.

Let me know if that fits the bill!