react-native-timer-picker 1.3.0 → 1.5.0

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

@@ -1,17 +1,290 @@
+import { Text, View } from "react-native";
 import type { CustomTimerPickerStyles } from "./TimerPicker/TimerPicker.styles";
+import { ComponentProps } from "react";
 export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
-    container?: any;
-    contentContainer?: any;
-    buttonContainer?: any;
-    button?: any;
-    cancelButton?: any;
-    confirmButton?: any;
-    modalTitle?: any;
+    container?: ComponentProps<typeof View>;
+    contentContainer?: ComponentProps<typeof View>;
+    buttonContainer?: ComponentProps<typeof View>;
+    button?: ComponentProps<typeof Text>;
+    cancelButton?: ComponentProps<typeof Text>;
+    confirmButton?: ComponentProps<typeof Text>;
+    modalTitle?: ComponentProps<typeof Text>;
 }
 export declare const generateStyles: (customStyles: CustomTimerPickerModalStyles | undefined) => {
-    container: any;
-    contentContainer: any;
-    buttonContainer: any;
+    container: {
+        children?: import("react").ReactNode;
+        hitSlop?: import("react-native").Insets | undefined;
+        id?: string | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        'aria-label'?: string | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        'aria-busy'?: boolean | undefined;
+        'aria-checked'?: boolean | "mixed" | undefined;
+        'aria-disabled'?: boolean | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-selected'?: boolean | undefined;
+        'aria-labelledby'?: string | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        'aria-hidden'?: boolean | undefined;
+        'aria-live'?: "polite" | "assertive" | "off" | undefined;
+        'aria-modal'?: boolean | undefined;
+        role?: import("react-native").Role | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+    };
+    contentContainer: {
+        children?: import("react").ReactNode;
+        hitSlop?: import("react-native").Insets | undefined;
+        id?: string | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        'aria-label'?: string | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        'aria-busy'?: boolean | undefined;
+        'aria-checked'?: boolean | "mixed" | undefined;
+        'aria-disabled'?: boolean | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-selected'?: boolean | undefined;
+        'aria-labelledby'?: string | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        'aria-hidden'?: boolean | undefined;
+        'aria-live'?: "polite" | "assertive" | "off" | undefined;
+        'aria-modal'?: boolean | undefined;
+        role?: import("react-native").Role | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+        padding: number;
+    };
+    buttonContainer: {
+        children?: import("react").ReactNode;
+        hitSlop?: import("react-native").Insets | undefined;
+        id?: string | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        'aria-label'?: string | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        'aria-busy'?: boolean | undefined;
+        'aria-checked'?: boolean | "mixed" | undefined;
+        'aria-disabled'?: boolean | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-selected'?: boolean | undefined;
+        'aria-labelledby'?: string | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        'aria-hidden'?: boolean | undefined;
+        'aria-live'?: "polite" | "assertive" | "off" | undefined;
+        'aria-modal'?: boolean | undefined;
+        role?: import("react-native").Role | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        flexDirection: "row";
+        marginTop: number;
+    };
     button: any;
     cancelButton: any;
     confirmButton: any;

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

@@ -1,12 +1,12 @@
 {
     "name": "react-native-timer-picker",
-    "description": "A simple, flexible, performant duration picker for Expo React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳",
+    "description": "A simple, flexible, performant duration picker for React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳",
     "author": {
         "name": "Tim Roberts",
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.3.0",
+    "version": "1.5.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";
@@ -45,6 +48,7 @@ export type LimitType = {
 };
 
 interface DurationScrollProps {
+    allowFontScaling?: boolean;
     numberOfItems: number;
     label?: string | React.ReactElement;
     initialValue?: number;
@@ -53,6 +57,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 +84,10 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             disableInfiniteScroll = false,
             limit,
             aggressivelyGetLatestDuration,
+            allowFontScaling = false,
+            is12HourPicker,
+            amLabel,
+            pmLabel,
             padWithNItems,
             pickerGradientOverlayProps,
             topPickerGradientOverlayProps,
@@ -87,12 +98,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 +150,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
@@ -140,6 +168,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                         style={styles.pickerItemContainer}
                         testID="picker-item">
                         <Text
+                            allowFontScaling={allowFontScaling}
                             style={[
                                 styles.pickerItem,
                                 intItem > adjustedLimited.max ||
@@ -147,15 +176,32 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                                     ? styles.disabledPickerItem
                                     : {},
                             ]}>
-                            {item}
+                            {stringItem}
                         </Text>
+                        {is12HourPicker ? (
+                            <View
+                                style={styles.pickerAmPmContainer}
+                                pointerEvents="none">
+                                <Text
+                                    style={[styles.pickerAmPmLabel]}
+                                    allowFontScaling={allowFontScaling}>
+                                    {isAm ? amLabel : pmLabel}
+                                </Text>
+                            </View>
+                        ) : null}
                     </View>
                 );
             },
             [
                 adjustedLimited.max,
                 adjustedLimited.min,
+                allowFontScaling,
+                amLabel,
+                is12HourPicker,
+                pmLabel,
                 styles.disabledPickerItem,
+                styles.pickerAmPmContainer,
+                styles.pickerAmPmLabel,
                 styles.pickerItem,
                 styles.pickerItemContainer,
             ]
@@ -317,12 +363,18 @@ 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">
                     {typeof label === "string" ? (
-                        <Text style={styles.pickerLabel}>{label}</Text>
+                        <Text
+                            allowFontScaling={allowFontScaling}
+                            style={styles.pickerLabel}>
+                            {label}
+                        </Text>
                     ) : (
                         label ?? null
                     )}

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,