react-native-timer-picker 1.1.4 → 1.2.1

package/README.md

@@ -308,9 +308,12 @@ return (
 | hideHours                   | Hide the hours picker                                     | Boolean                                           | false               | false    |
 | hideMinutes                 | Hide the minutes picker                                   | Boolean                                           | false               | false    |
 | hideSeconds                 | Hide the seconds picker                                   | Boolean                                           | false               | false    |
-| hourLabel                   | Label for the hours picker                                | String                                            | h                   | false    |
-| minuteLabel                 | Label for the minutes picker                              | String                                            | m                   | false    |
-| secondLabel                 | Label for the seconds picker                              | String                                            | s                   | false    |
+| hourLimit                   | Limit on the hours it is possible to select               | { max?: Number, min?: Number }                    | -                   | false    |
+| minuteLimit                 | Limit on the minutes it is possible to select             | { max?: Number, min?: Number }                    | -                   | false    |
+| secondLimit                 | Limit on the seconds it is possible to select             | { max?: Number, min?: Number }                    | -                   | false    |
+| hourLabel                   | Label for the hours picker                                | String \| React.ReactElement                      | h                   | false    |
+| minuteLabel                 | Label for the minutes picker                              | String \| React.ReactElement                      | m                   | false    |
+| secondLabel                 | Label for the seconds picker                              | String \| React.ReactElement                      | s                   | false    |
 | padWithNItems               | Number of items to pad the picker with on either side     | Number                                            | 1                   | false    |
 | disableInfiniteScroll       | Disable the infinite scroll feature                       | Boolean                                           | false               | false    |
 | LinearGradient              | Linear Gradient Component                                 | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | -                   | false    |
@@ -332,6 +335,7 @@ The following custom styles can be supplied to re-style the component in any way
 | pickerLabel           | Style for the picker's labels          | TextStyle                             |
 | pickerItemContainer   | Container for each number in the picker | ViewStyle                             |
 | pickerItem            | Style for each individual picker number | TextStyle                             |
+| disabledPickerItem    | Style for any numbers outside any set limits | TextStyle                         |
 | pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle                             |
 
 ### TimerPickerModal ⏰
@@ -373,14 +377,32 @@ The following custom styles can be supplied to re-style the component in any way
 
 ## Methods 🔄
 
-### TimerPickerModal
+### TimerPicker
+
+The library exposes a TimerPickerRef type, which can be used to type your ref to the picker:
+
+```javascript
+const timerPickerRef = useRef<TimerPickerRef>(null);
+```
+
+It has the following available methods:
 
 `reset` - imperative method to reset the selected duration to their initial values.
 
 ```javascript
-timerPickerModalRef.current.reset();
+timerPickerRef.current.reset(options?: { animated: boolean });
 ```
 
+`setValue` - imperative method to set the selected duration to a particular value
+
+```javascript
+timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: number }, options?: { animated: boolean });
+```
+
+### TimerPickerModal
+
+An identical ref is also exposed for the TimerPickerModal component.
+
 ## License 📝
 
 This project is licensed under the [MIT License](LICENSE).

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

@@ -11,5 +11,6 @@ interface ModalProps {
     overlayStyle?: any;
     testID?: string;
 }
-export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID }: ModalProps) => React.ReactElement;
-export default Modal;
+export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID, }: ModalProps) => React.ReactElement;
+declare const _default: React.MemoExoticComponent<({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID, }: ModalProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

package/dist/components/Modal/index.js

@@ -76,7 +76,7 @@ var Modal = function (_a) {
         react_native_1.Animated.timing(animatedOpacity.current, {
             easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
             // Using native driver in the modal makes the content flash
-            useNativeDriver: false,
+            useNativeDriver: true,
             duration: animationDuration,
             toValue: 1,
         }).start();
@@ -85,7 +85,7 @@ var Modal = function (_a) {
         react_native_1.Animated.timing(animatedOpacity.current, {
             easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
             // Using native driver in the modal makes the content flash
-            useNativeDriver: false,
+            useNativeDriver: true,
             duration: animationDuration,
             toValue: 0,
         }).start(function () {
@@ -118,4 +118,4 @@ var Modal = function (_a) {
         </react_native_1.Modal>);
 };
 exports.Modal = Modal;
-exports.default = exports.Modal;
+exports.default = react_1.default.memo(exports.Modal);

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

@@ -1,6 +1,14 @@
 import React from "react";
 import { View } from "react-native";
 import { generateStyles } from "./TimerPicker.styles";
+export interface DurationScrollRef {
+    reset: (options?: {
+        animated?: boolean;
+    }) => void;
+    setValue: (value: number, options?: {
+        animated?: boolean;
+    }) => void;
+}
 type LinearGradientPoint = {
     x: number;
     y: number;
@@ -11,18 +19,23 @@ export type LinearGradientProps = React.ComponentProps<typeof View> & {
     start?: LinearGradientPoint | null;
     end?: LinearGradientPoint | null;
 };
+export type LimitType = {
+    max?: number;
+    min?: number;
+};
 interface DurationScrollProps {
     numberOfItems: number;
-    label?: string;
-    initialIndex?: number;
+    label?: string | React.ReactElement;
+    initialValue?: number;
     onDurationChange: (duration: number) => void;
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
+    limit?: LimitType;
     padWithNItems: number;
     pickerGradientOverlayProps?: LinearGradientProps;
     LinearGradient?: any;
     testID?: string;
     styles: ReturnType<typeof generateStyles>;
 }
-declare const DurationScroll: ({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, padWithNItems, pickerGradientOverlayProps, LinearGradient, testID, styles, }: DurationScrollProps) => React.ReactElement;
-export default DurationScroll;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DurationScrollProps & React.RefAttributes<DurationScrollRef>>>;
+export default _default;

package/dist/components/TimerPicker/DurationScroll.js

@@ -37,9 +37,13 @@ var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var generateNumbers_1 = require("../../utils/generateNumbers");
 var colorToRgba_1 = require("../../utils/colorToRgba");
-var DurationScroll = function (_a) {
+var getAdjustedLimit_1 = require("../../utils/getAdjustedLimit");
+var getScrollIndex_1 = require("../../utils/getScrollIndex");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var KEY_EXTRACTOR = function (_, index) { return index.toString(); };
+var DurationScroll = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d, _e;
-    var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialIndex, initialIndex = _f === void 0 ? 0 : _f, onDurationChange = _a.onDurationChange, _g = _a.padNumbersWithZero, padNumbersWithZero = _g === void 0 ? false : _g, _h = _a.disableInfiniteScroll, disableInfiniteScroll = _h === void 0 ? false : _h, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
+    var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialValue, initialValue = _f === void 0 ? 0 : _f, onDurationChange = _a.onDurationChange, _g = _a.padNumbersWithZero, padNumbersWithZero = _g === void 0 ? false : _g, _h = _a.disableInfiniteScroll, disableInfiniteScroll = _h === void 0 ? false : _h, limit = _a.limit, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
     var flatListRef = (0, react_1.useRef)(null);
     var data = (0, generateNumbers_1.generateNumbers)(numberOfItems, {
         padWithZero: padNumbersWithZero,
@@ -48,12 +52,99 @@ var DurationScroll = function (_a) {
         padWithNItems: padWithNItems,
     });
     var numberOfItemsToShow = 1 + padWithNItems * 2;
-    var renderItem = function (_a) {
+    var adjustedLimited = (0, getAdjustedLimit_1.getAdjustedLimit)(limit, numberOfItems);
+    var initialScrollIndex = (0, getScrollIndex_1.getScrollIndex)({
+        value: initialValue,
+        numberOfItems: numberOfItems,
+        padWithNItems: padWithNItems,
+        disableInfiniteScroll: disableInfiniteScroll,
+    });
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        reset: function (options) {
+            var _a, _b;
+            (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                animated: (_b = options === null || options === void 0 ? void 0 : options.animated) !== null && _b !== void 0 ? _b : false,
+                index: initialScrollIndex,
+            });
+        },
+        setValue: function (value, options) {
+            var _a, _b;
+            (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                animated: (_b = options === null || options === void 0 ? void 0 : options.animated) !== null && _b !== void 0 ? _b : false,
+                index: (0, getScrollIndex_1.getScrollIndex)({
+                    value: value,
+                    numberOfItems: numberOfItems,
+                    padWithNItems: padWithNItems,
+                    disableInfiniteScroll: disableInfiniteScroll,
+                }),
+            });
+        },
+    }); });
+    var renderItem = (0, react_1.useCallback)(function (_a) {
         var item = _a.item;
+        var intItem = parseInt(item);
         return (<react_native_1.View key={item} style={styles.pickerItemContainer} testID="picker-item">
-            <react_native_1.Text style={styles.pickerItem}>{item}</react_native_1.Text>
-        </react_native_1.View>);
-    };
+                        <react_native_1.Text style={[
+                styles.pickerItem,
+                intItem > adjustedLimited.max ||
+                    intItem < adjustedLimited.min
+                    ? styles.disabledPickerItem
+                    : {},
+            ]}>
+                            {item}
+                        </react_native_1.Text>
+                    </react_native_1.View>);
+    }, [
+        adjustedLimited.max,
+        adjustedLimited.min,
+        styles.disabledPickerItem,
+        styles.pickerItem,
+        styles.pickerItemContainer,
+    ]);
+    var onMomentumScrollEnd = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var newIndex = Math.round(e.nativeEvent.contentOffset.y /
+            styles.pickerItemContainer.height);
+        var newDuration = (disableInfiniteScroll
+            ? newIndex
+            : newIndex + padWithNItems) %
+            (numberOfItems + 1);
+        // check limits
+        if (newDuration > adjustedLimited.max) {
+            var targetScrollIndex = newIndex - (newDuration - adjustedLimited.max);
+            (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                animated: true,
+                index: 
+                // guard against scrolling beyond end of list
+                targetScrollIndex >= 0
+                    ? targetScrollIndex
+                    : adjustedLimited.max - 1,
+            }); // scroll down to max
+            newDuration = adjustedLimited.max;
+        }
+        else if (newDuration < adjustedLimited.min) {
+            var targetScrollIndex = newIndex + (adjustedLimited.min - newDuration);
+            (_b = flatListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToIndex({
+                animated: true,
+                index: 
+                // guard against scrolling beyond end of list
+                targetScrollIndex <= data.length - 1
+                    ? targetScrollIndex
+                    : adjustedLimited.min,
+            }); // scroll up to min
+            newDuration = adjustedLimited.min;
+        }
+        onDurationChange(newDuration);
+    }, [
+        adjustedLimited.max,
+        adjustedLimited.min,
+        data.length,
+        disableInfiniteScroll,
+        numberOfItems,
+        onDurationChange,
+        padWithNItems,
+        styles.pickerItemContainer.height,
+    ]);
     var onViewableItemsChanged = (0, react_1.useCallback)(function (_a) {
         var _b, _c, _d, _e;
         var viewableItems = _a.viewableItems;
@@ -72,6 +163,11 @@ var DurationScroll = function (_a) {
             });
         }
     }, [numberOfItems]);
+    var getItemLayout = (0, react_1.useCallback)(function (_, index) { return ({
+        length: styles.pickerItemContainer.height,
+        offset: styles.pickerItemContainer.height * index,
+        index: index,
+    }); }, [styles.pickerItemContainer.height]);
     var viewabilityConfigCallbackPairs = (0, react_1.useRef)([
         {
             viewabilityConfig: { viewAreaCoveragePercentThreshold: 25 },
@@ -82,42 +178,35 @@ var DurationScroll = function (_a) {
             height: styles.pickerItemContainer.height * numberOfItemsToShow,
             overflow: "hidden",
         }}>
-            <react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={function (_, index) { return ({
-            length: styles.pickerItemContainer.height,
-            offset: styles.pickerItemContainer.height * index,
-            index: index,
-        }); }} initialScrollIndex={(initialIndex % numberOfItems) +
-            numberOfItems +
-            (disableInfiniteScroll ? padWithNItems : 0) -
-            (padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={function (_, index) { return index.toString(); }} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={16} snapToAlignment="start" 
+                <react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={getItemLayout} initialScrollIndex={initialScrollIndex} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={KEY_EXTRACTOR} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={16} snapToAlignment="start" 
     // used in place of snapToOffset due to bug on Android
     snapToOffsets={__spreadArray([], Array(data.length), true).map(function (_, i) { return i * styles.pickerItemContainer.height; })} viewabilityConfigCallbackPairs={!disableInfiniteScroll
             ? viewabilityConfigCallbackPairs === null || viewabilityConfigCallbackPairs === void 0 ? void 0 : viewabilityConfigCallbackPairs.current
-            : undefined} onMomentumScrollEnd={function (e) {
-            var newIndex = Math.round(e.nativeEvent.contentOffset.y /
-                styles.pickerItemContainer.height);
-            onDurationChange((disableInfiniteScroll ? newIndex : newIndex + padWithNItems) %
-                (numberOfItems + 1));
-        }} testID="duration-scroll-flatlist"/>
-            <react_native_1.View style={styles.pickerLabelContainer}>
-                <react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>
-            </react_native_1.View>
-            {LinearGradient ? (<>
-                    <LinearGradient colors={[
+            : undefined} onMomentumScrollEnd={onMomentumScrollEnd} testID="duration-scroll-flatlist"/>
+                <react_native_1.View style={styles.pickerLabelContainer}>
+                    {typeof label === "string" ? (<react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>) : (label !== null && label !== void 0 ? label : null)}
+                </react_native_1.View>
+                {LinearGradient ? (<>
+                        <LinearGradient colors={[
                 (_b = styles.pickerContainer.backgroundColor) !== null && _b !== void 0 ? _b : "white",
                 (0, colorToRgba_1.colorToRgba)({
-                    color: (_c = styles.pickerContainer.backgroundColor) !== null && _c !== void 0 ? _c : "white",
+                    color: (_c = styles.pickerContainer
+                        .backgroundColor) !== null && _c !== void 0 ? _c : "white",
                     opacity: 0,
                 }),
             ]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
-                    <LinearGradient colors={[
+                        <LinearGradient colors={[
                 (0, colorToRgba_1.colorToRgba)({
-                    color: (_d = styles.pickerContainer.backgroundColor) !== null && _d !== void 0 ? _d : "white",
+                    color: (_d = styles.pickerContainer
+                        .backgroundColor) !== null && _d !== void 0 ? _d : "white",
                     opacity: 0,
                 }),
                 (_e = styles.pickerContainer.backgroundColor) !== null && _e !== void 0 ? _e : "white",
-            ]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { bottom: -1 }]}/>
-                </>) : null}
-        </react_native_1.View>);
-};
-exports.default = DurationScroll;
+            ]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[
+                styles.pickerGradientOverlay,
+                { bottom: -1 },
+            ]}/>
+                    </>) : null}
+            </react_native_1.View>);
+});
+exports.default = react_1.default.memo(DurationScroll);

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

@@ -7,6 +7,7 @@ export interface CustomTimerPickerStyles {
     pickerLabel?: any;
     pickerItemContainer?: any;
     pickerItem?: any;
+    disabledPickerItem?: any;
     pickerGradientOverlay?: any;
 }
 export declare const generateStyles: (customStyles: CustomTimerPickerStyles | undefined, options: {
@@ -17,5 +18,6 @@ export declare const generateStyles: (customStyles: CustomTimerPickerStyles | un
     pickerLabel: any;
     pickerItemContainer: any;
     pickerItem: any;
+    disabledPickerItem: any;
     pickerGradientOverlay: any;
 };

package/dist/components/TimerPicker/TimerPicker.styles.js

@@ -32,6 +32,7 @@ var generateStyles = function (customStyles, options) {
         pickerItem: __assign(__assign({ textAlignVertical: "center", fontSize: 25, color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
                 ? DARK_MODE_TEXT_COLOR
                 : LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem),
+        disabledPickerItem: __assign({ opacity: 0.2 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.disabledPickerItem),
         pickerGradientOverlay: __assign({ position: "absolute", left: 0, right: 0, height: options.padWithNItems === 0
                 ? "30%"
                 : ((_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 50) * 0.8 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay),

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

@@ -1,7 +1,20 @@
 import React from "react";
 import { View } from "react-native";
+import { LimitType } from "./DurationScroll";
 import { CustomTimerPickerStyles } from "./TimerPicker.styles";
 import { LinearGradientProps } from "./DurationScroll";
+export interface TimerPickerRef {
+    reset: (options?: {
+        animated?: boolean;
+    }) => void;
+    setValue: (value: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }, options?: {
+        animated?: boolean;
+    }) => void;
+}
 export interface TimerPickerProps {
     onDurationChange?: (duration: {
         hours: number;
@@ -14,9 +27,12 @@ export interface TimerPickerProps {
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
-    hourLabel?: string;
-    minuteLabel?: string;
-    secondLabel?: string;
+    hourLimit?: LimitType;
+    minuteLimit?: LimitType;
+    secondLimit?: LimitType;
+    hourLabel?: string | React.ReactElement;
+    minuteLabel?: string | React.ReactElement;
+    secondLabel?: string | React.ReactElement;
     padWithNItems?: number;
     disableInfiniteScroll?: boolean;
     LinearGradient?: any;
@@ -24,5 +40,5 @@ export interface TimerPickerProps {
     pickerGradientOverlayProps?: LinearGradientProps;
     styles?: CustomTimerPickerStyles;
 }
-declare const TimerPicker: ({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, LinearGradient, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement;
-export default TimerPicker;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerProps & React.RefAttributes<TimerPickerRef>>>;
+export default _default;

package/dist/components/TimerPicker/index.js

@@ -30,12 +30,14 @@ var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var DurationScroll_1 = __importDefault(require("./DurationScroll"));
 var TimerPicker_styles_1 = require("./TimerPicker.styles");
-var TimerPicker = function (_a) {
-    var onDurationChange = _a.onDurationChange, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, LinearGradient = _a.LinearGradient, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
+var TimerPicker = (0, react_1.forwardRef)(function (_a, ref) {
+    var onDurationChange = _a.onDurationChange, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, LinearGradient = _a.LinearGradient, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
     var checkedPadWithNItems = padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
-    var styles = (0, TimerPicker_styles_1.generateStyles)(customStyles, {
-        padWithNItems: checkedPadWithNItems,
-    });
+    var styles = (0, react_1.useMemo)(function () {
+        return (0, TimerPicker_styles_1.generateStyles)(customStyles, {
+            padWithNItems: checkedPadWithNItems,
+        });
+    }, [checkedPadWithNItems, customStyles]);
     var _o = (0, react_1.useState)(initialHours), selectedHours = _o[0], setSelectedHours = _o[1];
     var _p = (0, react_1.useState)(initialMinutes), selectedMinutes = _p[0], setSelectedMinutes = _p[1];
     var _q = (0, react_1.useState)(initialSeconds), selectedSeconds = _q[0], setSelectedSeconds = _q[1];
@@ -47,10 +49,33 @@ var TimerPicker = function (_a) {
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedHours, selectedMinutes, selectedSeconds]);
+    var hoursDurationScrollRef = (0, react_1.useRef)(null);
+    var minutesDurationScrollRef = (0, react_1.useRef)(null);
+    var secondsDurationScrollRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        reset: function (options) {
+            var _a, _b, _c;
+            setSelectedHours(initialHours);
+            setSelectedMinutes(initialMinutes);
+            setSelectedSeconds(initialSeconds);
+            (_a = hoursDurationScrollRef.current) === null || _a === void 0 ? void 0 : _a.reset(options);
+            (_b = minutesDurationScrollRef.current) === null || _b === void 0 ? void 0 : _b.reset(options);
+            (_c = secondsDurationScrollRef.current) === null || _c === void 0 ? void 0 : _c.reset(options);
+        },
+        setValue: function (value, options) {
+            var _a, _b, _c;
+            setSelectedHours(value.hours);
+            setSelectedMinutes(value.minutes);
+            setSelectedSeconds(value.seconds);
+            (_a = hoursDurationScrollRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value.hours, options);
+            (_b = minutesDurationScrollRef.current) === null || _b === void 0 ? void 0 : _b.setValue(value.minutes, options);
+            (_c = secondsDurationScrollRef.current) === null || _c === void 0 ? void 0 : _c.setValue(value.seconds, options);
+        },
+    }); });
     return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer} testID="timer-picker">
-            {!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
-            {!hideMinutes ? (<DurationScroll_1.default numberOfItems={59} label={minuteLabel} initialIndex={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
-            {!hideSeconds ? (<DurationScroll_1.default numberOfItems={59} label={secondLabel} initialIndex={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
-        </react_native_1.View>);
-};
-exports.default = TimerPicker;
+                {!hideHours ? (<DurationScroll_1.default ref={hoursDurationScrollRef} numberOfItems={23} label={hourLabel} initialValue={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={hourLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
+                {!hideMinutes ? (<DurationScroll_1.default ref={minutesDurationScrollRef} numberOfItems={59} label={minuteLabel} initialValue={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={minuteLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
+                {!hideSeconds ? (<DurationScroll_1.default ref={secondsDurationScrollRef} numberOfItems={59} label={secondLabel} initialValue={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={secondLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
+            </react_native_1.View>);
+});
+exports.default = react_1.default.memo(TimerPicker);

package/dist/components/index.d.ts

@@ -3,8 +3,17 @@ import { View, Text } from "react-native";
 import { TimerPickerProps } from "./TimerPicker";
 import Modal from "./Modal";
 import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
-interface TimePickerModalRef {
-    reset: () => void;
+export interface TimerPickerModalRef {
+    reset: (options?: {
+        animated?: boolean;
+    }) => void;
+    setValue: (value: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }, options?: {
+        animated?: boolean;
+    }) => void;
 }
 export interface TimerPickerModalProps extends TimerPickerProps {
     visible: boolean;
@@ -27,5 +36,5 @@ export interface TimerPickerModalProps extends TimerPickerProps {
     modalTitleProps?: React.ComponentProps<typeof Text>;
     styles?: CustomTimerPickerModalStyles;
 }
-declare const TimerPickerModal: React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimePickerModalRef>>;
-export default TimerPickerModal;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimerPickerModalRef>>>;
+export default _default;

package/dist/components/index.js

@@ -32,7 +32,7 @@ var TimerPicker_1 = __importDefault(require("./TimerPicker"));
 var Modal_1 = __importDefault(require("./Modal"));
 var TimerPickerModal_styles_1 = require("./TimerPickerModal.styles");
 var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
-    var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onDurationChange = _a.onDurationChange, closeOnOverlayPress = _a.closeOnOverlayPress, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, _o = _a.hideCancelButton, hideCancelButton = _o === void 0 ? false : _o, _p = _a.confirmButtonText, confirmButtonText = _p === void 0 ? "Confirm" : _p, _q = _a.cancelButtonText, cancelButtonText = _q === void 0 ? "Cancel" : _q, modalTitle = _a.modalTitle, LinearGradient = _a.LinearGradient, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
+    var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onDurationChange = _a.onDurationChange, closeOnOverlayPress = _a.closeOnOverlayPress, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, _o = _a.hideCancelButton, hideCancelButton = _o === void 0 ? false : _o, _p = _a.confirmButtonText, confirmButtonText = _p === void 0 ? "Confirm" : _p, _q = _a.cancelButtonText, cancelButtonText = _q === void 0 ? "Cancel" : _q, modalTitle = _a.modalTitle, LinearGradient = _a.LinearGradient, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
     var styles = (0, TimerPickerModal_styles_1.generateStyles)(customStyles);
     var _r = (0, react_1.useState)({
         hours: initialHours,
@@ -61,8 +61,15 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
         setSelectedDuration(confirmedDuration);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
+    // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
+    var durationChange = (0, react_1.useCallback)(function (duration) {
+        setSelectedDuration(duration);
+        onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange(duration);
+    }, [onDurationChange]);
+    var timerPickerRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
-        reset: function () {
+        reset: function (options) {
+            var _a;
             var initialDuration = {
                 hours: initialHours,
                 minutes: initialMinutes,
@@ -70,7 +77,13 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
             };
             setSelectedDuration(initialDuration);
             setConfirmedDuration(initialDuration);
-            setIsVisible(false);
+            (_a = timerPickerRef.current) === null || _a === void 0 ? void 0 : _a.reset(options);
+        },
+        setValue: function (value, options) {
+            var _a;
+            setSelectedDuration(value);
+            setConfirmedDuration(value);
+            (_a = timerPickerRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value, options);
         },
     }); });
     return (<Modal_1.default isVisible={visible} onOverlayPress={closeOnOverlayPress ? hideModal : undefined} {...modalProps} testID="timer-picker-modal">
@@ -79,10 +92,7 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
                         {modalTitle ? (<react_native_1.Text {...modalTitleProps} style={styles.modalTitle}>
                                 {modalTitle}
                             </react_native_1.Text>) : null}
-                        <TimerPicker_1.default onDurationChange={function (duration) {
-            setSelectedDuration(duration);
-            onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange(duration);
-        }} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} styles={customStyles}/>
+                        <TimerPicker_1.default ref={timerPickerRef} onDurationChange={durationChange} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLimit={hourLimit} minuteLimit={minuteLimit} secondLimit={secondLimit} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} styles={customStyles}/>
                         <react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
                             {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel}>
                                     <react_native_1.Text style={[
@@ -105,4 +115,4 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
                 </react_native_1.View>
             </Modal_1.default>);
 });
-exports.default = TimerPickerModal;
+exports.default = react_1.default.memo(TimerPickerModal);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as TimerPickerModal, TimerPickerModalProps, } from "./components";
-export { default as TimerPicker, TimerPickerProps, } from "./components/TimerPicker";
+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";

package/dist/utils/getAdjustedLimit.d.ts

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

package/dist/utils/getAdjustedLimit.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdjustedLimit = void 0;
+var getAdjustedLimit = function (limit, numberOfItems) {
+    if (!limit || (!limit.max && !limit.min)) {
+        return {
+            max: numberOfItems,
+            min: 0,
+        };
+    }
+    // guard against limits that are out of bounds
+    var adjustedMaxLimit = limit.max
+        ? Math.min(limit.max, numberOfItems)
+        : numberOfItems;
+    var adjustedMinLimit = limit.min ? Math.max(limit.min, 0) : 0;
+    // guard against invalid limits
+    if (adjustedMaxLimit < adjustedMinLimit) {
+        return {
+            max: numberOfItems,
+            min: 0,
+        };
+    }
+    return {
+        max: adjustedMaxLimit,
+        min: adjustedMinLimit,
+    };
+};
+exports.getAdjustedLimit = getAdjustedLimit;

package/dist/utils/getScrollIndex.d.ts

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

package/dist/utils/getScrollIndex.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScrollIndex = void 0;
+var getScrollIndex = function (variables) {
+    var value = variables.value, numberOfItems = variables.numberOfItems, padWithNItems = variables.padWithNItems, disableInfiniteScroll = variables.disableInfiniteScroll;
+    return (((value + numberOfItems) % (numberOfItems * 3)) +
+        (disableInfiniteScroll ? padWithNItems : 0) -
+        (padWithNItems - 1));
+};
+exports.getScrollIndex = getScrollIndex;

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.1.4",
+    "version": "1.2.1",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {