### Install React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Installs the react-native-timer-picker package using either npm or yarn. This is the primary step to include the component in your React Native project.

```bash
npm install react-native-timer-picker
```

```bash
yarn add react-native-timer-picker
```

--------------------------------

### Install Expo Linear Gradient

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Installs the expo-linear-gradient package, which is a peer dependency for enabling fade-out effects in the timer picker when using Expo.

```bash
npm install expo-linear-gradient
```

--------------------------------

### Install Masked View

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Installs the @react-native-masked-view/masked-view package, a peer dependency required for implementing fade-out effects on a transparent background within the timer picker.

```bash
npm install @react-native-masked-view/masked-view
```

--------------------------------

### Install React Native Linear Gradient

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Installs the react-native-linear-gradient package, a peer dependency for enabling fade-out effects in the timer picker for bare React Native projects.

```bash
npm install react-native-linear-gradient
```

--------------------------------

### Timer Picker Modal Dark Mode Example

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet shows a complete React Native component that utilizes the TimerPickerModal. It handles the visibility of the modal, formats the picked time, and updates the UI to display the set alarm. It also includes necessary imports and state management.

```jsx
import { TimerPickerModal } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<string | null>(null);

const formatTime = ({
    hours,
    minutes,
    seconds,
}: {
    hours?: number;
    minutes?: number;
    seconds?: number;
}) => {
    const timeParts = [];

    if (hours !== undefined) {
        timeParts.push(hours.toString().padStart(2, "0"));
    }
    if (minutes !== undefined) {
        timeParts.push(minutes.toString().padStart(2, "0"));
    }
    if (seconds !== undefined) {
        timeParts.push(seconds.toString().padStart(2, "0"));
    }

    return timeParts.join(":");
};

return (
    <View style={{backgroundColor: "#514242", alignItems: "center", justifyContent: "center"}}>
        <Text style={{fontSize: 18, color: "#F1F1F1"}}>
            {alarmStringExample !== null
                ? "Alarm set for"
                : "No alarm set"}
        </Text>
        <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => setShowPicker(true)}>
            <View style={{alignItems: "center"}}>
                {alarmString !== null ? (
                    <Text style={{color: "#F1F1F1", fontSize: 48}}>
                        {alarmString}
                    </Text>
                ) : null}
                <TouchableOpacity
                    activeOpacity={0.7}
                    onPress={() => setShowPicker(true)}>
                    <View style={{marginTop: 30}}>
                        <Text
                            style={{
                                paddingVertical: 10,
                                paddingHorizontal: 18,
                                borderWidth: 1,
                                borderRadius: 10,
                                fontSize: 16,
                                overflow: "hidden",
                                borderColor: "#C2C2C2",
                                color: "#C2C2C2"
                                }}>
                            {"Set Alarm 🔔"}
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>
        <TimerPickerModal
            visible={showPicker}
            setIsVisible={setShowPicker}
            onConfirm={(pickedDuration) => {
                setAlarmString(formatTime(pickedDuration));
                setShowPicker(false);
            }}
            modalTitle="Set Alarm"
            onCancel={() => setShowPicker(false)}
            closeOnOverlayPress
            LinearGradient={LinearGradient}
            styles={{
                theme: "dark",
            }}
            modalProps={{
                overlayOpacity: 0.2,
            }}
        />
    </View>
)

```

--------------------------------

### React Native Timer Picker Light Mode Customisation

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet demonstrates how to use the TimerPicker component from 'react-native-timer-picker' with custom styles for a light mode theme. It includes options to set padding, hide hours, define custom labels for minutes and seconds, and integrate a LinearGradient component for visual effects. The example also shows basic state management for showing the picker and an alarm string.

```jsx
import { TimerPicker } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
        <TimerPicker
            padWithNItems={3}
            hideHours
            minuteLabel="min"
            secondLabel="sec"
            LinearGradient={LinearGradient}
            styles={{
                theme: "light",
                pickerItem: {
                    fontSize: 34,
                },
                pickerLabel: {
                    fontSize: 26,
                    right: -20,
                },
                pickerLabelContainer: {
                    width: 60,
                },
                pickerItemContainer: {
                    width: 150,
                },
            }}
        />
    </View>
)
```

--------------------------------

### Timer Picker with Transparent Fade-Out (Dark Mode) in React Native

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This example showcases the TimerPicker component for an inline time selection with a dark mode theme and a transparent fade-out effect. It utilizes MaskedView for the fade-out and LinearGradient for the background. Custom styles are applied to the picker items and labels for a distinct visual appearance.

```jsx
import { TimerPicker } from "react-native-timer-picker";
import MaskedView from "@react-native-masked-view/masked-view"; // for transparent fade-out
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

return (
    <LinearGradient
        colors={["#202020", "#220578"]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={{alignItems: "center", justifyContent: "center"}}>
        <TimerPicker
            padWithNItems={2}
            hourLabel=":"
            minuteLabel=":"
            secondLabel=""
            LinearGradient={LinearGradient}
            MaskedView={MaskedView}
            styles={{
                theme: "dark",
                backgroundColor: "transparent", // transparent fade-out
                pickerItem: {
                    fontSize: 34,
                },
                pickerLabel: {
                    fontSize: 32,
                    marginTop: 0,
                },
                pickerContainer: {
                    marginRight: 6,
                },
                pickerItemContainer: {
                    width: 100
                },
                pickerLabelContainer: {
                    right: -20,
                    top: 0,
                    bottom: 6,
                    width: 40,
                    alignItems: "center",
                },
            }}
        />
    </LinearGradient>
)

```

--------------------------------

### Implement Picker Feedback Callback

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Provide a callback function for audio or haptic feedback whenever the picker's value changes. This allows for custom feedback experiences.

```javascript
pickerFeedback: () => void | Promise<void>
```

--------------------------------

### Utilize FlatList for Timer Picker Implementation

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

The FlatList component from 'react-native' is used internally to implement the day, hour, minute, and second pickers. Further customization details are available.

```javascript
FlatList: FlatList from 'react-native'
```

--------------------------------

### Implement Custom Picker Feedback

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet shows how to implement custom audio and haptic feedback for the TimerPicker component. It includes setting up audio context and decoding audio data, triggering haptic feedback for Expo and bare React Native apps, and connecting these functionalities to the `pickerFeedback` prop.

```jsx
import { useCallback, useRef, useEffect } from "react";
import { TimerPicker } from "react-native-timer-picker";

import { AudioContext, type AudioBuffer } from "react-native-audio-api";
import * as Haptics from 'expo-haptics'; // Expo apps
import { trigger } from 'react-native-haptic-feedback'; // Bare RN apps

// see examples/example-expo and examples/example-bare for how to load a local sound
import { getClickSound } from "./utils/getClickSound";

const audioContextRef = useRef<AudioContext | null>(null);
const audioBufferRef = useRef<AudioBuffer | null>(null);

useEffect(() => {
    const setupAudio = async () => {
        try {
            const context = new AudioContext();
            const arrayBuffer = await getClickSound();
            const buffer = await context.decodeAudioData(arrayBuffer);

            audioContextRef.current = context;
            audioBufferRef.current = buffer;
        } catch (error) {
            console.warn("Audio setup failed:", error);
        }
    };

    setupAudio();

    return () => {
        audioContextRef.current?.close();
    };
}, []);

const pickerFeedback = useCallback(() => {
    try {
        // Audio
        const context = audioContextRef.current;
        const buffer = audioBufferRef.current;

        if (!context || !buffer) {
            console.warn("Audio not initialized");
            return;
        }

        const playerNode = context.createBufferSource();
        playerNode.buffer = buffer;
        playerNode.connect(context.destination);
        playerNode.start(context.currentTime);

        // Haptics (Expo apps)
        Haptics.selectionAsync();
        // Hatpics (Bare RN apps)
        trigger('selection');
    } catch {
        console.warn("Picker feedback failed");
    }
}, [])

<TimerPicker
    {...props}
    pickerFeedback={pickerFeedback}
/>
```

--------------------------------

### Configure Timer Picker Padding

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Control whether single-digit minutes and seconds are padded with a leading zero in the timer picker. This ensures consistent formatting for time displays.

```JavaScript
padMinutesWithZero: true
padSecondsWithZero: true
```

--------------------------------

### Typing TimerPickerRef in React Native

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Demonstrates how to correctly type a ref to the TimerPicker component using the TimerPickerRef type. This ensures type safety when accessing component methods.

```typescript
const timerPickerRef = useRef < TimerPickerRef > null;
```

--------------------------------

### Configure Minute Limits in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Control the range of selectable minutes using the `minuteLimit` prop. This prop accepts an object with optional `max` and `min` number values to set the boundaries for minute selection.

```javascript
minuteLimit: {
  max?: Number,
  min?: Number
}
```

--------------------------------

### Deprecated Expo Haptics for Timer Picker Feedback

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Deprecated Expo Haptics namespace for audio/haptic feedback. It is recommended to use the 'pickerFeedback' prop instead for new implementations.

```javascript
Haptics: Expo Haptics Namespace (Deprecated)
```

--------------------------------

### Deprecated Custom Click Sound Asset for Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Deprecated option to provide a custom sound asset for click sounds, previously required for offline functionality. Use 'pickerFeedback' instead.

```javascript
clickSoundAsset: require(.../somefolderpath) or {uri: www.someurl} (Deprecated)
```

--------------------------------

### Import MaskedView for Transparent Fade-Out

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Imports the MaskedView component from its package. This is necessary when you want to achieve a fade-out effect on a transparent background, typically used with a linear gradient.

```javascript
import MaskedView from "@react-native-masked-view/masked-view";
```

--------------------------------

### Configure Second Limits in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Specify the maximum and minimum values for the seconds picker. The `secondLimit` prop accepts an object with `max` and `min` properties to define the allowed range for seconds.

```javascript
secondLimit: {
  max?: Number,
  min?: Number
}
```

--------------------------------

### Configure Hour Repetition in Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Define how many times the list of hours is repeated in the picker. This allows for a customizable scrolling experience when selecting hours.

```JavaScript
repeatHourNumbersNTimes: 7
```

--------------------------------

### Deprecated Expo AV Audio for Timer Picker Feedback

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Deprecated Expo AV Audio Class for audio feedback. The 'pickerFeedback' prop is the preferred method for handling audio feedback.

```javascript
Audio: Expo AV Audio Class (Deprecated)
```

--------------------------------

### Configure Day Limits in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Set maximum and minimum limits for the days selection in the timer picker. This prop accepts an object with optional `max` and `min` number properties to define the selectable range.

```javascript
dayLimit: {
  max?: Number,
  min?: Number
}
```

--------------------------------

### TimerPicker Props - React Native

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet details the various props available for the TimerPicker component in React Native. It covers properties for setting initial values, controlling the visibility and disabled state of time units (days, hours, minutes, seconds), and handling duration changes via a callback function.

```typescript
interface TimerPickerProps {
  onDurationChange?: (duration: { days: number; hours: number; minutes: number; seconds: number }) => void;
  initialValue?: { days?: number; hours?: number; minutes?: number; seconds?: number };
  hideDays?: boolean;
  hideHours?: boolean;
  hideMinutes?: boolean;
  hideSeconds?: boolean;
  daysPickerIsDisabled?: boolean;
  hoursPickerIsDisabled?: boolean;
  minutesPickerIsDisabled?: boolean;
  secondsPickerIsDisabled?: boolean;
}
```

--------------------------------

### Configure Hour Limits in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Define the selectable range for the hours in the timer picker. The `hourLimit` prop takes an object where `max` and `min` can be specified as numbers to constrain the hour selection.

```javascript
hourLimit: {
  max?: Number,
  min?: Number
}
```

--------------------------------

### Setting TimerPicker Value Imperatively

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Illustrates how to imperatively set a specific duration (hours, minutes, seconds) for the TimerPicker. An optional 'animated' boolean can control the transition.

```javascript
timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: number }, options?: { animated: boolean });
```

--------------------------------

### TimerPickerModal Component Props

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

The TimerPickerModal component accepts standard TimerPicker props along with specific props for modal control. These include visibility management, confirmation and cancellation callbacks, custom button texts, and various props for customizing the modal's appearance and behavior through React Native's View and Modal components.

```typescript
interface TimerPickerModalProps extends TimerPickerProps {
  visible: boolean;
  setIsVisible: (isVisible: boolean) => void;
  onConfirm: ({ hours, minutes, seconds }: { hours: number; minutes: number; seconds: number }) => void;
  onCancel?: () => void;
  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>;
  modalTitleProps?: React.ComponentProps<typeof Text>;
  styles?: CustomTimerPickerModalStyles;
}
```

--------------------------------

### Set Timer Picker Padding Count

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Specify the number of items to pad the timer picker with on either side. This can help create a smoother scrolling experience by providing more context.

```JavaScript
padWithNItems: 1
```

--------------------------------

### Configure Day Repetition in Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Set the number of times the list of days is repeated within the picker. This can be used to create a continuous scrolling effect for selecting days.

```JavaScript
repeatDayNumbersNTimes: 3
```

--------------------------------

### Set Maximum Minutes in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Set the highest selectable value for the minutes picker. The `maximumMinutes` prop accepts a number to define the upper limit for minute selection.

```javascript
maximumMinutes: Number
```

--------------------------------

### Custom TimerPickerModal Styles

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Allows for extensive customization of the TimerPickerModal's appearance. Developers can override default styles for the main container, content container, button container, individual buttons (cancel and confirm), and the modal title using React Native's ViewStyle and TextStyle.

```typescript
interface CustomTimerPickerModalStyles {
  container?: ViewStyle;
  contentContainer?: ViewStyle;
  buttonContainer?: ViewStyle;
  button?: TextStyle;
  cancelButton?: TextStyle;
  confirmButton?: TextStyle;
  modalTitle?: TextStyle;
}
```

--------------------------------

### Resetting TimerPicker Imperatively

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Shows how to imperatively reset the TimerPicker to its initial duration values. An optional 'animated' boolean can be passed to control the reset animation.

```javascript
timerPickerRef.current.reset(options?: { animated: boolean });
```

--------------------------------

### Implement Linear Gradient for Timer Picker Fade-out

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Utilize Linear Gradient components for the picker's fade-out effect. This requires either 'expo-linear-gradient' or 'react-native-linear-gradient'.

```javascript
LinearGradient: Component from 'expo-linear-gradient' or 'react-native-linear-gradient'
```

--------------------------------

### Implement Masked View for Timer Picker Fade-out

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Use the Masked View component for fade-out effects on transparent backgrounds. This is a dependency for achieving specific visual styles.

```javascript
MaskedView: Component from '@react-native-masked-view/masked-view'
```

--------------------------------

### Timer Picker Modal (Light Mode) in React Native

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet demonstrates how to use the TimerPickerModal component for setting an alarm in a light mode theme. It includes state management for visibility and the selected alarm time, along with a custom time formatting function. The modal is configured to close on overlay press and utilize a 12-hour picker, with LinearGradient for styling.

```jsx
import { TimerPickerModal } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"

....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
        string | null
    >(null);

const formatTime = ({
    hours,
    minutes,
    seconds,
}: {
    hours?: number;
    minutes?: number;
    seconds?: number;
}) => {
    const timeParts = [];

    if (hours !== undefined) {
        timeParts.push(hours.toString().padStart(2, "0"));
    }
    if (minutes !== undefined) {
        timeParts.push(minutes.toString().padStart(2, "0"));
    }
    if (seconds !== undefined) {
        timeParts.push(seconds.toString().padStart(2, "0"));
    }

    return timeParts.join(":");
};

return (
    <View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
        <Text style={{fontSize: 18, color: "#202020">
            {alarmStringExample !== null
                ? "Alarm set for"
                : "No alarm set"}
        </Text>
        <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => setShowPicker(true)}>
            <View style={{alignItems: "center"}}>
                {alarmString !== null ? (
                    <Text style={{color: "#202020", fontSize: 48}}>
                        {alarmString}
                    </Text>
                ) : null}
                <TouchableOpacity
                    activeOpacity={0.7}
                    onPress={() => setShowPicker(true)}>
                    <View style={{marginTop: 30}}>
                        <Text
                            style={{
                                paddingVertical: 10,
                            paddingHorizontal: 18,
                            borderWidth: 1,
                            borderRadius: 10,
                            fontSize: 16,
                            overflow: "hidden",
                            borderColor: "#8C8C8C",
                            color: "#8C8C8C"
                            }}>
                            Set Alarm 🔔
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        </TouchableOpacity>
        <TimerPickerModal
            visible={showPicker}
            setIsVisible={setShowPicker}
            onConfirm={(pickedDuration) => {
                setAlarmString(formatTime(pickedDuration));
                setShowPicker(false);
            }}
            modalTitle="Set Alarm"
            onCancel={() => setShowPicker(false)}
            closeOnOverlayPress
            use12HourPicker
            LinearGradient={LinearGradient}
            styles={{
                theme: "light",
            }}
        />
    </View>
)

```

--------------------------------

### Set Maximum Hours in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Define the highest value for the hours picker using the `maximumHours` prop. This prop takes a number to set the upper bound for hour selection.

```javascript
maximumHours: Number
```

--------------------------------

### Set Maximum Seconds in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Define the highest value for the seconds picker using the `maximumSeconds` prop. This prop accepts a number to set the upper bound for second selection.

```javascript
maximumSeconds: Number
```

--------------------------------

### Configure Repeat Numbers for Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Set the number of times the list of minutes or seconds is repeated in the picker. This controls the scrolling behavior for time selection.

```javascript
repeatMinuteNumbersNTimes: Number
repeatSecondNumbersNTimes: Number
```

--------------------------------

### Integrate Custom FlatList with TimerPicker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

This snippet shows how to pass a custom FlatList component, specifically from 'react-native-gesture-handler', to the TimerPicker component. This is useful for resolving conflicts with other scrollable components like bottom sheets.

```jsx
import { FlatList } from 'react-native-gesture-handler';
import { TimerPicker } from "react-native-timer-picker";

// ...

<TimerPicker
    {...props}
    FlatList={FlatList}
/>

```

--------------------------------

### Enable Aggressive Duration Update

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

When set to true, this option prompts the DurationScroll component to aggressively update the latestDuration ref. This is useful for ensuring the most current duration is always captured.

```JavaScript
aggressivelyGetLatestDuration: true
```

--------------------------------

### Set Maximum Days in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Set the highest selectable value for the days picker. The `maximumDays` prop accepts a number to define the upper limit for day selection.

```javascript
maximumDays: Number
```

--------------------------------

### Use 12-Hour Picker Format

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Switch the hour picker to a 12-hour format, including AM/PM labels. This provides a more familiar time display for users accustomed to this format.

```JavaScript
use12HourPicker: true
amLabel: "AM"
pmLabel: "PM"
```

--------------------------------

### Allow Font Scaling in Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Enable or disable font scaling within the timer picker to respect the user's accessibility settings. When true, the text size will adjust based on the device's font size preferences.

```JavaScript
allowFontScaling: true
```

--------------------------------

### Accessing Latest Duration from TimerPicker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Explains how to access the latest duration values (hours, minutes, seconds) from the TimerPicker ref. This functionality requires 'aggressivelyGetLatestDuration' to be true and is useful for capturing values during rapid scrolling.

```javascript
const latestDuration = timerPickerRef.current?.latestDuration;
const newDuration = {
    hours: latestDuration?.hours?.current,
    minutes: latestDuration?.minutes?.current,
    seconds: latestDuration?.seconds?.current,
};
```

--------------------------------

### Disable Minutes Picker in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Disable the minutes selection component in the timer picker. Set the `minutesPickerIsDisabled` prop to `true` to disable it.

```javascript
minutesPickerIsDisabled: Boolean
```

--------------------------------

### Disable Seconds Picker in React Native Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Disable the seconds selection component in the timer picker. Set the `secondsPickerIsDisabled` prop to `true` to disable it.

```javascript
secondsPickerIsDisabled: Boolean
```

--------------------------------

### Disable Infinite Scroll in Timer Picker

Source: https://github.com/troberts-28/react-native-timer-picker/blob/main/README.md

Disable the infinite scroll feature for the timer picker. This prevents the picker from continuously looping through values.

```javascript
disableInfiniteScroll: Boolean
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.