Skip to content

Conversation

@QuenK30
Copy link

@QuenK30 QuenK30 commented Jan 18, 2026

This PR introduces the ability to customize the style of the currently selected item (hour, minute, second, or day) in the
TimerPicker. Previously, all items shared the same styling, making it difficult to visually distinguish the exact selected value beyond its central position.

Key Changes

Styling System: Added a new selectedPickerItem property to
CustomTimerPickerStyles in styles.ts

Logic Flow: Updated TimerPicker.tsx to track and pass the current selected state down to the individual scroll components.

Component Update: Modified DurationScroll.tsx and PickerItem.tsx to receive the selectedValue and apply the selectedPickerItem style conditionally when an item is selected.

How to use
Users can now pass a selectedPickerItem object within the styles prop to highlight the active selection:

<TimerPicker
    styles={{
        selectedPickerItem: {
            color: '#FFFFFF',
            fontWeight: 'bold',
            fontSize: 28,
        },
    }}
/>

Verification
Automated tests: All 275 tests passed successfully (npm test).
Manual verification: Confirmed that the style is correctly applied to the center item and updates during scrolling.

qemu-system-x86_64_YcAaNu4g8I

This is my first PR for an open-source project, so thank you for your patience; I’m happy to make any changes or improvements based on your feedback!

@QuenK30 QuenK30 marked this pull request as ready for review January 18, 2026 21:27
@troberts-28
Copy link
Owner

Hey @QuenK30, thank you for putting this PR together! Will review ASAP and get back to you 🙌

Copy link
Owner

@troberts-28 troberts-28 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @QuenK30 👋 This looks great - thank you! The only thing missing is a corresponding update to the README. Will get this merged as soon as you've added that

allowFontScaling={allowFontScaling}
style={[
styles.pickerItem,
isSelected ? styles.selectedPickerItem : {},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would marginally prefer isSelected && styles.selectedPickerItem here

@QuenK30
Copy link
Author

QuenK30 commented Feb 1, 2026

I hope I didn't go off topic with this little change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants