Customization

Custom Styles

Customize the appearance of the TimePicker using the customStyles prop. Below are the keys you can use:

Key	Type	Description
container	ViewStyle	Style for the overall container of the TimePicker.
clock	ViewStyle	Style for the clock’s outer circle.
activeNumber	TextStyle	Style for the currently selected number.
clockText	TextStyle	Style for the clock numbers.
indicatorLine	ViewStyle	Style for the indicator line.
centerComponent	ViewStyle	Style for the clock center component.

Replace parts of the TimePicker with your own React Native components using the customComponents prop. Below are the available keys:

Key	Type	Description
CenterComponent	React.ReactNode	Custom center element of the clock.
LineComponent	React.ReactNode	Custom line connecting the center to numbers.
EndComponent	React.ReactNode	Custom end component for the clock hand.
NumberComponent	`(props: { value, isActive }) => React.ReactNode`	Custom number component for clock labels.
TopComponent	`(props) => React.ReactNode`	Custom top section. (Display of hours ,minutes and period)

Use the colors prop to customize the color palette of the TimePicker. If not provided, default colors will be used.

Key	Type	Description
clockActiveColor	string	Color of the active clock region.
clockActiveTextColor	string	Text color for active clock numbers.
topActiveColor	string	Custom end component for the clock hand.
topInActiveColor	string	Custom number component for clock labels.
topActiveTextColor	string	Custom top section. (Display of hours ,minutes and period)
topInActiveTextColor	string	Text color for the inactive top section.