react-native-ruler-date-picker 0.1.0

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "react-native-ruler-date-picker",
+  "version": "0.1.0",
+  "description": "A performant, customizable ruler-style date picker for React Native — 60 FPS Reanimated 3 physics, dual-speed haptic feedback, and windowed tick rendering.",
+  "type": "commonjs",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "clean": "rm -rf lib"
+  },
+  "keywords": [
+    "react-native",
+    "date-picker",
+    "ruler",
+    "scroll-picker",
+    "reanimated",
+    "haptics",
+    "ios",
+    "android",
+    "gesture-handler"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/md-rehman/react-native-ruler-date-picker.git",
+    "directory": "packages/react-native-ruler-date-picker"
+  },
+  "author": "Rehman <md.rehman.dev@gmail.com> (https://md-rehman.dev)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/md-rehman/react-native-ruler-date-picker/issues"
+  },
+  "homepage": "https://github.com/md-rehman/react-native-ruler-date-picker#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-haptics": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-native": "^0.72.0",
+    "eslint": "^8.57.0",
+    "expo-haptics": "^14.0.0",
+    "jest": "^30.5.1",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "react-native-builder-bob": "^0.35.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-reanimated": "^3.16.0",
+    "ts-jest": "^29.4.12",
+    "typescript": "^5.4.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/RulerDatePicker.tsx

@@ -0,0 +1,462 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withDecay,
+  withTiming,
+  useAnimatedReaction,
+  runOnJS,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import type { RulerDatePickerProps, TickData } from './types';
+import { DEFAULTS, MS_PER_DAY } from './defaults';
+import {
+  formatDateString,
+  dateToDayOffset,
+  dayOffsetToDate,
+  useResolvedColors,
+  shouldShowLabel,
+  computeDayRange,
+} from './utils';
+import { useHaptics } from './useHaptics';
+import { Tick } from './Tick';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+
+/**
+ * A performant, customizable ruler-style date picker for React Native.
+ *
+ * Features:
+ * - 60 FPS scrolling via Reanimated 3 decay physics + snap alignment
+ * - Dual-speed haptic feedback engine (discrete ticks vs continuous buzz)
+ * - Windowed tick rendering for memory efficiency
+ * - Fully configurable dimensions, colors, and behaviors
+ *
+ * @example
+ * ```tsx
+ * <RulerDatePicker
+ *   selectedDate={new Date()}
+ *   onSelectDate={(date, dateString) => console.log(dateString)}
+ * />
+ * ```
+ */
+export function RulerDatePicker(props: RulerDatePickerProps) {
+  const {
+    selectedDate,
+    onSelectDate,
+    minDate,
+    maxDate,
+    labelInterval,
+    highlightDays,
+    tickSpacing = DEFAULTS.tickSpacing,
+    tickHeight = DEFAULTS.tickHeight,
+    tickTallHeight = DEFAULTS.tickTallHeight,
+    tickThickness = DEFAULTS.tickThickness,
+    height = DEFAULTS.height,
+    rulerHeight = DEFAULTS.rulerHeight,
+    indicatorWidth = DEFAULTS.indicatorWidth,
+    indicatorHeight = DEFAULTS.indicatorHeight,
+    todayDotSize = DEFAULTS.todayDotSize,
+    labelFontSize = DEFAULTS.labelFontSize,
+    bufferTicks = DEFAULTS.bufferTicks,
+    updateDebounceMs = DEFAULTS.updateDebounceMs,
+    enableHaptics = DEFAULTS.enableHaptics,
+    onHapticTrigger,
+    fastSwipeTickThreshold = DEFAULTS.fastSwipeTickThreshold,
+    continuousHapticIntervalMs = DEFAULTS.continuousHapticIntervalMs,
+    showResetToToday = DEFAULTS.showResetToToday,
+    renderHeader,
+  } = props;
+
+  // ── Resolve colors ──────────────────────────────────────────────────────
+  const colors = useResolvedColors(props);
+
+  // ── Haptics ─────────────────────────────────────────────────────────────
+  const { fireDiscreteHaptic, startContinuousHaptic, stopContinuousHaptic } =
+    useHaptics({
+      enableHaptics,
+      onHapticTrigger,
+      continuousHapticIntervalMs,
+    });
+
+  // ── Reference time (midnight today) ─────────────────────────────────────
+  const todayTime = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+  }, []);
+
+  // ── Date boundaries ─────────────────────────────────────────────────────
+  const { minOffset, maxOffset } = useMemo(
+    () => computeDayRange(todayTime, minDate, maxDate),
+    [todayTime, minDate, maxDate]
+  );
+
+  // ── Initial offset from today ───────────────────────────────────────────
+  const initialOffsetDays = useMemo(() => {
+    return dateToDayOffset(selectedDate, todayTime);
+    // Intentionally only computed once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const halfVisible = Math.ceil(SCREEN_WIDTH / 2 / tickSpacing);
+  const windowSize = halfVisible + bufferTicks;
+
+  // ── Animated values ─────────────────────────────────────────────────────
+  const translateX = useSharedValue(-initialOffsetDays * tickSpacing);
+  const contextX = useSharedValue(0);
+  const previousIndex = useSharedValue(-initialOffsetDays);
+  const isFastMode = useSharedValue(false);
+
+  // ── State ───────────────────────────────────────────────────────────────
+  const initialDateStr = useMemo(() => {
+    const d =
+      typeof selectedDate === 'string'
+        ? new Date(selectedDate)
+        : new Date(selectedDate);
+    d.setHours(0, 0, 0, 0);
+    return formatDateString(d);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [displayDateStr, setDisplayDateStr] = useState(initialDateStr);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [windowCenter, setWindowCenter] = useState(-initialOffsetDays);
+
+  // ── Visible ticks (windowed rendering) ──────────────────────────────────
+  const visibleTicks = useMemo(() => {
+    const ticks: TickData[] = [];
+
+    const start = Math.max(windowCenter - windowSize, minOffset);
+    const end = Math.min(windowCenter + windowSize, maxOffset);
+
+    for (let i = start; i <= end; i++) {
+      const d = new Date(todayTime + i * MS_PER_DAY);
+      ticks.push({
+        offset: i,
+        isLabeled: shouldShowLabel(d, labelInterval, todayTime),
+        isToday: i === 0,
+        isHighlighted: highlightDays
+          ? highlightDays.includes(d.getDay())
+          : false,
+        dateStr: d.getDate().toString(),
+      });
+    }
+    return ticks;
+  }, [
+    windowCenter,
+    windowSize,
+    todayTime,
+    minOffset,
+    maxOffset,
+    labelInterval,
+    highlightDays,
+  ]);
+
+  // ── Tick change callbacks ───────────────────────────────────────────────
+
+  const onTickChanged = useCallback(
+    (index: number, enteringFastMode: boolean) => {
+      if (enteringFastMode) {
+        startContinuousHaptic();
+      } else {
+        stopContinuousHaptic();
+        fireDiscreteHaptic();
+      }
+
+      // Update display date
+      const d = dayOffsetToDate(index, todayTime);
+      const dateStr = formatDateString(d);
+      setWindowCenter((prevCenter) => {
+        if (Math.abs(index - prevCenter) >= 5) {
+          return index;
+        }
+        return prevCenter;
+      });
+
+      // Debounce the heavy onSelectDate callback
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        onSelectDate(d, dateStr);
+      }, updateDebounceMs);
+    },
+    [
+      todayTime,
+      onSelectDate,
+      updateDebounceMs,
+      startContinuousHaptic,
+      stopContinuousHaptic,
+      fireDiscreteHaptic,
+    ]
+  );
+
+  const onAnimationSettled = useCallback(
+    (index: number) => {
+      stopContinuousHaptic();
+      fireDiscreteHaptic();
+      const d = dayOffsetToDate(index, todayTime);
+      const dateStr = formatDateString(d);
+      setDisplayDateStr(dateStr);
+      setWindowCenter(index);
+      onSelectDate(d, dateStr);
+    },
+    [todayTime, onSelectDate, stopContinuousHaptic, fireDiscreteHaptic]
+  );
+
+  // ── Animated reaction ───────────────────────────────────────────────────
+  useAnimatedReaction(
+    () => Math.round(-translateX.value / tickSpacing),
+    (index, prev) => {
+      if (
+        index !== prev &&
+        index >= minOffset &&
+        index <= maxOffset
+      ) {
+        previousIndex.value = index;
+        const ticksSkipped = prev !== null ? Math.abs(index - prev) : 1;
+        const shouldBeFast = ticksSkipped > fastSwipeTickThreshold;
+
+        if (shouldBeFast && !isFastMode.value) {
+          isFastMode.value = true;
+          runOnJS(onTickChanged)(index, true);
+        } else if (!shouldBeFast && isFastMode.value) {
+          isFastMode.value = false;
+          runOnJS(onTickChanged)(index, false);
+        } else if (!shouldBeFast) {
+          runOnJS(onTickChanged)(index, false);
+        }
+        if (shouldBeFast && isFastMode.value) {
+          runOnJS(onTickChanged)(index, true);
+        }
+      }
+    },
+    [tickSpacing, minOffset, maxOffset, fastSwipeTickThreshold]
+  );
+
+  // ── Pan gesture ─────────────────────────────────────────────────────────
+  const pan = Gesture.Pan()
+    .onStart(() => {
+      contextX.value = translateX.value;
+    })
+    .onUpdate((event) => {
+      translateX.value = contextX.value + event.translationX;
+    })
+    .onEnd((event) => {
+      translateX.value = withDecay(
+        {
+          velocity: event.velocityX,
+          deceleration: 0.99,
+        },
+        (finished) => {
+          if (finished) {
+            const maxTranslateX = -minOffset * tickSpacing;
+            const minTranslateX = -maxOffset * tickSpacing;
+            const clampedX = Math.min(
+              Math.max(translateX.value, minTranslateX),
+              maxTranslateX
+            );
+            const snappedIndex = Math.round(clampedX / tickSpacing);
+            const snappedX = snappedIndex * tickSpacing;
+            translateX.value = withTiming(
+              snappedX,
+              { duration: 150 },
+              (done) => {
+                if (done) {
+                  isFastMode.value = false;
+                  const index = Math.round(-snappedX / tickSpacing);
+                  runOnJS(onAnimationSettled)(index);
+                }
+              }
+            );
+          }
+        }
+      );
+    });
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
+    [translateX]
+  );
+
+  // ── Header ──────────────────────────────────────────────────────────────
+  const displayDate = new Date(displayDateStr);
+  const displayFormat = displayDate.toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  });
+  const displayYear = displayDate.getFullYear();
+  const currentYear = new Date().getFullYear();
+  const showYear = displayYear !== currentYear;
+  const isTodaySelected =
+    displayDateStr === formatDateString(new Date(todayTime));
+
+  const handleResetToToday = useCallback(() => {
+    stopContinuousHaptic();
+    translateX.value = withTiming(0, { duration: 300 });
+    const todayStr = formatDateString(new Date(todayTime));
+    setDisplayDateStr(todayStr);
+    setWindowCenter(0);
+    onSelectDate(new Date(todayTime), todayStr);
+  }, [todayTime, onSelectDate, stopContinuousHaptic, translateX]);
+
+  // ── Render ──────────────────────────────────────────────────────────────
+  return (
+    <View
+      style={[
+        styles.container,
+        { height, backgroundColor: colors.backgroundColor },
+      ]}
+    >
+      {/* Header */}
+      {renderHeader ? (
+        renderHeader(displayDate, isTodaySelected, handleResetToToday)
+      ) : (
+        <View style={styles.headerContainer}>
+          <View style={styles.dateHeader}>
+            <Text
+              style={[styles.yearText, { color: colors.labelColor }]}
+            >
+              {showYear ? displayYear : ''}
+            </Text>
+            <Text
+              style={[
+                styles.dateText,
+                { color: colors.accentColor },
+              ]}
+            >
+              {displayFormat}
+            </Text>
+          </View>
+
+          {showResetToToday && !isTodaySelected && (
+            <TouchableOpacity
+              onPress={handleResetToToday}
+              style={styles.resetBtn}
+            >
+              <Text
+                style={[
+                  styles.resetText,
+                  { color: colors.accentColor },
+                ]}
+              >
+                Today
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {/* Ruler */}
+      <GestureDetector gesture={pan}>
+        <View style={[styles.rulerContainer, { height: rulerHeight }]}>
+          <View
+            style={[
+              styles.centerIndicator,
+              {
+                backgroundColor: colors.indicatorColor,
+                width: indicatorWidth,
+                height: indicatorHeight,
+              },
+            ]}
+          />
+
+          <Animated.View style={[styles.ticksWrapper, animatedStyle]}>
+            {visibleTicks.map((tick: TickData) => (
+              <Tick
+                key={tick.offset}
+                offset={tick.offset}
+                isLabeled={tick.isLabeled}
+                isToday={tick.isToday}
+                isHighlighted={tick.isHighlighted}
+                dateStr={tick.dateStr}
+                tickSpacing={tickSpacing}
+                tickHeight={tickHeight}
+                tickTallHeight={tickTallHeight}
+                tickThickness={tickThickness}
+                tickColor={colors.tickColor}
+                tickTallColor={colors.tickTallColor}
+                labelColor={colors.labelColor}
+                accentColor={colors.accentColor}
+                todayDotSize={todayDotSize}
+                labelFontSize={labelFontSize}
+                rulerHeight={rulerHeight}
+              />
+            ))}
+          </Animated.View>
+        </View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    paddingHorizontal: 20,
+    marginBottom: 20,
+    height: 40,
+  },
+  dateHeader: {
+    alignItems: 'center',
+  },
+  yearText: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  dateText: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  resetBtn: {
+    position: 'absolute',
+    right: 20,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  resetText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  rulerContainer: {
+    width: SCREEN_WIDTH,
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  centerIndicator: {
+    position: 'absolute',
+    zIndex: 10,
+    bottom: 0,
+  },
+  ticksWrapper: {
+    position: 'absolute',
+    height: '100%',
+    width: 0,
+    left: SCREEN_WIDTH / 2,
+  },
+});

package/src/Tick.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { ResolvedColors } from './types';
+
+export interface TickProps {
+  offset: number;
+  isLabeled: boolean;
+  isToday: boolean;
+  isHighlighted: boolean;
+  dateStr: string;
+  tickSpacing: number;
+  tickHeight: number;
+  tickTallHeight: number;
+  tickThickness: number;
+  tickColor: string;
+  tickTallColor: string;
+  labelColor: string;
+  accentColor: string;
+  todayDotSize: number;
+  labelFontSize: number;
+  rulerHeight: number;
+}
+
+/**
+ * Memoized single tick component.
+ * Renders a vertical bar with optional label and today dot indicator.
+ * Small and large ticks can be independently colored.
+ */
+export const Tick = React.memo(function Tick({
+  offset,
+  isLabeled,
+  isToday,
+  dateStr,
+  tickSpacing,
+  tickHeight,
+  tickTallHeight,
+  tickThickness,
+  tickColor,
+  tickTallColor,
+  labelColor,
+  accentColor,
+  todayDotSize,
+  labelFontSize,
+  rulerHeight,
+}: TickProps) {
+  const resolvedTickColor = isLabeled ? tickTallColor : tickColor;
+  const resolvedTickHeight = isLabeled ? tickTallHeight : tickHeight;
+
+  return (
+    <View
+      style={[
+        styles.tickContainer,
+        {
+          width: tickSpacing,
+          height: rulerHeight,
+          position: 'absolute',
+          left: offset * tickSpacing - tickSpacing / 2,
+        },
+      ]}
+    >
+      {isLabeled && (
+        <Text style={[styles.tickLabel, { color: labelColor, fontSize: labelFontSize }]}>
+          {dateStr}
+        </Text>
+      )}
+      {isToday && (
+        <View
+          style={[
+            styles.todayDot,
+            {
+              backgroundColor: accentColor,
+              width: todayDotSize,
+              height: todayDotSize,
+              borderRadius: todayDotSize / 2,
+            },
+          ]}
+        />
+      )}
+      <View
+        style={{
+          backgroundColor: resolvedTickColor,
+          width: tickThickness,
+          height: resolvedTickHeight,
+          borderRadius: tickThickness / 2,
+        }}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  tickContainer: {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  tickLabel: {
+    position: 'absolute',
+    top: 10,
+  },
+  todayDot: {
+    position: 'absolute',
+    top: 25,
+  },
+});