@klyftig/mobile-ui 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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/GlassList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
+import { TouchableOpacity, Text, View, StyleSheet, Switch } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 
@@ -12,6 +12,16 @@ interface GlassListItemProps {
   style?: any;
 }
 
+interface GlassToggleItemProps {
+  title: string;
+  description?: string;
+  leftIcon?: string;
+  value: boolean;
+  onValueChange: (next: boolean) => void;
+  disabled?: boolean;
+  style?: any;
+}
+
 export const GlassListItem: React.FC<GlassListItemProps> = ({
   title,
   description,
@@ -61,6 +71,52 @@ export const GlassListItem: React.FC<GlassListItemProps> = ({
   return content;
 };
 
+// A list row that ends in a native Switch instead of a chevron/icon. The
+// switch turns the theme's success green when on. Use this for settings
+// toggles so the on/off state reads clearly (GlassListItem's rightIcon is a
+// static tertiary-gray glyph and can't convey toggle state).
+export const GlassToggleItem: React.FC<GlassToggleItemProps> = ({
+  title,
+  description,
+  leftIcon,
+  value,
+  onValueChange,
+  disabled,
+  style,
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.listItem,
+        { backgroundColor: colors.background.card, borderColor: colors.border.light },
+        style,
+      ]}
+    >
+      <View style={styles.listItemContent}>
+        {leftIcon && (
+          <Icon name={leftIcon} size={24} color={colors.icon.primary} style={styles.leftIcon} />
+        )}
+        <View style={styles.textContainer}>
+          <Text style={[styles.title, { color: colors.text.primary }]}>{title}</Text>
+          {description && <Text style={[styles.description, { color: colors.text.secondary }]}>{description}</Text>}
+        </View>
+        <Switch
+          value={value}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          accessibilityLabel={title}
+          trackColor={{ false: '#E5E5EA', true: colors.accent.success }}
+          thumbColor="#FFFFFF"
+          ios_backgroundColor="#E5E5EA"
+          style={styles.toggleSwitch}
+        />
+      </View>
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   listItem: {
     borderRadius: 16,
@@ -94,4 +150,7 @@ const styles = StyleSheet.create({
   rightIcon: {
     marginLeft: 12,
   },
+  toggleSwitch: {
+    marginLeft: 12,
+  },
 });

package/src/components/WheelPicker.tsx

@@ -1,12 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  FlatList,
+  ScrollView,
   View,
   Text,
   StyleSheet,
   NativeSyntheticEvent,
   NativeScrollEvent,
-  ListRenderItem,
 } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 
@@ -23,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,
@@ -35,7 +39,7 @@ export function WheelPicker({
   flex,
 }: WheelPickerProps) {
   const { colors } = useTheme();
-  const listRef = useRef<FlatList<number>>(null);
+  const scrollRef = useRef<ScrollView>(null);
   const containerHeight = itemHeight * visibleCount;
   const padding = (containerHeight - itemHeight) / 2;
   const lastIndexRef = useRef<number>(-1);
@@ -45,20 +49,37 @@ 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) return;
     const prev = lastIndexRef.current;
     lastIndexRef.current = selectedIndex;
-    // Skip the very first effect — initialScrollIndex already positioned us.
+    setWindowCenter(selectedIndex);
+    // Skip on the very first effect — contentOffset already positioned us.
     if (prev === -1) return;
-    listRef.current?.scrollToOffset({ offset: selectedIndex * itemHeight, animated: false });
+    scrollRef.current?.scrollTo({ y: selectedIndex * itemHeight, animated: false });
   }, [selectedIndex, itemHeight]);
 
+  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]);
       }
@@ -66,38 +87,43 @@ export function WheelPicker({
     [itemHeight, values, selected, onChange],
   );
 
-  const getItemLayout = useCallback(
-    (_: ArrayLike<number> | null | undefined, index: number) => ({
-      length: itemHeight,
-      offset: itemHeight * index,
-      index,
-    }),
-    [itemHeight],
-  );
-
-  const keyExtractor = useCallback((item: number) => String(item), []);
+  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 renderItem: ListRenderItem<number> = useCallback(
-    ({ item, index }) => {
-      const isSelected = index === selectedIndex;
-      return (
-        <View style={[styles.item, { height: itemHeight }]}>
-          <Text
-            style={[
-              styles.itemText,
-              { color: isSelected ? activeColor : dimColor },
-            ]}
-          >
-            {formatLabel ? formatLabel(item) : String(item)}
-          </Text>
-        </View>
-      );
-    },
-    [selectedIndex, itemHeight, activeColor, dimColor, formatLabel],
-  );
+  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 }]}>
@@ -108,25 +134,19 @@ export function WheelPicker({
           { top: padding, height: itemHeight, backgroundColor: 'rgba(0,0,0,0.06)' },
         ]}
       />
-      <FlatList
-        ref={listRef}
-        data={values}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        getItemLayout={getItemLayout}
-        initialScrollIndex={selectedIndex}
-        extraData={selectedIndex}
+      <ScrollView
+        ref={scrollRef}
         showsVerticalScrollIndicator={false}
         snapToInterval={itemHeight}
         decelerationRate="fast"
-        contentContainerStyle={{ paddingTop: padding, paddingBottom: padding }}
+        onScroll={handleScroll}
+        scrollEventThrottle={32}
         onMomentumScrollEnd={handleMomentumEnd}
         nestedScrollEnabled
-        initialNumToRender={visibleCount + 4}
-        windowSize={3}
-        maxToRenderPerBatch={visibleCount + 4}
-        removeClippedSubviews
-      />
+        contentOffset={{ x: 0, y: selectedIndex * itemHeight }}
+      >
+        <View style={{ height: totalContentHeight }}>{items}</View>
+      </ScrollView>
     </View>
   );
 }

package/src/index.ts

@@ -20,7 +20,7 @@ export { GlassCard } from './components/GlassCard';
 export { GlassContainer } from './components/GlassContainer';
 export { GlassHeaderBackground } from './components/GlassHeaderBackground';
 export { GlassInput } from './components/GlassInput';
-export { GlassListItem } from './components/GlassList';
+export { GlassListItem, GlassToggleItem } from './components/GlassList';
 export { GlassStatsCard, GlassMacroCard, GlassNutrientRow } from './components/GlassStats';
 export { RadioOption, RadioGroup } from './components/RadioOption';
 export type { RadioOptionProps, RadioGroupProps } from './components/RadioOption';