Add TimeRange component: Implement time selection with smooth scrolling and date formatting

Author: ngocdevv

App.tsx

@@ -3,10 +3,26 @@ import { StyleSheet, View } from 'react-native';
 import { useRef } from 'react';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useSharedValue } from 'react-native-reanimated';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { BottomTab } from './src/components/bottom-tab';
 import { CircularDraggableSlider, CircularDraggableSliderRefType } from './src/components/circle-time';
+import { TimeRange } from './src/components/time-range';
+
+// Handle timezone offset to ensure correct time display
+// Note: This is a simple implementation. For production, consider using a proper timezone library
+const TimezoneOffsetMs = -new Date().getTimezoneOffset() * 60000;
+
+/**
+ * Generate an array of time slots for the time range selector
+ * Creates 20 time slots starting from 13:00 with 30-minute intervals
+ */
+const dates = new Array(20).fill(0).map((_, index) => {
+  const hour = Math.floor(index / 2) + 13;
+  const minutes = index % 2 === 0 ? 0 : 30;
+  return new Date(2025, 0, 1, hour, minutes);
+});
+
 
 
 const LinesAmount = 200;
@@ -16,17 +32,18 @@ export default function App() {
   const previousTick = useSharedValue(0);
 
   const circularSliderRef = useRef<CircularDraggableSliderRefType>(null);
+  const date = useSharedValue(dates[0].getTime());
+
+  const clockDate = useDerivedValue(() => {
+    'worklet';
+    return date.value + TimezoneOffsetMs;
+  });
 
   return (
     <SafeAreaProvider>
       <GestureHandlerRootView style={{ flex: 1 }}>
         <View style={{ flex: 1 }}>
           <View style={styles.container}>
-            <View
-              style={{
-                marginBottom: 256,
-              }}>
-            </View>
             <CircularDraggableSlider
               ref={circularSliderRef}
               bigLineIndexOffset={10}
@@ -53,6 +70,13 @@ export default function App() {
                 animatedNumber.value = sliderProgress;
               }}
             />
+            <TimeRange
+              dates={dates}
+              onDateChange={updatedDate => {
+                'worklet';
+                date.value = updatedDate;
+              }}
+            />
           </View>
           <BottomTab />
         </View>
@@ -78,9 +102,9 @@ const styles = StyleSheet.create({
     right: 32,
   },
   container: {
+    flexDirection: "row",
     alignItems: 'center',
     backgroundColor: '#000',
     flex: 1,
-    justifyContent: 'center',
   },
 });

bun.lock

@@ -9,11 +9,13 @@
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
         "@shopify/react-native-skia": "^2.2.12",
+        "date-fns": "^4.1.0",
         "expo": "~54.0.20",
         "expo-constants": "~18.0.10",
         "expo-font": "~14.0.9",
         "expo-haptics": "~15.0.7",
         "expo-image": "~3.0.10",
+        "expo-linear-gradient": "^15.0.7",
         "expo-linking": "~8.0.8",
         "expo-splash-screen": "~31.0.10",
         "expo-status-bar": "~3.0.8",
@@ -736,6 +738,8 @@
 
     "data-view-byte-offset": ["[email protected]", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "date-fns": ["[email protected]", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decode-uri-component": ["[email protected]", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],
@@ -862,6 +866,8 @@
 
     "expo-keep-awake": ["[email protected]", "", { "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-CgBNcWVPnrIVII5G54QDqoE125l+zmqR4HR8q+MQaCfHet+dYpS5vX5zii/RMayzGN4jPgA4XYIQ28ePKFjHoA=="],
 
+    "expo-linear-gradient": ["[email protected]", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-yF+y+9Shpr/OQFfy/wglB/0bykFMbwHBTuMRa5Of/r2P1wbkcacx8rg0JsUWkXH/rn2i2iWdubyqlxSJa3ggZA=="],
+
     "expo-linking": ["[email protected]", "", { "dependencies": { "expo-constants": "~18.0.8", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-MyeMcbFDKhXh4sDD1EHwd0uxFQNAc6VCrwBkNvvvufUsTYFq3glTA9Y8a+x78CPpjNqwNAamu74yIaIz7IEJyg=="],
 
     "expo-modules-autolinking": ["[email protected]", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "commander": "^7.2.0", "glob": "^10.4.2", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0" }, "bin": { "expo-modules-autolinking": "bin/expo-modules-autolinking.js" } }, "sha512-tSMYGnfZmAaN77X8iMLiaSgbCFnA7eh6s2ac09J2N2N0Rcf2RCE27jg0c0XenTMTWUcM4QvLhsNHof/WtlKqPw=="],

package.json

@@ -1,4 +1,3 @@
-
 {
   "name": "clones",
   "main": "index.js",
@@ -17,11 +16,13 @@
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
     "@shopify/react-native-skia": "^2.2.12",
+    "date-fns": "^4.1.0",
     "expo": "~54.0.20",
     "expo-constants": "~18.0.10",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
     "expo-image": "~3.0.10",
+    "expo-linear-gradient": "^15.0.7",
     "expo-linking": "~8.0.8",
     "expo-splash-screen": "~31.0.10",
     "expo-status-bar": "~3.0.8",

src/components/time-range/index.tsx

@@ -0,0 +1,128 @@
+import { format } from 'date-fns';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, {
+    interpolate,
+    useAnimatedScrollHandler,
+} from 'react-native-reanimated';
+
+/**
+ * Props for the TimeRange component
+ * @property {Date[]} dates - Array of Date objects representing available time slots
+ * @property {(dateMs: number) => void} onDateChange - Callback function called when time selection changes
+ */
+type TimePickerProps = {
+  dates: Date[];
+  onDateChange?: (dateMs: number) => void;
+};
+
+const ITEM_HEIGHT = 30; // Height of each time item in pixels
+const TimeRangeHeight = ITEM_HEIGHT * 4; // Total height of visible time range
+
+export const TimeRange: React.FC<TimePickerProps> = ({
+  dates,
+  onDateChange,
+}) => {
+  const datesMs = useMemo(() => dates.map(date => date.getTime()), [dates]);
+
+  const formattedDates = useMemo(
+    () => dates.map(date => format(date, 'h:mm aaa').toLowerCase()),
+    [dates],
+  );
+
+  /**
+   * Renders individual time items in the list
+   * @param {Object} param0 - Item data and index
+   * @returns {JSX.Element} Rendered time item
+   */
+  const renderItem = useCallback(
+    ({ item, index }: { item: string; index: number }) => (
+      <View key={index} style={styles.timeItem}>
+        <Text style={styles.timeText}>{item}</Text>
+      </View>
+    ),
+    [],
+  );
+
+  /**
+   * Handles scroll events and interpolates the selected time
+   * Uses Reanimated worklet for smooth performance
+   */
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: event => {
+      const { contentOffset } = event;
+      const interpolatedDate = interpolate(
+        contentOffset.y,
+        datesMs.map((_, i) => i * ITEM_HEIGHT),
+        datesMs,
+      );
+      onDateChange?.(interpolatedDate);
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <Animated.FlatList
+        onScroll={onScroll}
+        decelerationRate="fast"
+        snapToAlignment="center"
+        snapToOffsets={datesMs.map((_, i) => i * ITEM_HEIGHT)}
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}
+        style={{ width: 100 }}
+        data={formattedDates}
+        renderItem={renderItem}
+        disableIntervalMomentum
+      />
+
+      <LinearGradient
+        colors={['#111111', '#11111100']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 0.5 }}
+        style={[styles.gradient, styles.bottomGradient]}
+      />
+      <LinearGradient
+        colors={['#11111100', '#111111']}
+        start={{ x: 0, y: 0.5 }}
+        end={{ x: 0, y: 1 }}
+        style={[styles.gradient, styles.topGradient]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomGradient: {
+    bottom: 0,
+  },
+  container: {
+    height: TimeRangeHeight,
+    position: "absolute",
+    right: 0
+  },
+  gradient: {
+    height: TimeRangeHeight,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 100,
+  },
+  scrollViewContent: {
+    paddingVertical: TimeRangeHeight / 2 - ITEM_HEIGHT / 2,
+  },
+  timeItem: {
+    alignItems: 'center',
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+  },
+  timeText: {
+    color: '#d8d8d8',
+    fontFamily: 'Honk-Regular',
+    fontSize: 20,
+  },
+  topGradient: {
+    top: 0,
+  },
+});