TimerSelectMenu

A beautiful, animated, and customizable time picker component for React Native (Expo). Features include a smooth gradient background that transitions between AM/PM states, haptic feedback, and support for both 12-hour and 24-hour formats.

Features

🎨 Dynamic Gradient Background: Smoothly transitions between Day (AM) and Night (PM) color themes.
📱 Native Feel: Includes haptic feedback on selection changes using expo-haptics.
⚙️ Flexible Formats: Supports both 12h and 24h time formats.
🎭 Animations: Built with react-native-reanimated for 60fps animations (scroll snapping, opacity/scale effects, and background transitions).
👆 Interactive: Draggable wheels for Hours, Minutes, and AM/PM (in 12h mode).

Installation

This component requires the following dependencies:

bash

npm install expo-linear-gradient expo-haptics react-native-reanimated react-native-gesture-handler

Usage

It functions as a Modal, so it can be placed anywhere in your component tree.

tsx

import { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { TimerSelectMenu } from '@/components/timer-select-menu';

export default function App() {
  const [visible, setVisible] = useState(false);
  const [selectedTime, setSelectedTime] = useState(new Date());

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Selected: {selectedTime.toLocaleTimeString()}</Text>
      
      <Button title="Pick Time" onPress={() => setVisible(true)} />

      <TimerSelectMenu
        visible={visible}
        onClose={() => setVisible(false)}
        onTimeSelect={(date) => setSelectedTime(date)}
        initialDate={selectedTime}
        timeFormat="12h" // or "24h"
      />
    </View>
  );
}

Props

Prop	Type	Default	Description
`visible`	`boolean`	`false`	Controls the visibility of the modal.
`onClose`	`() => void`	required	Callback function when the modal is requested to close.
`onTimeSelect`	`(date: Date) => void`	required	Callback function returning the selected time as a Date object.
`initialDate`	`Date`	`new Date()`	The time to display when the picker opens.
`timeFormat`	`'12h' \| '24h'`	`'12h'`	The format of the time picker. In `24h` mode, the AM/PM wheel is hidden, but the background gradient still reacts to the time.

Customization

Colors

The component uses defined gradient colors for AM/PM states. You can modify the amColors and pmColors arrays inside TimerSelectMenu in timer-select-menu.tsx to match your branding.

typescript

const amColors = ['#040404', '#007BE5']; // Dark to Blue
const pmColors = ['#007BE5', '#626262']; // Blue to Grey

Architecture

Wheel Component: A reusable scrollable list that handles the snapping logic and visual transformations (opacity/scale) for items.
Background: Two absolute-positioned LinearGradient layers. We keep the AM layer static at the bottom and fade the PM layer in/out on top to ensure seamless transitions without flickering.

Time Select Modal

About