react-native-timer-picker 1.3.0 → 1.4.0

package/dist/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useCallback","useImperativeHandle","useRef","useState","View","Text","TouchableOpacity","TimerPicker","Modal","generateStyles","TimerPickerModal","_ref","ref","visible","setIsVisible","onConfirm","onCancel","onDurationChange","closeOnOverlayPress","initialHours","initialMinutes","initialSeconds","hideHours","hideMinutes","hideSeconds","hourLimit","minuteLimit","secondLimit","hourLabel","minuteLabel","secondLabel","padWithNItems","disableInfiniteScroll","hideCancelButton","confirmButtonText","cancelButtonText","modalTitle","LinearGradient","modalProps","containerProps","contentContainerProps","pickerContainerProps","buttonContainerProps","buttonTouchableOpacityProps","modalTitleProps","pickerGradientOverlayProps","topPickerGradientOverlayProps","bottomPickerGradientOverlayProps","styles","customStyles","timerPickerRef","selectedDuration","setSelectedDuration","hours","minutes","seconds","confirmedDuration","setConfirmedDuration","hideModalHandler","confirmHandler","_timerPickerRef$curre","_latestDuration$hours","_latestDuration$minut","_latestDuration$secon","latestDuration","current","newDuration","cancelHandler","durationChangeHandler","duration","_timerPickerRef$curre4","_timerPickerRef$curre5","_timerPickerRef$curre6","reset","options","_timerPickerRef$curre2","initialDuration","setValue","value","_timerPickerRef$curre3","createElement","_extends","isVisible","onOverlayPress","undefined","testID","style","container","contentContainer","aggressivelyGetLatestDuration","buttonContainer","onPress","button","cancelButton","confirmButton","memo"],"sources":["index.tsx"],"sourcesContent":["import React, {\n    MutableRefObject,\n    forwardRef,\n    useCallback,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { View, Text, TouchableOpacity } from \"react-native\";\n\nimport TimerPicker, { TimerPickerProps, TimerPickerRef } from \"./TimerPicker\";\nimport Modal from \"./Modal\";\n\nimport {\n    generateStyles,\n    CustomTimerPickerModalStyles,\n} from \"./TimerPickerModal.styles\";\n\nexport interface TimerPickerModalRef {\n    reset: (options?: { animated?: boolean }) => void;\n    setValue: (\n        value: {\n            hours: number;\n            minutes: number;\n            seconds: number;\n        },\n        options?: { animated?: boolean }\n    ) => void;\n    latestDuration: {\n        hours: MutableRefObject<number> | undefined;\n        minutes: MutableRefObject<number> | undefined;\n        seconds: MutableRefObject<number> | undefined;\n    };\n}\n\nexport interface TimerPickerModalProps extends TimerPickerProps {\n    visible: boolean;\n    setIsVisible: (isVisible: boolean) => void;\n    onConfirm: ({\n        hours,\n        minutes,\n        seconds,\n    }: {\n        hours: number;\n        minutes: number;\n        seconds: number;\n    }) => void;\n    onCancel?: () => void;\n    closeOnOverlayPress?: boolean;\n    hideCancelButton?: boolean;\n    confirmButtonText?: string;\n    cancelButtonText?: string;\n    modalTitle?: string;\n    modalProps?: React.ComponentProps<typeof Modal>;\n    containerProps?: React.ComponentProps<typeof View>;\n    contentContainerProps?: React.ComponentProps<typeof View>;\n    buttonContainerProps?: React.ComponentProps<typeof View>;\n    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;\n    modalTitleProps?: React.ComponentProps<typeof Text>;\n    styles?: CustomTimerPickerModalStyles;\n}\n\nconst TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(\n    (\n        {\n            visible,\n            setIsVisible,\n            onConfirm,\n            onCancel,\n            onDurationChange,\n            closeOnOverlayPress,\n            initialHours = 0,\n            initialMinutes = 0,\n            initialSeconds = 0,\n            hideHours = false,\n            hideMinutes = false,\n            hideSeconds = false,\n            hourLimit,\n            minuteLimit,\n            secondLimit,\n            hourLabel = \"h\",\n            minuteLabel = \"m\",\n            secondLabel = \"s\",\n            padWithNItems = 1,\n            disableInfiniteScroll = false,\n            hideCancelButton = false,\n            confirmButtonText = \"Confirm\",\n            cancelButtonText = \"Cancel\",\n            modalTitle,\n            LinearGradient,\n            modalProps,\n            containerProps,\n            contentContainerProps,\n            pickerContainerProps,\n            buttonContainerProps,\n            buttonTouchableOpacityProps,\n            modalTitleProps,\n            pickerGradientOverlayProps,\n            topPickerGradientOverlayProps,\n            bottomPickerGradientOverlayProps,\n            styles: customStyles,\n        },\n        ref\n    ): React.ReactElement => {\n        const styles = generateStyles(customStyles);\n\n        const timerPickerRef = useRef<TimerPickerRef>(null);\n\n        const [selectedDuration, setSelectedDuration] = useState({\n            hours: initialHours,\n            minutes: initialMinutes,\n            seconds: initialSeconds,\n        });\n        const [confirmedDuration, setConfirmedDuration] = useState({\n            hours: initialHours,\n            minutes: initialMinutes,\n            seconds: initialSeconds,\n        });\n\n        const hideModalHandler = () => {\n            setSelectedDuration({\n                hours: confirmedDuration.hours,\n                minutes: confirmedDuration.minutes,\n                seconds: confirmedDuration.seconds,\n            });\n            setIsVisible(false);\n        };\n\n        const confirmHandler = () => {\n            const latestDuration = timerPickerRef.current?.latestDuration;\n            const newDuration = {\n                hours: latestDuration?.hours?.current ?? selectedDuration.hours,\n                minutes:\n                    latestDuration?.minutes?.current ??\n                    selectedDuration.minutes,\n                seconds:\n                    latestDuration?.seconds?.current ??\n                    selectedDuration.seconds,\n            };\n            setConfirmedDuration(newDuration);\n            onConfirm(newDuration);\n        };\n\n        const cancelHandler = () => {\n            setIsVisible(false);\n            setSelectedDuration(confirmedDuration);\n            onCancel?.();\n        };\n\n        // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker\n        const durationChangeHandler = useCallback(\n            (duration: { hours: number; minutes: number; seconds: number }) => {\n                setSelectedDuration(duration);\n                onDurationChange?.(duration);\n            },\n            [onDurationChange]\n        );\n\n        useImperativeHandle(ref, () => ({\n            reset: (options) => {\n                const initialDuration = {\n                    hours: initialHours,\n                    minutes: initialMinutes,\n                    seconds: initialSeconds,\n                };\n                setSelectedDuration(initialDuration);\n                setConfirmedDuration(initialDuration);\n                timerPickerRef.current?.reset(options);\n            },\n            setValue: (value, options) => {\n                setSelectedDuration(value);\n                setConfirmedDuration(value);\n                timerPickerRef.current?.setValue(value, options);\n            },\n            latestDuration: {\n                hours: timerPickerRef.current?.latestDuration?.hours,\n                minutes: timerPickerRef.current?.latestDuration?.minutes,\n                seconds: timerPickerRef.current?.latestDuration?.seconds,\n            },\n        }));\n\n        return (\n            <Modal\n                isVisible={visible}\n                onOverlayPress={\n                    closeOnOverlayPress ? hideModalHandler : undefined\n                }\n                {...modalProps}\n                testID=\"timer-picker-modal\">\n                <View {...containerProps} style={styles.container}>\n                    <View\n                        {...contentContainerProps}\n                        style={styles.contentContainer}>\n                        {modalTitle ? (\n                            <Text\n                                {...modalTitleProps}\n                                style={styles.modalTitle}>\n                                {modalTitle}\n                            </Text>\n                        ) : null}\n                        <TimerPicker\n                            ref={timerPickerRef}\n                            onDurationChange={durationChangeHandler}\n                            initialHours={confirmedDuration.hours}\n                            initialMinutes={confirmedDuration.minutes}\n                            initialSeconds={confirmedDuration.seconds}\n                            aggressivelyGetLatestDuration={true}\n                            hideHours={hideHours}\n                            hideMinutes={hideMinutes}\n                            hideSeconds={hideSeconds}\n                            hourLimit={hourLimit}\n                            minuteLimit={minuteLimit}\n                            secondLimit={secondLimit}\n                            hourLabel={hourLabel}\n                            minuteLabel={minuteLabel}\n                            secondLabel={secondLabel}\n                            padWithNItems={padWithNItems}\n                            disableInfiniteScroll={disableInfiniteScroll}\n                            LinearGradient={LinearGradient}\n                            pickerContainerProps={pickerContainerProps}\n                            pickerGradientOverlayProps={\n                                pickerGradientOverlayProps\n                            }\n                            topPickerGradientOverlayProps={\n                                topPickerGradientOverlayProps\n                            }\n                            bottomPickerGradientOverlayProps={\n                                bottomPickerGradientOverlayProps\n                            }\n                            styles={customStyles}\n                        />\n                        <View\n                            {...buttonContainerProps}\n                            style={styles.buttonContainer}>\n                            {!hideCancelButton ? (\n                                <TouchableOpacity\n                                    onPress={cancelHandler}\n                                    {...buttonTouchableOpacityProps}>\n                                    <Text\n                                        style={[\n                                            styles.button,\n                                            styles.cancelButton,\n                                        ]}>\n                                        {cancelButtonText}\n                                    </Text>\n                                </TouchableOpacity>\n                            ) : null}\n                            <TouchableOpacity\n                                onPress={confirmHandler}\n                                {...buttonTouchableOpacityProps}>\n                                <Text\n                                    style={[\n                                        styles.button,\n                                        styles.confirmButton,\n                                    ]}>\n                                    {confirmButtonText}\n                                </Text>\n                            </TouchableOpacity>\n                        </View>\n                    </View>\n                </View>\n            </Modal>\n        );\n    }\n);\n\nexport default React.memo(TimerPickerModal);\n"],"mappings":"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"}
+{"version":3,"names":["React","forwardRef","useCallback","useImperativeHandle","useRef","useState","View","Text","TouchableOpacity","TimerPicker","Modal","generateStyles","TimerPickerModal","visible","setIsVisible","onConfirm","onCancel","onDurationChange","closeOnOverlayPress","initialHours","initialMinutes","initialSeconds","hideHours","hideMinutes","hideSeconds","hourLimit","minuteLimit","secondLimit","hourLabel","minuteLabel","secondLabel","padWithNItems","disableInfiniteScroll","use12HourPicker","amLabel","pmLabel","hideCancelButton","confirmButtonText","cancelButtonText","modalTitle","LinearGradient","modalProps","containerProps","contentContainerProps","pickerContainerProps","buttonContainerProps","buttonTouchableOpacityProps","modalTitleProps","pickerGradientOverlayProps","topPickerGradientOverlayProps","bottomPickerGradientOverlayProps","styles","customStyles","ref","timerPickerRef","selectedDuration","setSelectedDuration","hours","minutes","seconds","confirmedDuration","setConfirmedDuration","hideModalHandler","confirmHandler","_timerPickerRef$curre","_latestDuration$hours","_latestDuration$minut","_latestDuration$secon","latestDuration","current","newDuration","cancelHandler","durationChangeHandler","duration","_timerPickerRef$curre4","_timerPickerRef$curre5","_timerPickerRef$curre6","reset","options","_timerPickerRef$curre2","initialDuration","setValue","value","_timerPickerRef$curre3","createElement","_extends","isVisible","onOverlayPress","undefined","testID","style","container","contentContainer","aggressivelyGetLatestDuration","buttonContainer","onPress","button","cancelButton","confirmButton","memo"],"sources":["index.tsx"],"sourcesContent":["import React, {\n    MutableRefObject,\n    forwardRef,\n    useCallback,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { View, Text, TouchableOpacity } from \"react-native\";\n\nimport TimerPicker, { TimerPickerProps, TimerPickerRef } from \"./TimerPicker\";\nimport Modal from \"./Modal\";\n\nimport {\n    generateStyles,\n    CustomTimerPickerModalStyles,\n} from \"./TimerPickerModal.styles\";\n\nexport interface TimerPickerModalRef {\n    reset: (options?: { animated?: boolean }) => void;\n    setValue: (\n        value: {\n            hours: number;\n            minutes: number;\n            seconds: number;\n        },\n        options?: { animated?: boolean }\n    ) => void;\n    latestDuration: {\n        hours: MutableRefObject<number> | undefined;\n        minutes: MutableRefObject<number> | undefined;\n        seconds: MutableRefObject<number> | undefined;\n    };\n}\n\nexport interface TimerPickerModalProps extends TimerPickerProps {\n    visible: boolean;\n    setIsVisible: (isVisible: boolean) => void;\n    onConfirm: ({\n        hours,\n        minutes,\n        seconds,\n    }: {\n        hours: number;\n        minutes: number;\n        seconds: number;\n    }) => void;\n    onCancel?: () => void;\n    closeOnOverlayPress?: boolean;\n    hideCancelButton?: boolean;\n    confirmButtonText?: string;\n    cancelButtonText?: string;\n    modalTitle?: string;\n    modalProps?: React.ComponentProps<typeof Modal>;\n    containerProps?: React.ComponentProps<typeof View>;\n    contentContainerProps?: React.ComponentProps<typeof View>;\n    buttonContainerProps?: React.ComponentProps<typeof View>;\n    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;\n    modalTitleProps?: React.ComponentProps<typeof Text>;\n    styles?: CustomTimerPickerModalStyles;\n}\n\nconst TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(\n    (\n        {\n            visible,\n            setIsVisible,\n            onConfirm,\n            onCancel,\n            onDurationChange,\n            closeOnOverlayPress,\n            initialHours = 0,\n            initialMinutes = 0,\n            initialSeconds = 0,\n            hideHours = false,\n            hideMinutes = false,\n            hideSeconds = false,\n            hourLimit,\n            minuteLimit,\n            secondLimit,\n            hourLabel,\n            minuteLabel,\n            secondLabel,\n            padWithNItems = 1,\n            disableInfiniteScroll = false,\n            use12HourPicker,\n            amLabel,\n            pmLabel,\n            hideCancelButton = false,\n            confirmButtonText = \"Confirm\",\n            cancelButtonText = \"Cancel\",\n            modalTitle,\n            LinearGradient,\n            modalProps,\n            containerProps,\n            contentContainerProps,\n            pickerContainerProps,\n            buttonContainerProps,\n            buttonTouchableOpacityProps,\n            modalTitleProps,\n            pickerGradientOverlayProps,\n            topPickerGradientOverlayProps,\n            bottomPickerGradientOverlayProps,\n            styles: customStyles,\n        },\n        ref\n    ): React.ReactElement => {\n        const styles = generateStyles(customStyles);\n\n        const timerPickerRef = useRef<TimerPickerRef>(null);\n\n        const [selectedDuration, setSelectedDuration] = useState({\n            hours: initialHours,\n            minutes: initialMinutes,\n            seconds: initialSeconds,\n        });\n        const [confirmedDuration, setConfirmedDuration] = useState({\n            hours: initialHours,\n            minutes: initialMinutes,\n            seconds: initialSeconds,\n        });\n\n        const hideModalHandler = () => {\n            setSelectedDuration({\n                hours: confirmedDuration.hours,\n                minutes: confirmedDuration.minutes,\n                seconds: confirmedDuration.seconds,\n            });\n            setIsVisible(false);\n        };\n\n        const confirmHandler = () => {\n            const latestDuration = timerPickerRef.current?.latestDuration;\n            const newDuration = {\n                hours: latestDuration?.hours?.current ?? selectedDuration.hours,\n                minutes:\n                    latestDuration?.minutes?.current ??\n                    selectedDuration.minutes,\n                seconds:\n                    latestDuration?.seconds?.current ??\n                    selectedDuration.seconds,\n            };\n            setConfirmedDuration(newDuration);\n            onConfirm(newDuration);\n        };\n\n        const cancelHandler = () => {\n            setIsVisible(false);\n            setSelectedDuration(confirmedDuration);\n            onCancel?.();\n        };\n\n        // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker\n        const durationChangeHandler = useCallback(\n            (duration: { hours: number; minutes: number; seconds: number }) => {\n                setSelectedDuration(duration);\n                onDurationChange?.(duration);\n            },\n            [onDurationChange]\n        );\n\n        useImperativeHandle(ref, () => ({\n            reset: (options) => {\n                const initialDuration = {\n                    hours: initialHours,\n                    minutes: initialMinutes,\n                    seconds: initialSeconds,\n                };\n                setSelectedDuration(initialDuration);\n                setConfirmedDuration(initialDuration);\n                timerPickerRef.current?.reset(options);\n            },\n            setValue: (value, options) => {\n                setSelectedDuration(value);\n                setConfirmedDuration(value);\n                timerPickerRef.current?.setValue(value, options);\n            },\n            latestDuration: {\n                hours: timerPickerRef.current?.latestDuration?.hours,\n                minutes: timerPickerRef.current?.latestDuration?.minutes,\n                seconds: timerPickerRef.current?.latestDuration?.seconds,\n            },\n        }));\n\n        return (\n            <Modal\n                isVisible={visible}\n                onOverlayPress={\n                    closeOnOverlayPress ? hideModalHandler : undefined\n                }\n                {...modalProps}\n                testID=\"timer-picker-modal\">\n                <View {...containerProps} style={styles.container}>\n                    <View\n                        {...contentContainerProps}\n                        style={styles.contentContainer}>\n                        {modalTitle ? (\n                            <Text\n                                {...modalTitleProps}\n                                style={styles.modalTitle}>\n                                {modalTitle}\n                            </Text>\n                        ) : null}\n                        <TimerPicker\n                            ref={timerPickerRef}\n                            onDurationChange={durationChangeHandler}\n                            initialHours={confirmedDuration.hours}\n                            initialMinutes={confirmedDuration.minutes}\n                            initialSeconds={confirmedDuration.seconds}\n                            aggressivelyGetLatestDuration={true}\n                            hideHours={hideHours}\n                            hideMinutes={hideMinutes}\n                            hideSeconds={hideSeconds}\n                            hourLimit={hourLimit}\n                            minuteLimit={minuteLimit}\n                            secondLimit={secondLimit}\n                            hourLabel={hourLabel}\n                            minuteLabel={minuteLabel}\n                            secondLabel={secondLabel}\n                            padWithNItems={padWithNItems}\n                            disableInfiniteScroll={disableInfiniteScroll}\n                            use12HourPicker={use12HourPicker}\n                            amLabel={amLabel}\n                            pmLabel={pmLabel}\n                            LinearGradient={LinearGradient}\n                            pickerContainerProps={pickerContainerProps}\n                            pickerGradientOverlayProps={\n                                pickerGradientOverlayProps\n                            }\n                            topPickerGradientOverlayProps={\n                                topPickerGradientOverlayProps\n                            }\n                            bottomPickerGradientOverlayProps={\n                                bottomPickerGradientOverlayProps\n                            }\n                            styles={customStyles}\n                        />\n                        <View\n                            {...buttonContainerProps}\n                            style={styles.buttonContainer}>\n                            {!hideCancelButton ? (\n                                <TouchableOpacity\n                                    onPress={cancelHandler}\n                                    {...buttonTouchableOpacityProps}>\n                                    <Text\n                                        style={[\n                                            styles.button,\n                                            styles.cancelButton,\n                                        ]}>\n                                        {cancelButtonText}\n                                    </Text>\n                                </TouchableOpacity>\n                            ) : null}\n                            <TouchableOpacity\n                                onPress={confirmHandler}\n                                {...buttonTouchableOpacityProps}>\n                                <Text\n                                    style={[\n                                        styles.button,\n                                        styles.confirmButton,\n                                    ]}>\n                                    {confirmButtonText}\n                                </Text>\n                            </TouchableOpacity>\n                        </View>\n                    </View>\n                </View>\n            </Modal>\n        );\n    }\n);\n\nexport default React.memo(TimerPickerModal);\n"],"mappings":"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"}

package/dist/module/tests/Modal.test.js

@@ -6,7 +6,9 @@ describe("Modal", () => {
   it("renders without crashing", () => {
     const {
       getByTestId
-    } = render( /*#__PURE__*/React.createElement(Modal, null));
+    } = render( /*#__PURE__*/React.createElement(Modal, {
+      isVisible: true
+    }));
     const component = getByTestId("modal");
     expect(component).toBeDefined();
   });

package/dist/module/tests/Modal.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","render","fireEvent","Modal","describe","it","getByTestId","createElement","component","expect","toBeDefined","getByText","isVisible","content","onOverlayPressMock","jest","fn","onOverlayPress","overlay","press","toHaveBeenCalled"],"sources":["Modal.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"react-native\";\nimport { render, fireEvent } from \"@testing-library/react-native\";\nimport Modal from \"../components/Modal\";\n\ndescribe(\"Modal\", () => {\n    it(\"renders without crashing\", () => {\n        const { getByTestId } = render(<Modal />);\n        const component = getByTestId(\"modal\");\n        expect(component).toBeDefined();\n    });\n\n    it(\"renders children when visible\", () => {\n        const { getByText } = render(\n            <Modal isVisible>\n                <Text>{\"Modal Content\"}</Text>\n            </Modal>\n        );\n        const content = getByText(\"Modal Content\");\n        expect(content).toBeDefined();\n    });\n\n    it(\"calls onOverlayPress when overlay is pressed\", () => {\n        const onOverlayPressMock = jest.fn();\n        const { getByTestId } = render(\n            <Modal isVisible onOverlayPress={onOverlayPressMock} />\n        );\n        const overlay = getByTestId(\"modal-backdrop\");\n        fireEvent.press(overlay);\n        expect(onOverlayPressMock).toHaveBeenCalled();\n    });\n\n    // Add more test cases to cover different interactions, scenarios, and edge cases\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,MAAM,EAAEC,SAAS,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,qBAAqB;AAEvCC,QAAQ,CAAC,OAAO,EAAE,MAAM;EACpBC,EAAE,CAAC,0BAA0B,EAAE,MAAM;IACjC,MAAM;MAAEC;IAAY,CAAC,GAAGL,MAAM,eAACF,KAAA,CAAAQ,aAAA,CAACJ,KAAK,MAAE,CAAC,CAAC;IACzC,MAAMK,SAAS,GAAGF,WAAW,CAAC,OAAO,CAAC;IACtCG,MAAM,CAACD,SAAS,CAAC,CAACE,WAAW,CAAC,CAAC;EACnC,CAAC,CAAC;EAEFL,EAAE,CAAC,+BAA+B,EAAE,MAAM;IACtC,MAAM;MAAEM;IAAU,CAAC,GAAGV,MAAM,eACxBF,KAAA,CAAAQ,aAAA,CAACJ,KAAK;MAACS,SAAS;IAAA,gBACZb,KAAA,CAAAQ,aAAA,CAACP,IAAI,QAAE,eAAsB,CAC1B,CACX,CAAC;IACD,MAAMa,OAAO,GAAGF,SAAS,CAAC,eAAe,CAAC;IAC1CF,MAAM,CAACI,OAAO,CAAC,CAACH,WAAW,CAAC,CAAC;EACjC,CAAC,CAAC;EAEFL,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACrD,MAAMS,kBAAkB,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;IACpC,MAAM;MAAEV;IAAY,CAAC,GAAGL,MAAM,eAC1BF,KAAA,CAAAQ,aAAA,CAACJ,KAAK;MAACS,SAAS;MAACK,cAAc,EAAEH;IAAmB,CAAE,CAC1D,CAAC;IACD,MAAMI,OAAO,GAAGZ,WAAW,CAAC,gBAAgB,CAAC;IAC7CJ,SAAS,CAACiB,KAAK,CAACD,OAAO,CAAC;IACxBT,MAAM,CAACK,kBAAkB,CAAC,CAACM,gBAAgB,CAAC,CAAC;EACjD,CAAC,CAAC;;EAEF;AACJ,CAAC,CAAC"}
+{"version":3,"names":["React","Text","render","fireEvent","Modal","describe","it","getByTestId","createElement","isVisible","component","expect","toBeDefined","getByText","content","onOverlayPressMock","jest","fn","onOverlayPress","overlay","press","toHaveBeenCalled"],"sources":["Modal.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"react-native\";\nimport { render, fireEvent } from \"@testing-library/react-native\";\nimport Modal from \"../components/Modal\";\n\ndescribe(\"Modal\", () => {\n    it(\"renders without crashing\", () => {\n        const { getByTestId } = render(<Modal isVisible/>);\n        const component = getByTestId(\"modal\");\n        expect(component).toBeDefined();\n    });\n\n    it(\"renders children when visible\", () => {\n        const { getByText } = render(\n            <Modal isVisible>\n                <Text>{\"Modal Content\"}</Text>\n            </Modal>\n        );\n        const content = getByText(\"Modal Content\");\n        expect(content).toBeDefined();\n    });\n\n    it(\"calls onOverlayPress when overlay is pressed\", () => {\n        const onOverlayPressMock = jest.fn();\n        const { getByTestId } = render(\n            <Modal isVisible onOverlayPress={onOverlayPressMock} />\n        );\n        const overlay = getByTestId(\"modal-backdrop\");\n        fireEvent.press(overlay);\n        expect(onOverlayPressMock).toHaveBeenCalled();\n    });\n\n    // Add more test cases to cover different interactions, scenarios, and edge cases\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,MAAM,EAAEC,SAAS,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,qBAAqB;AAEvCC,QAAQ,CAAC,OAAO,EAAE,MAAM;EACpBC,EAAE,CAAC,0BAA0B,EAAE,MAAM;IACjC,MAAM;MAAEC;IAAY,CAAC,GAAGL,MAAM,eAACF,KAAA,CAAAQ,aAAA,CAACJ,KAAK;MAACK,SAAS;IAAA,CAAC,CAAC,CAAC;IAClD,MAAMC,SAAS,GAAGH,WAAW,CAAC,OAAO,CAAC;IACtCI,MAAM,CAACD,SAAS,CAAC,CAACE,WAAW,CAAC,CAAC;EACnC,CAAC,CAAC;EAEFN,EAAE,CAAC,+BAA+B,EAAE,MAAM;IACtC,MAAM;MAAEO;IAAU,CAAC,GAAGX,MAAM,eACxBF,KAAA,CAAAQ,aAAA,CAACJ,KAAK;MAACK,SAAS;IAAA,gBACZT,KAAA,CAAAQ,aAAA,CAACP,IAAI,QAAE,eAAsB,CAC1B,CACX,CAAC;IACD,MAAMa,OAAO,GAAGD,SAAS,CAAC,eAAe,CAAC;IAC1CF,MAAM,CAACG,OAAO,CAAC,CAACF,WAAW,CAAC,CAAC;EACjC,CAAC,CAAC;EAEFN,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACrD,MAAMS,kBAAkB,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;IACpC,MAAM;MAAEV;IAAY,CAAC,GAAGL,MAAM,eAC1BF,KAAA,CAAAQ,aAAA,CAACJ,KAAK;MAACK,SAAS;MAACS,cAAc,EAAEH;IAAmB,CAAE,CAC1D,CAAC;IACD,MAAMI,OAAO,GAAGZ,WAAW,CAAC,gBAAgB,CAAC;IAC7CJ,SAAS,CAACiB,KAAK,CAACD,OAAO,CAAC;IACxBR,MAAM,CAACI,kBAAkB,CAAC,CAACM,gBAAgB,CAAC,CAAC;EACjD,CAAC,CAAC;;EAEF;AACJ,CAAC,CAAC"}

package/dist/module/utils/generateNumbers.js

@@ -1,17 +1,39 @@
-import { padWithZero } from "./padWithZero";
+import { padNumber } from "./padNumber";
 export const generateNumbers = (numberOfItems, options) => {
   if (numberOfItems <= 0) {
     return [];
   }
   let numbers = [];
-  if (options.padWithZero) {
-    for (let i = 0; i <= numberOfItems; i++) {
-      numbers.push(padWithZero(i));
-    }
-  } else {
-    for (let i = 0; i <= numberOfItems; i++) {
-      numbers.push(String(i));
-    }
+  for (let i = 0; i <= numberOfItems; i++) {
+    numbers.push(padNumber(i, {
+      padWithZero: options.padNumbersWithZero
+    }));
+  }
+  if ((options.repeatNTimes ?? 1) > 1) {
+    numbers = Array(options.repeatNTimes).fill(numbers).flat();
+  }
+  if (options.disableInfiniteScroll) {
+    numbers.push(...Array(options.padWithNItems).fill(""));
+    numbers.unshift(...Array(options.padWithNItems).fill(""));
+  }
+  return numbers;
+};
+export const generate12HourNumbers = options => {
+  let numbers = [];
+
+  // Generate numbers from 0 to 11 for AM
+  for (let i = 0; i <= 11; i++) {
+    numbers.push(`${padNumber(i, {
+      padWithZero: options.padNumbersWithZero
+    })} AM`);
+  }
+
+  // Generate numbers from 12 to 11 for PM
+  for (let i = 12; i <= 23; i++) {
+    const hour = i > 12 ? i - 12 : i;
+    numbers.push(`${padNumber(hour, {
+      padWithZero: options.padNumbersWithZero
+    })} PM`);
   }
   if ((options.repeatNTimes ?? 1) > 1) {
     numbers = Array(options.repeatNTimes).fill(numbers).flat();

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

@@ -33,6 +33,9 @@ interface DurationScrollProps {
     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

@@ -30,6 +30,9 @@ export interface TimerPickerProps {
     initialMinutes?: number;
     initialSeconds?: number;
     aggressivelyGetLatestDuration?: boolean;
+    use12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: 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,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "main": "dist/commonjs/index.js",
     "types": "dist/typescript/src/index.d.ts",
     "scripts": {

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

@@ -15,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";
@@ -53,6 +56,9 @@ interface DurationScrollProps {
     disableInfiniteScroll?: boolean;
     limit?: LimitType;
     aggressivelyGetLatestDuration: boolean;
+    is12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     padWithNItems: number;
     pickerGradientOverlayProps?: Partial<LinearGradientProps>;
     topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
@@ -77,6 +83,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             disableInfiniteScroll = false,
             limit,
             aggressivelyGetLatestDuration,
+            is12HourPicker,
+            amLabel,
+            pmLabel,
             padWithNItems,
             pickerGradientOverlayProps,
             topPickerGradientOverlayProps,
@@ -87,12 +96,19 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
         },
         ref
     ): React.ReactElement => {
-        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;
 
@@ -132,7 +148,17 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
         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
@@ -147,15 +173,29 @@ 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,
             ]
@@ -317,7 +357,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                             : undefined
                     }
                     onMomentumScrollEnd={onMomentumScrollEnd}
-                    onScroll={aggressivelyGetLatestDuration ? onScroll : undefined}
+                    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

@@ -41,6 +41,9 @@ export interface TimerPickerProps {
     initialMinutes?: number;
     initialSeconds?: number;
     aggressivelyGetLatestDuration?: boolean;
+    use12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
@@ -74,12 +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,
@@ -157,9 +163,13 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={hoursDurationScrollRef}
                         numberOfItems={23}
-                        label={hourLabel}
+                        label={
+                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
+                        }
                         initialValue={initialHours}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedHours}
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
                         topPickerGradientOverlayProps={
@@ -172,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"
                     />
@@ -180,9 +193,11 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={minutesDurationScrollRef}
                         numberOfItems={59}
-                        label={minuteLabel}
+                        label={minuteLabel ?? "m"}
                         initialValue={initialMinutes}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedMinutes}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
@@ -204,9 +219,11 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={secondsDurationScrollRef}
                         numberOfItems={59}
-                        label={secondLabel}
+                        label={secondLabel ?? "s"}
                         initialValue={initialSeconds}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedSeconds}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}

package/src/components/index.tsx

@@ -78,11 +78,14 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             hourLimit,
             minuteLimit,
             secondLimit,
-            hourLabel = "h",
-            minuteLabel = "m",
-            secondLabel = "s",
+            hourLabel,
+            minuteLabel,
+            secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
+            use12HourPicker,
+            amLabel,
+            pmLabel,
             hideCancelButton = false,
             confirmButtonText = "Confirm",
             cancelButtonText = "Cancel",
@@ -216,6 +219,9 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             secondLabel={secondLabel}
                             padWithNItems={padWithNItems}
                             disableInfiniteScroll={disableInfiniteScroll}
+                            use12HourPicker={use12HourPicker}
+                            amLabel={amLabel}
+                            pmLabel={pmLabel}
                             LinearGradient={LinearGradient}
                             pickerContainerProps={pickerContainerProps}
                             pickerGradientOverlayProps={

package/src/tests/Modal.test.tsx

@@ -5,7 +5,7 @@ import Modal from "../components/Modal";
 
 describe("Modal", () => {
     it("renders without crashing", () => {
-        const { getByTestId } = render(<Modal />);
+        const { getByTestId } = render(<Modal isVisible/>);
         const component = getByTestId("modal");
         expect(component).toBeDefined();
     });