react-native-timer-picker 1.6.0 → 1.8.0

package/dist/typescript/components/{index.d.ts → TimerPickerModal/types.d.ts}

@@ -1,9 +1,14 @@
-import React, { MutableRefObject } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { TimerPickerProps } from "./TimerPicker";
-import Modal from "./Modal";
-import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
+import type { MutableRefObject } from "react";
+import type { View, TouchableOpacity, Text } from "react-native";
+import type Modal from "../Modal";
+import type { TimerPickerProps } from "../TimerPicker/types";
+import type { CustomTimerPickerModalStyles } from "./styles";
 export interface TimerPickerModalRef {
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
     reset: (options?: {
         animated?: boolean;
     }) => void;
@@ -14,33 +19,26 @@ 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;
-    setIsVisible: (isVisible: boolean) => void;
-    onConfirm: ({ hours, minutes, seconds, }: {
-        hours: number;
-        minutes: number;
-        seconds: number;
-    }) => void;
-    onCancel?: () => void;
+    buttonContainerProps?: React.ComponentProps<typeof View>;
+    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;
+    cancelButtonText?: string;
     closeOnOverlayPress?: boolean;
-    hideCancelButton?: boolean;
     confirmButtonText?: string;
-    cancelButtonText?: string;
-    modalTitle?: string;
-    modalProps?: React.ComponentProps<typeof Modal>;
     containerProps?: React.ComponentProps<typeof View>;
     contentContainerProps?: React.ComponentProps<typeof View>;
-    buttonContainerProps?: React.ComponentProps<typeof View>;
-    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;
+    hideCancelButton?: boolean;
+    modalProps?: React.ComponentProps<typeof Modal>;
+    modalTitle?: string;
     modalTitleProps?: React.ComponentProps<typeof Text>;
+    onCancel?: () => void;
+    onConfirm: ({ hours, minutes, seconds, }: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    setIsVisible: (isVisible: boolean) => void;
     styles?: CustomTimerPickerModalStyles;
+    visible: boolean;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimerPickerModalRef>>>;
-export default _default;

package/dist/typescript/index.d.ts

@@ -1,4 +1,6 @@
-export { default as TimerPickerModal, TimerPickerModalProps, TimerPickerModalRef, } from "./components";
-export { default as TimerPicker, TimerPickerProps, TimerPickerRef, } from "./components/TimerPicker";
-export { CustomTimerPickerModalStyles } from "./components/TimerPickerModal.styles";
-export { CustomTimerPickerStyles } from "./components/TimerPicker/TimerPicker.styles";
+export { default as TimerPickerModal } from "./components/TimerPickerModal";
+export { TimerPickerModalProps, TimerPickerModalRef, } from "./components/TimerPickerModal/types";
+export { CustomTimerPickerModalStyles } from "./components/TimerPickerModal/styles";
+export { default as TimerPicker } from "./components/TimerPicker";
+export { TimerPickerProps, TimerPickerRef, } from "./components/TimerPicker/types";
+export { CustomTimerPickerStyles } from "./components/TimerPicker/styles";

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

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

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

@@ -1,4 +1,4 @@
-import type { LimitType } from "../components/TimerPicker/DurationScroll";
+import type { LimitType } from "../components/DurationScroll/types";
 export declare const getAdjustedLimit: (limit: LimitType | undefined, numberOfItems: number) => {
     max: number;
     min: number;

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

@@ -1,6 +1,6 @@
 export declare const getScrollIndex: (variables: {
-    value: number;
+    disableInfiniteScroll?: boolean;
     numberOfItems: number;
     padWithNItems: number;
-    disableInfiniteScroll?: boolean;
+    value: number;
 }) => number;

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "react-native-timer-picker",
-    "description": "A simple, flexible, performant duration picker for 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 ⏰🕰️⏳\n\nIncludes iOS-style haptic and audio feedback 🍏",
     "author": {
         "name": "Tim Roberts",
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.6.0",
+    "version": "1.8.0",
     "main": "dist/commonjs/index.js",
     "types": "dist/typescript/src/index.d.ts",
     "scripts": {
@@ -100,25 +100,28 @@
         "react-native": ">=0.59.0"
     },
     "devDependencies": {
-        "@babel/core": ">=7.20.0",
+        "@babel/core": "^7.20.0",
         "@babel/plugin-transform-class-properties": "^7.22.5",
         "@babel/plugin-transform-flow-strip-types": "^7.22.5",
         "@babel/plugin-transform-private-methods": "^7.22.5",
         "@testing-library/react-native": "^12.0.0",
         "@types/jest": "^29.0.0",
-        "@types/react": ">=18.0.27",
-        "@types/react-native": ">=0.70.6",
-        "@typescript-eslint/eslint-plugin": ">=5.49.0",
-        "@typescript-eslint/parser": ">=5.49.0",
+        "@types/react": "^18.0.27",
+        "@types/react-native": "^0.70.6",
+        "@typescript-eslint/eslint-plugin": "^5.49.0",
+        "@typescript-eslint/parser": "^5.49.0",
         "babel-jest": "^29.6.2",
-        "eslint": ">=8.44.0",
-        "eslint-plugin-react": ">=7.33.1",
-        "eslint-plugin-react-hooks": ">=4.6.0",
+        "eslint": "^8.44.0",
+        "eslint-plugin-import": "^2.29.0",
+        "eslint-plugin-react": "^7.33.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-sort-destructure-keys": "^1.5.0",
+        "eslint-plugin-typescript-sort-keys": "^3.1.0",
         "jest": "^29.0.0",
         "metro-react-native-babel-preset": "^0.71.1",
         "react-native-builder-bob": "^0.18.3",
         "react-test-renderer": "^18.0.0",
-        "typescript": ">=4.7.4"
+        "typescript": "^4.7.4"
     },
     "react-native": "src/index.ts",
     "source": "src/index.ts",

package/src/components/{TimerPicker/DurationScroll.tsx → DurationScroll/index.tsx}

@@ -3,103 +3,56 @@ import React, {
     useCallback,
     forwardRef,
     useImperativeHandle,
-    MutableRefObject,
+    useState,
+    useEffect,
 } from "react";
-import {
-    View,
-    Text,
-    FlatList,
+
+import { View, Text, FlatList } from "react-native";
+import type {
     ViewabilityConfigCallbackPairs,
     ViewToken,
     NativeSyntheticEvent,
     NativeScrollEvent,
 } from "react-native";
 
+import { colorToRgba } from "../../utils/colorToRgba";
 import {
     generate12HourNumbers,
     generateNumbers,
 } from "../../utils/generateNumbers";
-import { colorToRgba } from "../../utils/colorToRgba";
-import { generateStyles } from "./TimerPicker.styles";
 import { getAdjustedLimit } from "../../utils/getAdjustedLimit";
 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 = {
-    x: number;
-    y: number;
-};
-
-export type LinearGradientProps = React.ComponentProps<typeof View> & {
-    colors: string[];
-    locations?: number[] | null;
-    start?: LinearGradientPoint | null;
-    end?: LinearGradientPoint | null;
-};
-
-export type LimitType = {
-    max?: number;
-    min?: number;
-};
-
-interface DurationScrollProps {
-    allowFontScaling?: boolean;
-    numberOfItems: number;
-    label?: string | React.ReactElement;
-    initialValue?: number;
-    onDurationChange: (duration: number) => void;
-    padNumbersWithZero?: boolean;
-    disableInfiniteScroll?: boolean;
-    isDisabled?: boolean;
-    limit?: LimitType;
-    aggressivelyGetLatestDuration: boolean;
-    is12HourPicker?: boolean;
-    amLabel?: string;
-    pmLabel?: string;
-    padWithNItems: number;
-    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LinearGradient?: any;
-    testID?: string;
-    styles: ReturnType<typeof generateStyles>;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const KEY_EXTRACTOR = (_: any, index: number) => index.toString();
+import type { DurationScrollProps, DurationScrollRef } from "./types";
 
 const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
-    (
-        {
-            numberOfItems,
-            label,
-            initialValue = 0,
-            onDurationChange,
-            padNumbersWithZero = false,
-            disableInfiniteScroll = false,
-            limit,
-            isDisabled,
+    (props, ref) => {
+        const {
             aggressivelyGetLatestDuration,
             allowFontScaling = false,
-            is12HourPicker,
             amLabel,
-            pmLabel,
-            padWithNItems,
-            pickerGradientOverlayProps,
-            topPickerGradientOverlayProps,
+            Audio,
             bottomPickerGradientOverlayProps,
+            clickSoundAsset,
+            disableInfiniteScroll = false,
+            Haptics,
+            initialValue = 0,
+            is12HourPicker,
+            isDisabled,
+            label,
+            limit,
             LinearGradient,
-            testID,
+            numberOfItems,
+            onDurationChange,
+            padNumbersWithZero = false,
+            padWithNItems,
+            pickerGradientOverlayProps,
+            pmLabel,
             styles,
-        },
-        ref
-    ): React.ReactElement => {
+            testID,
+            topPickerGradientOverlayProps,
+        } = props;
+
         const data = !is12HourPicker
             ? generateNumbers(numberOfItems, {
                   padNumbersWithZero,
@@ -125,10 +78,42 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             disableInfiniteScroll,
         });
 
+        // keep track of the latest duration as it scrolls
         const latestDuration = useRef(0);
+        // keep track of the last index scrolled past for haptic/audio feedback
+        const lastFeedbackIndex = useRef(0);
 
         const flatListRef = useRef<FlatList | null>(null);
 
+        const [clickSound, setClickSound] = useState<
+            | {
+                  replayAsync: () => Promise<void>;
+                  unloadAsync: () => Promise<void>;
+              }
+            | undefined
+        >();
+
+        // Preload the sound when the component mounts
+        useEffect(() => {
+            const loadSound = async () => {
+                if (Audio) {
+                    const { sound } = await Audio.Sound.createAsync(
+                        clickSoundAsset ??
+                            require("../../assets/select_click.mp3"),
+                        { shouldPlay: false }
+                    );
+                    setClickSound(sound);
+                }
+            };
+            loadSound();
+
+            // Unload sound when component unmounts
+            return () => {
+                clickSound?.unloadAsync();
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [Audio]);
+
         useImperativeHandle(ref, () => ({
             reset: (options) => {
                 flatListRef.current?.scrollToIndex({
@@ -182,11 +167,11 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                         </Text>
                         {is12HourPicker ? (
                             <View
-                                style={styles.pickerAmPmContainer}
-                                pointerEvents="none">
+                                pointerEvents="none"
+                                style={styles.pickerAmPmContainer}>
                                 <Text
-                                    style={[styles.pickerAmPmLabel]}
-                                    allowFontScaling={allowFontScaling}>
+                                    allowFontScaling={allowFontScaling}
+                                    style={[styles.pickerAmPmLabel]}>
                                     {isAm ? amLabel : pmLabel}
                                 </Text>
                             </View>
@@ -211,30 +196,63 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
         const onScroll = useCallback(
             (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-                // this function is only used when the picker is in a modal
+                // this function is only used when the picker is in a modal and/or has Haptic/Audio feedback
                 // 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);
+                if (!aggressivelyGetLatestDuration && !Haptics && !Audio) {
+                    return;
+                }
 
-                // check limits
-                if (newDuration > adjustedLimited.max) {
-                    newDuration = adjustedLimited.max;
-                } else if (newDuration < adjustedLimited.min) {
-                    newDuration = adjustedLimited.min;
+                if (aggressivelyGetLatestDuration) {
+                    const newIndex = Math.round(
+                        e.nativeEvent.contentOffset.y /
+                            styles.pickerItemContainer.height
+                    );
+                    let newDuration =
+                        (disableInfiniteScroll
+                            ? newIndex
+                            : newIndex + padWithNItems) %
+                        (numberOfItems + 1);
+
+                    if (newDuration !== latestDuration.current) {
+                        // check limits
+                        if (newDuration > adjustedLimited.max) {
+                            newDuration = adjustedLimited.max;
+                        } else if (newDuration < adjustedLimited.min) {
+                            newDuration = adjustedLimited.min;
+                        }
+
+                        latestDuration.current = newDuration;
+                    }
+                }
+
+                if (Haptics || Audio) {
+                    const feedbackIndex = Math.round(
+                        (e.nativeEvent.contentOffset.y +
+                            styles.pickerItemContainer.height / 2) /
+                            styles.pickerItemContainer.height
+                    );
+
+                    if (feedbackIndex !== lastFeedbackIndex.current) {
+                        // this check stops the feedback firing when the component mounts
+                        if (lastFeedbackIndex.current) {
+                            // fire haptic feedback if available
+                            Haptics?.selectionAsync();
+
+                            // play click sound if available
+                            clickSound?.replayAsync();
+                        }
+
+                        lastFeedbackIndex.current = feedbackIndex;
+                    }
                 }
-                latestDuration.current = newDuration;
             },
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             [
                 adjustedLimited.max,
                 adjustedLimited.min,
+                aggressivelyGetLatestDuration,
+                clickSound,
                 disableInfiniteScroll,
                 numberOfItems,
                 padWithNItems,
@@ -337,7 +355,6 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
         return (
             <View
-                testID={testID}
                 pointerEvents={isDisabled ? "none" : undefined}
                 style={[
                     {
@@ -347,36 +364,35 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                         overflow: "visible",
                     },
                     isDisabled && styles.disabledPickerContainer,
-                ]}>
+                ]}
+                testID={testID}>
                 <FlatList
                     ref={flatListRef}
                     data={data}
+                    decelerationRate={0.88}
                     getItemLayout={getItemLayout}
                     initialScrollIndex={initialScrollIndex}
-                    windowSize={numberOfItemsToShow}
+                    keyExtractor={(_, index) => index.toString()}
+                    onMomentumScrollEnd={onMomentumScrollEnd}
+                    onScroll={onScroll}
                     renderItem={renderItem}
-                    keyExtractor={KEY_EXTRACTOR}
-                    showsVerticalScrollIndicator={false}
-                    decelerationRate={0.88}
+                    scrollEnabled={!isDisabled}
                     scrollEventThrottle={16}
+                    showsVerticalScrollIndicator={false}
                     snapToAlignment="start"
-                    scrollEnabled={!isDisabled}
                     // used in place of snapToOffset due to bug on Android
                     snapToOffsets={[...Array(data.length)].map(
                         (_, i) => i * styles.pickerItemContainer.height
                     )}
+                    testID="duration-scroll-flatlist"
                     viewabilityConfigCallbackPairs={
                         !disableInfiniteScroll
                             ? viewabilityConfigCallbackPairs?.current
                             : undefined
                     }
-                    onMomentumScrollEnd={onMomentumScrollEnd}
-                    onScroll={
-                        aggressivelyGetLatestDuration ? onScroll : undefined
-                    }
-                    testID="duration-scroll-flatlist"
+                    windowSize={numberOfItemsToShow}
                 />
-                <View style={styles.pickerLabelContainer} pointerEvents="none">
+                <View pointerEvents="none" style={styles.pickerLabelContainer}>
                     {typeof label === "string" ? (
                         <Text
                             allowFontScaling={allowFontScaling}
@@ -400,9 +416,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                                     opacity: 0,
                                 }),
                             ]}
-                            start={{ x: 1, y: 0.3 }}
                             end={{ x: 1, y: 1 }}
                             pointerEvents="none"
+                            start={{ x: 1, y: 0.3 }}
                             {...pickerGradientOverlayProps}
                             {...topPickerGradientOverlayProps}
                             style={[styles.pickerGradientOverlay, { top: 0 }]}
@@ -418,9 +434,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                                 styles.pickerContainer.backgroundColor ??
                                     "white",
                             ]}
-                            start={{ x: 1, y: 0 }}
                             end={{ x: 1, y: 0.7 }}
                             pointerEvents="none"
+                            start={{ x: 1, y: 0 }}
                             {...pickerGradientOverlayProps}
                             {...bottomPickerGradientOverlayProps}
                             style={[

package/src/components/DurationScroll/types.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { MutableRefObject } from "react";
+
+import type { View } from "react-native";
+
+import type { generateStyles } from "../TimerPicker/styles";
+
+export interface DurationScrollProps {
+    Audio?: any;
+    Haptics?: any;
+    LinearGradient?: any;
+    aggressivelyGetLatestDuration: boolean;
+    allowFontScaling?: boolean;
+    amLabel?: string;
+    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    clickSoundAsset?: SoundAssetType;
+    disableInfiniteScroll?: boolean;
+    initialValue?: number;
+    is12HourPicker?: boolean;
+    isDisabled?: boolean;
+    label?: string | React.ReactElement;
+    limit?: LimitType;
+    numberOfItems: number;
+    onDurationChange: (duration: number) => void;
+    padNumbersWithZero?: boolean;
+    padWithNItems: number;
+    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    pmLabel?: string;
+    styles: ReturnType<typeof generateStyles>;
+    testID?: string;
+    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+}
+
+export interface DurationScrollRef {
+    latestDuration: MutableRefObject<number>;
+    reset: (options?: { animated?: boolean }) => void;
+    setValue: (value: number, options?: { animated?: boolean }) => void;
+}
+
+type LinearGradientPoint = {
+    x: number;
+    y: number;
+};
+
+export type LinearGradientProps = React.ComponentProps<typeof View> & {
+    colors: string[];
+    end?: LinearGradientPoint | null;
+    locations?: number[] | null;
+    start?: LinearGradientPoint | null;
+};
+
+export type LimitType = {
+    max?: number;
+    min?: number;
+};
+
+export type SoundAssetType =
+    | number
+    | {
+          headers?: Record<string, string>;
+          overrideFileExtensionAndroid?: string;
+          uri: string;
+      };

package/src/components/Modal/index.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useRef } from "react";
+
 import {
     Animated,
     Easing,
@@ -8,34 +8,24 @@ import {
     useWindowDimensions,
 } from "react-native";
 
-import { styles } from "./Modal.styles";
+import { styles } from "./styles";
+import type { ModalProps } from "./types";
 
-interface ModalProps {
-    children?: React.ReactElement;
-    onOverlayPress?: () => void;
-    onHide?: () => void;
-    isVisible?: boolean;
-    animationDuration?: number;
-    overlayOpacity?: number;
-    modalProps?: any;
-    contentStyle?: any;
-    overlayStyle?: any;
-    testID?: string;
-}
+export const Modal = (props: ModalProps) => {
+    const {
+        animationDuration = 300,
+        children,
+        contentStyle,
+        isVisible = false,
+        modalProps,
+        onHide,
+        onOverlayPress,
+        overlayOpacity = 0.4,
+        overlayStyle,
+        testID = "modal",
+    } = props;
 
-export const Modal = ({
-    children,
-    onOverlayPress,
-    onHide,
-    isVisible = false,
-    animationDuration = 300,
-    overlayOpacity = 0.4,
-    modalProps,
-    contentStyle,
-    overlayStyle,
-    testID = "modal",
-}: ModalProps): React.ReactElement => {
-    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const { height: screenHeight, width: screenWidth } = useWindowDimensions();
 
     const isMounted = useRef(false);
     const animatedOpacity = useRef(new Animated.Value(0));
@@ -105,8 +95,8 @@ export const Modal = ({
 
     return (
         <ReactNativeModal
-            transparent
             animationType="fade"
+            transparent
             visible={isVisible}
             {...modalProps}
             testID={testID}>
@@ -123,8 +113,8 @@ export const Modal = ({
                 />
             </TouchableWithoutFeedback>
             <Animated.View
-                style={[styles.content, contentAnimatedStyle, contentStyle]}
-                pointerEvents="box-none">
+                pointerEvents="box-none"
+                style={[styles.content, contentAnimatedStyle, contentStyle]}>
                 {children}
             </Animated.View>
         </ReactNativeModal>