react-native-timer-picker 1.2.11 → 1.4.0

package/dist/module/utils/generateNumbers.js.map

@@ -1 +1 @@
-{"version":3,"names":["padWithZero","generateNumbers","numberOfItems","options","numbers","i","push","String","repeatNTimes","Array","fill","flat","disableInfiniteScroll","padWithNItems","unshift"],"sources":["generateNumbers.ts"],"sourcesContent":["import { padWithZero } from \"./padWithZero\";\n\nexport const generateNumbers = (\n    numberOfItems: number,\n    options: {\n        repeatNTimes?: number;\n        padWithZero?: boolean;\n        disableInfiniteScroll?: boolean;\n        padWithNItems: number;\n    }\n) => {\n    if (numberOfItems <= 0) {\n        return [];\n    }\n\n    let numbers: string[] = [];\n    if (options.padWithZero) {\n        for (let i = 0; i <= numberOfItems; i++) {\n            numbers.push(padWithZero(i));\n        }\n    } else {\n        for (let i = 0; i <= numberOfItems; i++) {\n            numbers.push(String(i));\n        }\n    }\n    if ((options.repeatNTimes ?? 1) > 1) {\n        numbers = Array(options.repeatNTimes).fill(numbers).flat();\n    }\n    if (options.disableInfiniteScroll) {\n        numbers.push(...Array(options.padWithNItems).fill(\"\"));\n        numbers.unshift(...Array(options.padWithNItems).fill(\"\"));\n    }\n    return numbers;\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,eAAe;AAE3C,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,aAAqB,EACrBC,OAKC,KACA;EACD,IAAID,aAAa,IAAI,CAAC,EAAE;IACpB,OAAO,EAAE;EACb;EAEA,IAAIE,OAAiB,GAAG,EAAE;EAC1B,IAAID,OAAO,CAACH,WAAW,EAAE;IACrB,KAAK,IAAIK,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIH,aAAa,EAAEG,CAAC,EAAE,EAAE;MACrCD,OAAO,CAACE,IAAI,CAACN,WAAW,CAACK,CAAC,CAAC,CAAC;IAChC;EACJ,CAAC,MAAM;IACH,KAAK,IAAIA,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIH,aAAa,EAAEG,CAAC,EAAE,EAAE;MACrCD,OAAO,CAACE,IAAI,CAACC,MAAM,CAACF,CAAC,CAAC,CAAC;IAC3B;EACJ;EACA,IAAI,CAACF,OAAO,CAACK,YAAY,IAAI,CAAC,IAAI,CAAC,EAAE;IACjCJ,OAAO,GAAGK,KAAK,CAACN,OAAO,CAACK,YAAY,CAAC,CAACE,IAAI,CAACN,OAAO,CAAC,CAACO,IAAI,CAAC,CAAC;EAC9D;EACA,IAAIR,OAAO,CAACS,qBAAqB,EAAE;IAC/BR,OAAO,CAACE,IAAI,CAAC,GAAGG,KAAK,CAACN,OAAO,CAACU,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACtDN,OAAO,CAACU,OAAO,CAAC,GAAGL,KAAK,CAACN,OAAO,CAACU,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;EAC7D;EACA,OAAON,OAAO;AAClB,CAAC"}
+{"version":3,"names":["padNumber","generateNumbers","numberOfItems","options","numbers","i","push","padWithZero","padNumbersWithZero","repeatNTimes","Array","fill","flat","disableInfiniteScroll","padWithNItems","unshift","generate12HourNumbers","hour"],"sources":["generateNumbers.ts"],"sourcesContent":["import { padNumber } from \"./padNumber\";\n\nexport const generateNumbers = (\n    numberOfItems: number,\n    options: {\n        repeatNTimes?: number;\n        padNumbersWithZero?: boolean;\n        disableInfiniteScroll?: boolean;\n        padWithNItems: number;\n    }\n) => {\n    if (numberOfItems <= 0) {\n        return [];\n    }\n\n    let numbers: string[] = [];\n    for (let i = 0; i <= numberOfItems; i++) {\n        numbers.push(padNumber(i, { padWithZero: options.padNumbersWithZero }));\n    }\n\n    if ((options.repeatNTimes ?? 1) > 1) {\n        numbers = Array(options.repeatNTimes).fill(numbers).flat();\n    }\n    if (options.disableInfiniteScroll) {\n        numbers.push(...Array(options.padWithNItems).fill(\"\"));\n        numbers.unshift(...Array(options.padWithNItems).fill(\"\"));\n    }\n    return numbers;\n};\n\nexport const generate12HourNumbers = (options: {\n    repeatNTimes?: number;\n    padNumbersWithZero?: boolean;\n    disableInfiniteScroll?: boolean;\n    padWithNItems: number;\n}) => {\n    let numbers: string[] = [];\n\n    // Generate numbers from 0 to 11 for AM\n    for (let i = 0; i <= 11; i++) {\n        numbers.push(\n            `${padNumber(i, { padWithZero: options.padNumbersWithZero })} AM`\n        );\n    }\n\n    // Generate numbers from 12 to 11 for PM\n    for (let i = 12; i <= 23; i++) {\n        const hour = i > 12 ? i - 12 : i;\n        numbers.push(\n            `${padNumber(hour, { padWithZero: options.padNumbersWithZero })} PM`\n        );\n    }\n\n    if ((options.repeatNTimes ?? 1) > 1) {\n        numbers = Array(options.repeatNTimes).fill(numbers).flat();\n    }\n\n    if (options.disableInfiniteScroll) {\n        numbers.push(...Array(options.padWithNItems).fill(\"\"));\n        numbers.unshift(...Array(options.padWithNItems).fill(\"\"));\n    }\n\n    return numbers;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,aAAa;AAEvC,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,aAAqB,EACrBC,OAKC,KACA;EACD,IAAID,aAAa,IAAI,CAAC,EAAE;IACpB,OAAO,EAAE;EACb;EAEA,IAAIE,OAAiB,GAAG,EAAE;EAC1B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIH,aAAa,EAAEG,CAAC,EAAE,EAAE;IACrCD,OAAO,CAACE,IAAI,CAACN,SAAS,CAACK,CAAC,EAAE;MAAEE,WAAW,EAAEJ,OAAO,CAACK;IAAmB,CAAC,CAAC,CAAC;EAC3E;EAEA,IAAI,CAACL,OAAO,CAACM,YAAY,IAAI,CAAC,IAAI,CAAC,EAAE;IACjCL,OAAO,GAAGM,KAAK,CAACP,OAAO,CAACM,YAAY,CAAC,CAACE,IAAI,CAACP,OAAO,CAAC,CAACQ,IAAI,CAAC,CAAC;EAC9D;EACA,IAAIT,OAAO,CAACU,qBAAqB,EAAE;IAC/BT,OAAO,CAACE,IAAI,CAAC,GAAGI,KAAK,CAACP,OAAO,CAACW,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACtDP,OAAO,CAACW,OAAO,CAAC,GAAGL,KAAK,CAACP,OAAO,CAACW,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;EAC7D;EACA,OAAOP,OAAO;AAClB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAIb,OAKrC,IAAK;EACF,IAAIC,OAAiB,GAAG,EAAE;;EAE1B;EACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAI,EAAE,EAAEA,CAAC,EAAE,EAAE;IAC1BD,OAAO,CAACE,IAAI,CACP,GAAEN,SAAS,CAACK,CAAC,EAAE;MAAEE,WAAW,EAAEJ,OAAO,CAACK;IAAmB,CAAC,CAAE,KACjE,CAAC;EACL;;EAEA;EACA,KAAK,IAAIH,CAAC,GAAG,EAAE,EAAEA,CAAC,IAAI,EAAE,EAAEA,CAAC,EAAE,EAAE;IAC3B,MAAMY,IAAI,GAAGZ,CAAC,GAAG,EAAE,GAAGA,CAAC,GAAG,EAAE,GAAGA,CAAC;IAChCD,OAAO,CAACE,IAAI,CACP,GAAEN,SAAS,CAACiB,IAAI,EAAE;MAAEV,WAAW,EAAEJ,OAAO,CAACK;IAAmB,CAAC,CAAE,KACpE,CAAC;EACL;EAEA,IAAI,CAACL,OAAO,CAACM,YAAY,IAAI,CAAC,IAAI,CAAC,EAAE;IACjCL,OAAO,GAAGM,KAAK,CAACP,OAAO,CAACM,YAAY,CAAC,CAACE,IAAI,CAACP,OAAO,CAAC,CAACQ,IAAI,CAAC,CAAC;EAC9D;EAEA,IAAIT,OAAO,CAACU,qBAAqB,EAAE;IAC/BT,OAAO,CAACE,IAAI,CAAC,GAAGI,KAAK,CAACP,OAAO,CAACW,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACtDP,OAAO,CAACW,OAAO,CAAC,GAAGL,KAAK,CAACP,OAAO,CAACW,aAAa,CAAC,CAACH,IAAI,CAAC,EAAE,CAAC,CAAC;EAC7D;EAEA,OAAOP,OAAO;AAClB,CAAC"}

package/dist/module/utils/padNumber.js

@@ -0,0 +1,8 @@
+export const padNumber = (value, options) => {
+  if (value < 10) {
+    return (options !== null && options !== void 0 && options.padWithZero ? "0" : " ") + value;
+  } else {
+    return String(value);
+  }
+};
+//# sourceMappingURL=padNumber.js.map

package/dist/module/utils/padNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["padNumber","value","options","padWithZero","String"],"sources":["padNumber.ts"],"sourcesContent":["export const padNumber = (\n    value: number,\n    options?: { padWithZero?: boolean }\n): string => {\n    if (value < 10) {\n        return (options?.padWithZero ? \"0\" : \" \") + value;\n    } else {\n        return String(value);\n    }\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAGA,CACrBC,KAAa,EACbC,OAAmC,KAC1B;EACT,IAAID,KAAK,GAAG,EAAE,EAAE;IACZ,OAAO,CAACC,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEC,WAAW,GAAG,GAAG,GAAG,GAAG,IAAIF,KAAK;EACrD,CAAC,MAAM;IACH,OAAOG,MAAM,CAACH,KAAK,CAAC;EACxB;AACJ,CAAC"}

package/dist/typescript/components/TimerPicker/DurationScroll.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { View } from "react-native";
 import { generateStyles } from "./TimerPicker.styles";
 export interface DurationScrollRef {
@@ -8,6 +8,7 @@ export interface DurationScrollRef {
     setValue: (value: number, options?: {
         animated?: boolean;
     }) => void;
+    latestDuration: MutableRefObject<number>;
 }
 type LinearGradientPoint = {
     x: number;
@@ -31,6 +32,10 @@ interface DurationScrollProps {
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
     limit?: LimitType;
+    aggressivelyGetLatestDuration: boolean;
+    is12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     padWithNItems: number;
     pickerGradientOverlayProps?: Partial<LinearGradientProps>;
     topPickerGradientOverlayProps?: Partial<LinearGradientProps>;

package/dist/typescript/components/TimerPicker/TimerPicker.styles.d.ts

@@ -5,6 +5,8 @@ export interface CustomTimerPickerStyles {
     pickerContainer?: any;
     pickerLabelContainer?: any;
     pickerLabel?: any;
+    pickerAmPmContainer?: any;
+    pickerAmPmLabel?: any;
     pickerItemContainer?: any;
     pickerItem?: any;
     disabledPickerItem?: any;
@@ -18,6 +20,8 @@ export declare const generateStyles: (customStyles: CustomTimerPickerStyles | un
     pickerLabel: any;
     pickerItemContainer: any;
     pickerItem: any;
+    pickerAmPmContainer: any;
+    pickerAmPmLabel: any;
     disabledPickerItem: any;
     pickerGradientOverlay: any;
 };

package/dist/typescript/components/TimerPicker/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { View } from "react-native";
 import { LimitType } from "./DurationScroll";
 import { CustomTimerPickerStyles } from "./TimerPicker.styles";
@@ -14,6 +14,11 @@ export interface TimerPickerRef {
     }, options?: {
         animated?: boolean;
     }) => void;
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
 }
 export interface TimerPickerProps {
     onDurationChange?: (duration: {
@@ -24,6 +29,10 @@ export interface TimerPickerProps {
     initialHours?: number;
     initialMinutes?: number;
     initialSeconds?: number;
+    aggressivelyGetLatestDuration?: boolean;
+    use12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;

package/dist/typescript/components/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { TimerPickerProps } from "./TimerPicker";
 import Modal from "./Modal";
@@ -14,6 +14,11 @@ export interface TimerPickerModalRef {
     }, options?: {
         animated?: boolean;
     }) => void;
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
 }
 export interface TimerPickerModalProps extends TimerPickerProps {
     visible: boolean;

package/dist/typescript/utils/generateNumbers.d.ts

@@ -1,7 +1,12 @@
-import { padWithZero } from "./padWithZero";
 export declare const generateNumbers: (numberOfItems: number, options: {
     repeatNTimes?: number;
-    padWithZero?: boolean;
+    padNumbersWithZero?: boolean;
+    disableInfiniteScroll?: boolean;
+    padWithNItems: number;
+}) => string[];
+export declare const generate12HourNumbers: (options: {
+    repeatNTimes?: number;
+    padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
     padWithNItems: number;
 }) => string[];

package/dist/typescript/utils/padNumber.d.ts

@@ -0,0 +1,3 @@
+export declare const padNumber: (value: number, options?: {
+    padWithZero?: boolean;
+}) => string;

package/package.json

@@ -6,14 +6,14 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.2.11",
+    "version": "1.4.0",
     "main": "dist/commonjs/index.js",
     "types": "dist/typescript/src/index.d.ts",
     "scripts": {
         "test": "jest --forceExit --silent",
         "build": "bob build",
         "clean": "rm yarn.lock && rm -rf ./node_modules && yarn install",
-        "start": "cp -Rf src example && cd example && yarn add expo && npx expo install && npx expo start",
+        "start": "cp -Rf src example && cd example && npx expo install && npx expo start",
         "lint": "eslint --ext .ts,.tsx .",
         "lint:fix": "eslint --ext .ts,.tsx . --fix",
         "prepare": "yarn build"

package/src/components/Modal/index.tsx

@@ -33,7 +33,7 @@ export const Modal = ({
     modalProps,
     contentStyle,
     overlayStyle,
-    testID,
+    testID = "modal",
 }: ModalProps): React.ReactElement => {
     const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
@@ -109,7 +109,7 @@ export const Modal = ({
             animationType="fade"
             visible={isVisible}
             {...modalProps}
-            testID={testID ?? "modal"}>
+            testID={testID}>
             <TouchableWithoutFeedback
                 onPress={onOverlayPress}
                 testID="modal-backdrop">

package/src/components/TimerPicker/DurationScroll.tsx

@@ -3,6 +3,7 @@ import React, {
     useCallback,
     forwardRef,
     useImperativeHandle,
+    MutableRefObject,
 } from "react";
 import {
     View,
@@ -14,7 +15,10 @@ import {
     NativeScrollEvent,
 } from "react-native";
 
-import { generateNumbers } from "../../utils/generateNumbers";
+import {
+    generate12HourNumbers,
+    generateNumbers,
+} from "../../utils/generateNumbers";
 import { colorToRgba } from "../../utils/colorToRgba";
 import { generateStyles } from "./TimerPicker.styles";
 import { getAdjustedLimit } from "../../utils/getAdjustedLimit";
@@ -23,6 +27,7 @@ import { getScrollIndex } from "../../utils/getScrollIndex";
 export interface DurationScrollRef {
     reset: (options?: { animated?: boolean }) => void;
     setValue: (value: number, options?: { animated?: boolean }) => void;
+    latestDuration: MutableRefObject<number>;
 }
 
 type LinearGradientPoint = {
@@ -50,6 +55,10 @@ interface DurationScrollProps {
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
     limit?: LimitType;
+    aggressivelyGetLatestDuration: boolean;
+    is12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     padWithNItems: number;
     pickerGradientOverlayProps?: Partial<LinearGradientProps>;
     topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
@@ -73,6 +82,10 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             padNumbersWithZero = false,
             disableInfiniteScroll = false,
             limit,
+            aggressivelyGetLatestDuration,
+            is12HourPicker,
+            amLabel,
+            pmLabel,
             padWithNItems,
             pickerGradientOverlayProps,
             topPickerGradientOverlayProps,
@@ -83,14 +96,19 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
         },
         ref
     ): React.ReactElement => {
-        const flatListRef = useRef<FlatList | null>(null);
-
-        const data = generateNumbers(numberOfItems, {
-            padWithZero: padNumbersWithZero,
-            repeatNTimes: 3,
-            disableInfiniteScroll,
-            padWithNItems: padWithNItems,
-        });
+        const data = !is12HourPicker
+            ? generateNumbers(numberOfItems, {
+                  padNumbersWithZero,
+                  repeatNTimes: 3,
+                  disableInfiniteScroll,
+                  padWithNItems,
+              })
+            : generate12HourNumbers({
+                  padNumbersWithZero,
+                  repeatNTimes: 3,
+                  disableInfiniteScroll,
+                  padWithNItems,
+              });
 
         const numberOfItemsToShow = 1 + padWithNItems * 2;
 
@@ -103,6 +121,10 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             disableInfiniteScroll,
         });
 
+        const latestDuration = useRef(0);
+
+        const flatListRef = useRef<FlatList | null>(null);
+
         useImperativeHandle(ref, () => ({
             reset: (options) => {
                 flatListRef.current?.scrollToIndex({
@@ -121,11 +143,22 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     }),
                 });
             },
+            latestDuration: latestDuration,
         }));
 
         const renderItem = useCallback(
             ({ item }: { item: string }) => {
-                const intItem = parseInt(item);
+                let stringItem = item;
+                let intItem: number;
+                let isAm: boolean | undefined;
+
+                if (!is12HourPicker) {
+                    intItem = parseInt(item);
+                } else {
+                    isAm = item.includes("AM");
+                    stringItem = item.replace(/\s[AP]M/g, "");
+                    intItem = parseInt(stringItem);
+                }
 
                 return (
                     <View
@@ -140,20 +173,67 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                                     ? styles.disabledPickerItem
                                     : {},
                             ]}>
-                            {item}
+                            {stringItem}
                         </Text>
+                        {is12HourPicker ? (
+                            <View
+                                style={styles.pickerAmPmContainer}
+                                pointerEvents="none">
+                                <Text style={[styles.pickerAmPmLabel]}>
+                                    {isAm ? amLabel : pmLabel}
+                                </Text>
+                            </View>
+                        ) : null}
                     </View>
                 );
             },
             [
                 adjustedLimited.max,
                 adjustedLimited.min,
+                amLabel,
+                is12HourPicker,
+                pmLabel,
                 styles.disabledPickerItem,
+                styles.pickerAmPmContainer,
+                styles.pickerAmPmLabel,
                 styles.pickerItem,
                 styles.pickerItemContainer,
             ]
         );
 
+        const onScroll = useCallback(
+            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                // this function is only used when the picker is in a modal
+                // it is used to ensure that the modal gets the latest duration on clicking
+                // the confirm button, even if the scrollview is still scrolling
+                const newIndex = Math.round(
+                    e.nativeEvent.contentOffset.y /
+                        styles.pickerItemContainer.height
+                );
+                let newDuration =
+                    (disableInfiniteScroll
+                        ? newIndex
+                        : newIndex + padWithNItems) %
+                    (numberOfItems + 1);
+
+                // check limits
+                if (newDuration > adjustedLimited.max) {
+                    newDuration = adjustedLimited.max;
+                } else if (newDuration < adjustedLimited.min) {
+                    newDuration = adjustedLimited.min;
+                }
+                latestDuration.current = newDuration;
+            },
+            [
+                adjustedLimited.max,
+                adjustedLimited.min,
+                disableInfiniteScroll,
+                numberOfItems,
+                padWithNItems,
+                styles.pickerItemContainer.height,
+            ]
+        );
+
         const onMomentumScrollEnd = useCallback(
             (e: NativeSyntheticEvent<NativeScrollEvent>) => {
                 const newIndex = Math.round(
@@ -264,7 +344,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     renderItem={renderItem}
                     keyExtractor={KEY_EXTRACTOR}
                     showsVerticalScrollIndicator={false}
-                    decelerationRate={0.9}
+                    decelerationRate={0.88}
                     scrollEventThrottle={16}
                     snapToAlignment="start"
                     // used in place of snapToOffset due to bug on Android
@@ -277,6 +357,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                             : undefined
                     }
                     onMomentumScrollEnd={onMomentumScrollEnd}
+                    onScroll={
+                        aggressivelyGetLatestDuration ? onScroll : undefined
+                    }
                     testID="duration-scroll-flatlist"
                 />
                 <View style={styles.pickerLabelContainer} pointerEvents="none">

package/src/components/TimerPicker/TimerPicker.styles.ts

@@ -8,6 +8,8 @@ export interface CustomTimerPickerStyles {
     pickerContainer?: any;
     pickerLabelContainer?: any;
     pickerLabel?: any;
+    pickerAmPmContainer?: any;
+    pickerAmPmLabel?: any;
     pickerItemContainer?: any;
     pickerItem?: any;
     disabledPickerItem?: any;
@@ -40,12 +42,19 @@ export const generateStyles = (
             top: 0,
             bottom: 0,
             justifyContent: "center",
+            minWidth:
+                (customStyles?.pickerLabel?.fontSize ??
+                    customStyles?.text?.fontSize ??
+                    25) * 0.65,
             ...customStyles?.pickerLabelContainer,
         },
         pickerLabel: {
             fontSize: 18,
             fontWeight: "bold",
-            marginTop: (customStyles?.pickerItem?.fontSize ?? 25) / 6,
+            marginTop:
+                (customStyles?.pickerItem?.fontSize ??
+                    customStyles?.text?.fontSize ??
+                    25) / 6,
             color:
                 customStyles?.theme === "dark"
                     ? DARK_MODE_TEXT_COLOR
@@ -54,6 +63,7 @@ export const generateStyles = (
             ...customStyles?.pickerLabel,
         },
         pickerItemContainer: {
+            flexDirection: "row",
             height: 50,
             justifyContent: "center",
             alignItems: "center",
@@ -70,6 +80,27 @@ export const generateStyles = (
             ...customStyles?.text,
             ...customStyles?.pickerItem,
         },
+        pickerAmPmContainer: {
+            position: "absolute",
+            right: 0,
+            top: 0,
+            bottom: 0,
+            justifyContent: "center",
+            ...customStyles?.pickerLabelContainer,
+            ...customStyles?.pickerAmPmContainer,
+        },
+        pickerAmPmLabel: {
+            fontSize: 18,
+            fontWeight: "bold",
+            marginTop: (customStyles?.pickerItem?.fontSize ?? 25) / 6,
+            color:
+                customStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : LIGHT_MODE_TEXT_COLOR,
+            ...customStyles?.text,
+            ...customStyles?.pickerLabel,
+            ...customStyles?.pickerAmPmLabel,
+        },
         disabledPickerItem: {
             opacity: 0.2,
             ...customStyles?.disabledPickerItem,

package/src/components/TimerPicker/index.tsx

@@ -1,4 +1,5 @@
 import React, {
+    MutableRefObject,
     forwardRef,
     useEffect,
     useImperativeHandle,
@@ -23,6 +24,11 @@ export interface TimerPickerRef {
         },
         options?: { animated?: boolean }
     ) => void;
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
 }
 
 export interface TimerPickerProps {
@@ -34,6 +40,10 @@ export interface TimerPickerProps {
     initialHours?: number;
     initialMinutes?: number;
     initialSeconds?: number;
+    aggressivelyGetLatestDuration?: boolean;
+    use12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
@@ -67,11 +77,15 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             hourLimit,
             minuteLimit,
             secondLimit,
-            hourLabel = "h",
-            minuteLabel = "m",
-            secondLabel = "s",
+            hourLabel,
+            minuteLabel,
+            secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
+            aggressivelyGetLatestDuration = false,
+            use12HourPicker = false,
+            amLabel = "am",
+            pmLabel = "pm",
             LinearGradient,
             pickerContainerProps,
             pickerGradientOverlayProps,
@@ -133,6 +147,11 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     options
                 );
             },
+            latestDuration: {
+                hours: hoursDurationScrollRef.current?.latestDuration,
+                minutes: minutesDurationScrollRef.current?.latestDuration,
+                seconds: secondsDurationScrollRef.current?.latestDuration,
+            },
         }));
 
         return (
@@ -144,8 +163,13 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={hoursDurationScrollRef}
                         numberOfItems={23}
-                        label={hourLabel}
+                        label={
+                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
+                        }
                         initialValue={initialHours}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedHours}
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
                         topPickerGradientOverlayProps={
@@ -158,6 +182,9 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         padWithNItems={checkedPadWithNItems}
                         limit={hourLimit}
                         LinearGradient={LinearGradient}
+                        is12HourPicker={use12HourPicker}
+                        amLabel={amLabel}
+                        pmLabel={pmLabel}
                         styles={styles}
                         testID="duration-scroll-hour"
                     />
@@ -166,8 +193,11 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={minutesDurationScrollRef}
                         numberOfItems={59}
-                        label={minuteLabel}
+                        label={minuteLabel ?? "m"}
                         initialValue={initialMinutes}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedMinutes}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
@@ -189,8 +219,11 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={secondsDurationScrollRef}
                         numberOfItems={59}
-                        label={secondLabel}
+                        label={secondLabel ?? "s"}
                         initialValue={initialSeconds}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedSeconds}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}