From 01079e2724600bc349ea36aebe0a6299246b3b4f Mon Sep 17 00:00:00 2001 From: QuenK30 Date: Sun, 18 Jan 2026 22:10:24 +0100 Subject: [PATCH 1/2] add selectedPickerItem style property for highlighting selected time unit --- src/components/DurationScroll/DurationScroll.tsx | 5 ++++- src/components/DurationScroll/types.ts | 3 ++- src/components/PickerItem/PickerItem.tsx | 8 +++++++- src/components/TimerPicker/TimerPicker.tsx | 7 ++++++- src/components/TimerPicker/styles.ts | 13 ++++++++++++- 5 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/DurationScroll/DurationScroll.tsx b/src/components/DurationScroll/DurationScroll.tsx index a07b45c..606a2c2 100644 --- a/src/components/DurationScroll/DurationScroll.tsx +++ b/src/components/DurationScroll/DurationScroll.tsx @@ -62,6 +62,7 @@ const DurationScroll = forwardRef( pmLabel, repeatNumbersNTimes = 3, repeatNumbersNTimesNotExplicitlySet, + selectedValue, styles, testID, } = props; @@ -225,6 +226,7 @@ const DurationScroll = forwardRef( is12HourPicker={is12HourPicker} item={item} pmLabel={pmLabel} + selectedValue={selectedValue} styles={styles} /> ), @@ -235,6 +237,7 @@ const DurationScroll = forwardRef( amLabel, is12HourPicker, pmLabel, + selectedValue, styles, ] ); @@ -644,4 +647,4 @@ const DurationScroll = forwardRef( } ); -export default React.memo(DurationScroll); +export default React.memo(DurationScroll); \ No newline at end of file diff --git a/src/components/DurationScroll/types.ts b/src/components/DurationScroll/types.ts index 9b51cc9..e734d5a 100644 --- a/src/components/DurationScroll/types.ts +++ b/src/components/DurationScroll/types.ts @@ -32,6 +32,7 @@ export interface DurationScrollProps { pmLabel?: string; repeatNumbersNTimes?: number; repeatNumbersNTimesNotExplicitlySet: boolean; + selectedValue?: number; styles: ReturnType; testID?: string; } @@ -70,4 +71,4 @@ export type SoundAsset = export type ExpoAvAudioInstance = { replayAsync: () => Promise; unloadAsync: () => Promise; -}; +}; \ No newline at end of file diff --git a/src/components/PickerItem/PickerItem.tsx b/src/components/PickerItem/PickerItem.tsx index ccef3a8..43ac79c 100644 --- a/src/components/PickerItem/PickerItem.tsx +++ b/src/components/PickerItem/PickerItem.tsx @@ -1,3 +1,4 @@ + import React from "react"; import { View, Text } from "react-native"; @@ -12,6 +13,7 @@ interface PickerItemProps { is12HourPicker?: boolean; item: string; pmLabel?: string; + selectedValue?: number; styles: ReturnType; } @@ -24,6 +26,7 @@ const PickerItem = React.memo( is12HourPicker, item, pmLabel, + selectedValue, styles, }) => { let stringItem = item; @@ -38,6 +41,8 @@ const PickerItem = React.memo( intItem = parseInt(stringItem); } + const isSelected = intItem === selectedValue; + return ( ( allowFontScaling={allowFontScaling} style={[ styles.pickerItem, + isSelected ? styles.selectedPickerItem : {}, intItem > adjustedLimitedMax || intItem < adjustedLimitedMin ? styles.disabledPickerItem @@ -68,4 +74,4 @@ const PickerItem = React.memo( } ); -export default PickerItem; +export default PickerItem; \ No newline at end of file diff --git a/src/components/TimerPicker/TimerPicker.tsx b/src/components/TimerPicker/TimerPicker.tsx index 652a3f1..615c174 100644 --- a/src/components/TimerPicker/TimerPicker.tsx +++ b/src/components/TimerPicker/TimerPicker.tsx @@ -1,3 +1,4 @@ + import React, { forwardRef, useEffect, @@ -221,6 +222,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatDayNumbersNTimes === undefined } + selectedValue={selectedDays} styles={styles} testID="duration-scroll-day" {...otherProps} @@ -253,6 +255,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatHourNumbersNTimes === undefined } + selectedValue={selectedHours} styles={styles} testID="duration-scroll-hour" {...otherProps} @@ -280,6 +283,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatMinuteNumbersNTimes === undefined } + selectedValue={selectedMinutes} styles={styles} testID="duration-scroll-minute" {...otherProps} @@ -307,6 +311,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatSecondNumbersNTimes === undefined } + selectedValue={selectedSeconds} styles={styles} testID="duration-scroll-second" {...otherProps} @@ -317,4 +322,4 @@ const TimerPicker = forwardRef( } ); -export default React.memo(TimerPicker); +export default React.memo(TimerPicker); \ No newline at end of file diff --git a/src/components/TimerPicker/styles.ts b/src/components/TimerPicker/styles.ts index 24c9748..e9c2a6d 100644 --- a/src/components/TimerPicker/styles.ts +++ b/src/components/TimerPicker/styles.ts @@ -1,3 +1,4 @@ + import { StyleSheet } from "react-native"; import type { TextStyle, ViewStyle } from "react-native"; @@ -17,6 +18,7 @@ export interface CustomTimerPickerStyles { pickerItemContainer?: ViewStyle & { height?: number }; pickerLabel?: TextStyle; pickerLabelContainer?: ViewStyle; + selectedPickerItem?: TextStyle; text?: TextStyle; theme?: "light" | "dark"; } @@ -107,6 +109,15 @@ export const generateStyles = ( ...customStyles?.text, ...customStyles?.pickerItem, }, + selectedPickerItem: { + textAlignVertical: "center", + fontSize: 25, + overflow: "visible", + color: textColor, + ...customStyles?.text, + ...customStyles?.pickerItem, + ...customStyles?.selectedPickerItem, + }, pickerAmPmContainer: { position: "absolute", top: 0, @@ -157,4 +168,4 @@ export const generateStyles = ( ...customStyles?.durationScrollFlatListContentContainer, }, }); -}; +}; \ No newline at end of file From 349997e961d3b84e5f57dd363d86f0fc96c9830d Mon Sep 17 00:00:00 2001 From: QuenK30 Date: Sun, 1 Feb 2026 20:57:36 +0100 Subject: [PATCH 2/2] Update of the readme and small change at the request of the maintainer's comment --- README.md | 1 + src/components/PickerItem/PickerItem.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7ce2e87..67fc2ed 100644 --- a/README.md +++ b/README.md @@ -608,6 +608,7 @@ For deeper style customization, you can supply the following custom styles to ad | durationScrollFlatList | Style for the Flatlist in each picker | ViewStyle | | durationScrollFlatListContainer | Style for the View that contains the Flatlist in each picker | ViewStyle | | durationScrollFlatListContentContainer | Style for the Flatlist's `contentContainerStyle` prop in each picker | ViewStyle | +| selectedPickerItem | Style for the currently selected individual picker number | TextStyle | **Note:** There are minor limitations on `pickerContainer.backgroundColor` and `pickerItemContainer.height`. These properties must be simple values (string and number respectively) as they are used in internal calculations for scroll positioning, gradient overlays, and snap behavior. Complex computed values or union types are not supported for these specific properties. diff --git a/src/components/PickerItem/PickerItem.tsx b/src/components/PickerItem/PickerItem.tsx index 43ac79c..75478e9 100644 --- a/src/components/PickerItem/PickerItem.tsx +++ b/src/components/PickerItem/PickerItem.tsx @@ -52,7 +52,7 @@ const PickerItem = React.memo( allowFontScaling={allowFontScaling} style={[ styles.pickerItem, - isSelected ? styles.selectedPickerItem : {}, + isSelected && styles.selectedPickerItem, intItem > adjustedLimitedMax || intItem < adjustedLimitedMin ? styles.disabledPickerItem