Closed fredrikburmester closed 6 months ago
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",
},
}}
/>;
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
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.
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!
Is there a way (or could you implement a way) to decrease the padding in between the numbers? Both vertically and horizontally.
Thanks!