react-native-timer-picker 1.2.0 → 1.2.2

package/README.md

@@ -25,9 +25,12 @@ Works with Expo and bare React Native apps.
     - [TimerPickerModal ⏰](#timerpickermodal-)
         - [Custom Styles 👕](#custom-styles--1)
 - [Methods 🔄](#methods-)
+    - [TimerPicker](#timerpicker)
     - [TimerPickerModal](#timerpickermodal)
 - [License 📝](#license-)
 
+<br>
+
 ## Demos 📱
 
 <p>
@@ -39,6 +42,7 @@ Works with Expo and bare React Native apps.
     <img src="demos/example4.gif" width="250" height="550"/>
 </p>
 
+<br>
 
 ## Peer Dependencies 👶
 
@@ -49,7 +53,9 @@ If you want the numbers to fade in/out at the top and bottom of the picker, you
 -   [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient) (if using Expo)
 -   [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) (if using in a bare React Native project)
 
-To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.
+**To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.**
+
+<br>
 
 ## Installation 🚀
 
@@ -67,6 +73,8 @@ or
 yarn add react-native-timer-picker
 ```
 
+<br>
+
 ## Examples 😎
 
 ### Timer Picker Modal (Dark Mode) 🌚
@@ -295,6 +303,8 @@ return (
 ```
 <img src="demos/example4.gif" width="250" height="550"/>
 
+<br>
+
 ## Props 💅
 
 ### TimerPicker ⏲️
@@ -356,7 +366,8 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️)
 | modalProps            | Props for the main modal component                        | `React.ComponentProps<typeof Modal>`                      | -                   | false    |
 | containerProps        | Props for the main container                              | `React.ComponentProps<typeof View>`                       | -                   | false    |
 | contentContainerProps | Props for the content container                           | `React.ComponentProps<typeof View>`                       | -                   | false    |
-| buttonContainerProps  | Props for the button container                            | `React.ComponentProps<typeof View>`                       | -                   | false    |
+| buttonContainerProps  | Props for the button containers                            | `React.ComponentProps<typeof View>`                       | -                   | false    |
+| buttonTouchableOpacityProps  | Props for the button touchable opacities           | `React.ComponentProps<typeof TouchableOpacity>`           | -                   | false    |
 | modalTitleProps       | Props for the modal title text component                  | `React.ComponentProps<typeof Text>`                       | -                   | false    |
 | styles                | Custom styles for the timer picker modal                  | [CustomTimerPickerModalStyles](#custom-styles--1)          | -                   | false    |
 
@@ -374,15 +385,16 @@ The following custom styles can be supplied to re-style the component in any way
 | confirmButton     | Style for the confirm button           | TextStyle |
 | modalTitle        | Style for the title of the modal       | TextStyle |
 
+<br>
 
 ## Methods 🔄
 
-### TimerPickerModal
+### TimerPicker
 
-The library exposes a TimerPickerModalRef type, which can be used to type your ref to the modal:
+The library exposes a TimerPickerRef type, which can be used to type your ref to the picker:
 
 ```javascript
-const timerPickerModalRef = useRef<TimerPickerModalRef>(null);
+const timerPickerRef = useRef<TimerPickerRef>(null);
 ```
 
 It has the following available methods:
@@ -390,15 +402,21 @@ 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
-timerPickerModalRef.current.setValue({hours: number, minutes: number, seconds: number});
+timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: number }, options?: { animated: boolean });
 ```
 
+### TimerPickerModal
+
+An identical ref is also exposed for the TimerPickerModal component.
+
+<br>
+
 ## License 📝
 
 This project is licensed under the [MIT License](LICENSE).

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;
@@ -18,7 +26,7 @@ export type LimitType = {
 interface DurationScrollProps {
     numberOfItems: number;
     label?: string | React.ReactElement;
-    initialIndex?: number;
+    initialValue?: number;
     onDurationChange: (duration: number) => void;
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
@@ -29,5 +37,5 @@ interface DurationScrollProps {
     testID?: string;
     styles: ReturnType<typeof generateStyles>;
 }
-declare const _default: React.MemoExoticComponent<({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, limit, padWithNItems, pickerGradientOverlayProps, LinearGradient, testID, styles, }: DurationScrollProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DurationScrollProps & React.RefAttributes<DurationScrollRef>>>;
 export default _default;

package/dist/components/TimerPicker/DurationScroll.js

@@ -38,11 +38,12 @@ var react_native_1 = require("react-native");
 var generateNumbers_1 = require("../../utils/generateNumbers");
 var colorToRgba_1 = require("../../utils/colorToRgba");
 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 = function (_a) {
+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, limit = _a.limit, 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,
@@ -52,20 +53,47 @@ var DurationScroll = function (_a) {
     });
     var numberOfItemsToShow = 1 + padWithNItems * 2;
     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={[
+                        <react_native_1.Text style={[
                 styles.pickerItem,
                 intItem > adjustedLimited.max ||
                     intItem < adjustedLimited.min
                     ? styles.disabledPickerItem
                     : {},
             ]}>
-                        {item}
-                    </react_native_1.Text>
-                </react_native_1.View>);
+                            {item}
+                        </react_native_1.Text>
+                    </react_native_1.View>);
     }, [
         adjustedLimited.max,
         adjustedLimited.min,
@@ -77,7 +105,9 @@ var DurationScroll = function (_a) {
         var _a, _b;
         var newIndex = Math.round(e.nativeEvent.contentOffset.y /
             styles.pickerItemContainer.height);
-        var newDuration = (disableInfiniteScroll ? newIndex : newIndex + padWithNItems) %
+        var newDuration = (disableInfiniteScroll
+            ? newIndex
+            : newIndex + padWithNItems) %
             (numberOfItems + 1);
         // check limits
         if (newDuration > adjustedLimited.max) {
@@ -148,33 +178,35 @@ var DurationScroll = function (_a) {
             height: styles.pickerItemContainer.height * numberOfItemsToShow,
             overflow: "hidden",
         }}>
-            <react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={getItemLayout} initialScrollIndex={(initialIndex % numberOfItems) +
-            numberOfItems +
-            (disableInfiniteScroll ? padWithNItems : 0) -
-            (padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={KEY_EXTRACTOR} 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={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={[
+                <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>);
-};
+            ]} 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/index.d.ts

@@ -3,6 +3,18 @@ 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;
@@ -28,5 +40,5 @@ export interface TimerPickerProps {
     pickerGradientOverlayProps?: LinearGradientProps;
     styles?: CustomTimerPickerStyles;
 }
-declare const _default: React.MemoExoticComponent<({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLimit, minuteLimit, secondLimit, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, LinearGradient, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerProps & React.RefAttributes<TimerPickerRef>>>;
 export default _default;

package/dist/components/TimerPicker/index.js

@@ -30,7 +30,7 @@ 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 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, react_1.useMemo)(function () {
@@ -49,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} limit={hourLimit} 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} limit={minuteLimit} 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} limit={secondLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
-        </react_native_1.View>);
-};
+                {!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

@@ -1,14 +1,18 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
 import { TimerPickerProps } from "./TimerPicker";
 import Modal from "./Modal";
 import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
 export interface TimerPickerModalRef {
-    reset: () => void;
+    reset: (options?: {
+        animated?: boolean;
+    }) => void;
     setValue: (value: {
         hours: number;
         minutes: number;
         seconds: number;
+    }, options?: {
+        animated?: boolean;
     }) => void;
 }
 export interface TimerPickerModalProps extends TimerPickerProps {
@@ -29,6 +33,7 @@ export interface TimerPickerModalProps extends TimerPickerProps {
     containerProps?: React.ComponentProps<typeof View>;
     contentContainerProps?: React.ComponentProps<typeof View>;
     buttonContainerProps?: React.ComponentProps<typeof View>;
+    buttonTouchableOpacityProps: React.ComponentProps<typeof TouchableOpacity>;
     modalTitleProps?: React.ComponentProps<typeof Text>;
     styles?: CustomTimerPickerModalStyles;
 }

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, 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 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, buttonTouchableOpacityProps = _a.buttonTouchableOpacityProps, 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,
@@ -66,8 +66,10 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
         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,
@@ -75,11 +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) {
+        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">
@@ -88,20 +92,20 @@ 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={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}/>
+                        <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}>
+                            {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel} {...buttonTouchableOpacityProps}>
                                     <react_native_1.Text style={[
-                styles.cancelButton,
                 styles.button,
+                styles.cancelButton,
             ]}>
                                         {cancelButtonText}
                                     </react_native_1.Text>
                                 </react_native_1.TouchableOpacity>) : null}
-                            <react_native_1.TouchableOpacity onPress={confirm}>
+                            <react_native_1.TouchableOpacity onPress={confirm} {...buttonTouchableOpacityProps}>
                                 <react_native_1.Text style={[
-            styles.confirmButton,
             styles.button,
+            styles.confirmButton,
         ]}>
                                     {confirmButtonText}
                                 </react_native_1.Text>

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as TimerPickerModal, TimerPickerModalProps, TimerPickerModalRef, } from "./components";
-export { default as TimerPicker, TimerPickerProps, } from "./components/TimerPicker";
+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/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.2.0",
+    "version": "1.2.2",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {