@klyftig/mobile-ui 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },

package/src/components/WheelPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ScrollView,
   View,
@@ -22,6 +22,11 @@ export interface WheelPickerProps {
 
 const DEFAULT_ITEM_HEIGHT = 48;
 const DEFAULT_VISIBLE_COUNT = 5;
+// Render this many rows above and below the active index. The remaining rows
+// are virtual — the scroll container still spans the full height so snapping
+// and momentum behave normally, but we don't mount 600 <Text> nodes on first
+// paint of MeasurementsStep.
+const WINDOW_OVERSCAN = 8;
 
 export function WheelPicker({
   values,
@@ -44,23 +49,81 @@ export function WheelPicker({
     return idx >= 0 ? idx : 0;
   }, [values, selected]);
 
+  // Track the row currently centered under the selection overlay during scroll
+  // so the rendered window follows the user's drag, not just the committed
+  // `selected` prop (which only updates on momentum end).
+  const [windowCenter, setWindowCenter] = useState(selectedIndex);
+
   useEffect(() => {
-    if (selectedIndex !== lastIndexRef.current) {
-      lastIndexRef.current = selectedIndex;
-      requestAnimationFrame(() => {
-        scrollRef.current?.scrollTo({ y: selectedIndex * itemHeight, animated: false });
-      });
-    }
+    if (selectedIndex === lastIndexRef.current) return;
+    const prev = lastIndexRef.current;
+    lastIndexRef.current = selectedIndex;
+    setWindowCenter(selectedIndex);
+    // Skip on the very first effect — contentOffset already positioned us.
+    if (prev === -1) return;
+    scrollRef.current?.scrollTo({ y: selectedIndex * itemHeight, animated: false });
   }, [selectedIndex, itemHeight]);
 
-  const handleMomentumEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const offsetY = e.nativeEvent.contentOffset.y;
-    const index = Math.round(offsetY / itemHeight);
-    const clamped = Math.max(0, Math.min(values.length - 1, index));
-    if (values[clamped] !== selected) {
-      onChange(values[clamped]);
-    }
-  };
+  const handleScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+      const index = Math.round(offsetY / itemHeight);
+      const clamped = Math.max(0, Math.min(values.length - 1, index));
+      setWindowCenter((prev) => (Math.abs(prev - clamped) >= 2 ? clamped : prev));
+    },
+    [itemHeight, values.length],
+  );
+
+  const handleMomentumEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+      const index = Math.round(offsetY / itemHeight);
+      const clamped = Math.max(0, Math.min(values.length - 1, index));
+      setWindowCenter(clamped);
+      if (values[clamped] !== selected) {
+        onChange(values[clamped]);
+      }
+    },
+    [itemHeight, values, selected, onChange],
+  );
+
+  const windowStart = Math.max(0, windowCenter - WINDOW_OVERSCAN);
+  const windowEnd = Math.min(values.length - 1, windowCenter + WINDOW_OVERSCAN);
+
+  const dimColor = colors.text.tertiary;
+  const activeColor = colors.text.primary;
+
+  const items = [];
+  for (let i = windowStart; i <= windowEnd; i++) {
+    const value = values[i];
+    const isSelected = i === selectedIndex;
+    items.push(
+      <View
+        key={value}
+        style={[
+          styles.item,
+          {
+            position: 'absolute',
+            top: padding + i * itemHeight,
+            left: 0,
+            right: 0,
+            height: itemHeight,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.itemText,
+            { color: isSelected ? activeColor : dimColor },
+          ]}
+        >
+          {formatLabel ? formatLabel(value) : String(value)}
+        </Text>
+      </View>,
+    );
+  }
+
+  const totalContentHeight = values.length * itemHeight + padding * 2;
 
   return (
     <View style={[styles.wrapper, { height: containerHeight, width, flex }]}>
@@ -76,28 +139,13 @@ export function WheelPicker({
         showsVerticalScrollIndicator={false}
         snapToInterval={itemHeight}
         decelerationRate="fast"
-        contentContainerStyle={{ paddingTop: padding, paddingBottom: padding }}
+        onScroll={handleScroll}
+        scrollEventThrottle={32}
         onMomentumScrollEnd={handleMomentumEnd}
         nestedScrollEnabled
         contentOffset={{ x: 0, y: selectedIndex * itemHeight }}
       >
-        {values.map((item, index) => {
-          const isSelected = index === selectedIndex;
-          return (
-            <View key={item} style={[styles.item, { height: itemHeight }]}>
-              <Text
-                style={[
-                  styles.itemText,
-                  {
-                    color: isSelected ? colors.text.primary : colors.text.tertiary,
-                  },
-                ]}
-              >
-                {formatLabel ? formatLabel(item) : String(item)}
-              </Text>
-            </View>
-          );
-        })}
+        <View style={{ height: totalContentHeight }}>{items}</View>
       </ScrollView>
     </View>
   );