@multiplatform.one/forms 7.36.0 → 7.38.0

package/src/Wheel/NativeWheel.native.spec.tsx

@@ -0,0 +1,181 @@
+import { act, cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { NativeWheel } from "./NativeWheel.native";
+import { fontLineHeightPx, tokenPx } from "./wheelShared";
+
+type ScrollHandler = (...args: unknown[]) => void;
+type ScrollProps = { children?: ReactNode } & Partial<Record<string, ScrollHandler | ReactNode>>;
+
+const scroll = vi.hoisted(() => ({
+  props: null as ScrollProps | null,
+  scrollTo: vi.fn(),
+}));
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+// The vitest config rewrites `from "react-native"` to react-native-web.
+vi.mock("react-native-web", async (importOriginal) => {
+  const rn = await importOriginal<typeof import("react-native")>();
+  const { forwardRef, useImperativeHandle } = await import("react");
+  const ScrollView = forwardRef<unknown, ScrollProps>(function ScrollView(props, ref) {
+    scroll.props = props;
+    useImperativeHandle(ref, () => ({ scrollTo: scroll.scrollTo }));
+    return <div data-testid="scroll">{props.children as ReactNode}</div>;
+  });
+  return {
+    ...rn,
+    Animated: {
+      ...rn.Animated,
+      ScrollView,
+      event: (_mapping: unknown, config: { listener: (e: unknown) => void }) => config.listener,
+    },
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  scroll.props = null;
+  scroll.scrollTo.mockReset();
+});
+
+const hours = Array.from({ length: 24 }, (_, h) => ({
+  value: h,
+  label: String(h).padStart(2, "0"),
+}));
+const fire = (name: string, arg?: unknown) =>
+  (scroll.props?.[name] as ScrollHandler | undefined)?.(arg);
+const at = (y: number) => ({ nativeEvent: { contentOffset: { x: 0, y } } });
+const rowHeight = () => (scroll.props as unknown as { snapToInterval: number }).snapToInterval;
+
+describe("native Wheel on a UIScrollView", () => {
+  it("snaps to whole rows with the platform's own momentum", () => {
+    renderWithProviders(<NativeWheel items={hours} value={9} />);
+    const props = scroll.props as unknown as Record<string, unknown>;
+    expect(props.snapToInterval).toBeGreaterThan(0);
+    expect(props.decelerationRate).toBe("normal");
+    expect(props.contentOffset).toEqual({ x: 0, y: 9 * rowHeight() });
+  });
+
+  it("sizes rows from the font's line height plus the $1 space token", () => {
+    renderWithProviders(<NativeWheel items={hours} value={9} size="$8" />);
+    expect(rowHeight()).toBe(Math.ceil(fontLineHeightPx("$8", "$body") + tokenPx("$1", "space")));
+    expect(rowHeight()).toBeGreaterThan(fontLineHeightPx("$8", "$body"));
+  });
+
+  it("reports exactly the row centred when a fling comes to rest", () => {
+    const onChange = vi.fn();
+    renderWithProviders(<NativeWheel items={hours} value={9} onChange={onChange} />);
+    const h = rowHeight();
+    act(() => {
+      fire("onScrollBeginDrag");
+      fire("onScroll", at(11.4 * h));
+      fire("onScrollEndDrag");
+      fire("onMomentumScrollBegin");
+      fire("onScroll", at(14 * h));
+      fire("onMomentumScrollEnd", at(14 * h));
+    });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(14);
+  });
+
+  it("seats a row the snap left between two rows before reporting it", () => {
+    const onChange = vi.fn();
+    renderWithProviders(<NativeWheel items={hours} value={9} onChange={onChange} />);
+    const h = rowHeight();
+    act(() => {
+      fire("onMomentumScrollEnd", at(5.6 * h));
+    });
+    expect(scroll.scrollTo).toHaveBeenCalledWith({ y: 6 * h, animated: expect.any(Boolean) });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(6);
+  });
+
+  it("fires onItemCross for each row that crosses the band", () => {
+    const onItemCross = vi.fn();
+    renderWithProviders(<NativeWheel items={hours} value={0} onItemCross={onItemCross} />);
+    const h = rowHeight();
+    act(() => {
+      fire("onScroll", at(0.6 * h));
+      fire("onScroll", at(1.2 * h));
+      fire("onScroll", at(1.6 * h));
+    });
+    expect(onItemCross.mock.calls).toEqual([
+      [1, 1],
+      [2, 2],
+    ]);
+  });
+
+  it("loops: a looping column lays out copies and reports the wrapped value", () => {
+    const onChange = vi.fn();
+    renderWithProviders(<NativeWheel items={hours} value={23} loop onChange={onChange} />);
+    const h = rowHeight();
+    const start = (scroll.props as unknown as { contentOffset: { y: number } }).contentOffset.y;
+    act(() => {
+      fire("onMomentumScrollEnd", at(start + h));
+    });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(0);
+  });
+
+  it("is one adjustable element named for the column", () => {
+    const { getByTestId } = renderWithProviders(
+      <NativeWheel items={hours} value={9} aria-label="Hour" />,
+    );
+    const wheel = getByTestId("wheel");
+    expect(wheel.getAttribute("role")).toBe("slider");
+    expect(wheel.getAttribute("aria-label")).toBe("Hour");
+  });
+
+  it("taps a row on the drum to bring it to the band", () => {
+    const onChange = vi.fn();
+    renderWithProviders(<NativeWheel items={hours} value={0} onChange={onChange} />);
+    const h = rowHeight();
+    const frame = h * 5;
+    const radius = frame / 2 / Math.sin((80 * Math.PI) / 180);
+    const twoBelow = frame / 2 + radius * Math.sin((2 * h) / radius);
+    act(() => {
+      fire("onTouchStart", { nativeEvent: { pageY: 500, locationY: twoBelow } });
+      fire("onTouchEnd", { nativeEvent: { pageY: 501, locationY: twoBelow } });
+    });
+    expect(scroll.scrollTo).toHaveBeenCalledWith({ y: 2 * h, animated: expect.any(Boolean) });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(2);
+  });
+
+  it("seats and reports the row when a touch stops a fling (no momentum end on iOS)", () => {
+    vi.useFakeTimers();
+    try {
+      const onChange = vi.fn();
+      renderWithProviders(<NativeWheel items={hours} value={9} onChange={onChange} />);
+      const h = rowHeight();
+      act(() => {
+        fire("onScrollBeginDrag");
+        fire("onScrollEndDrag");
+        fire("onMomentumScrollBegin");
+        fire("onScroll", at(15.3 * h));
+        fire("onTouchStart", { nativeEvent: { pageY: 400, locationY: 0 } });
+        fire("onTouchEnd", { nativeEvent: { pageY: 400, locationY: 0 } });
+        vi.advanceTimersByTime(500);
+      });
+      expect(scroll.scrollTo).toHaveBeenCalledWith({ y: 15 * h, animated: expect.any(Boolean) });
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(15);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("reseats a value-less column when its items shrink under it", () => {
+    const onChange = vi.fn();
+    const { rerender } = renderWithProviders(
+      <NativeWheel items={hours} value={20} onChange={onChange} />,
+    );
+    rerender(<NativeWheel items={hours.slice(0, 10)} value={20} onChange={onChange} />);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(9);
+  });
+
+  it("does not scroll while disabled", () => {
+    renderWithProviders(<NativeWheel items={hours} value={9} disabled />);
+    expect((scroll.props as unknown as { scrollEnabled: boolean }).scrollEnabled).toBe(false);
+  });
+});

package/src/Wheel/NativeWheel.native.tsx

@@ -0,0 +1,430 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import {
+  Animated,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  View as RNView,
+} from "react-native";
+import { Text, View } from "tamagui";
+import { t } from "../shared/t";
+import { fireSelectionHaptic } from "./haptic";
+import {
+  defaultColumnWidth,
+  drumPose,
+  drumRadius,
+  drumReachRows,
+  getItemLabel,
+  getItemValue,
+  modIndex,
+  nearestRowForDataIndex,
+  useWheelLayout,
+  type WheelProps,
+} from "./wheelShared";
+
+/** Rows a looping wheel lays out, so a fling never reaches the ends before it recentres. */
+const loopRowBudget = 1200;
+const tapSlopPx = 8;
+const tapMaxMs = 300;
+const settleFallbackMs = 120;
+const poseStep = 0.25;
+
+interface DrumRowProps {
+  row: number;
+  scrollY: Animated.Value;
+  itemHeight: number;
+  frameHeight: number;
+  padTop: number;
+  reach: number;
+  children: ReactNode;
+}
+
+/**
+ * One row on the drum. Its pose is a native-driver interpolation of the
+ * scroll offset, so rotateX, scale and opacity track the finger on the UI
+ * thread with no JS frame in between.
+ */
+const DrumRow = memo(function DrumRow({
+  row,
+  scrollY,
+  itemHeight,
+  frameHeight,
+  padTop,
+  reach,
+  children,
+}: DrumRowProps) {
+  const style = useMemo(() => {
+    const span = 2 * (Math.ceil(reach) + 1);
+    const input: number[] = [];
+    const translate: number[] = [];
+    const rotate: string[] = [];
+    const scale: number[] = [];
+    const opacity: number[] = [];
+    for (let d = span; d >= -span - 1e-9; d -= poseStep) {
+      const pose = drumPose(d, itemHeight, frameHeight);
+      input.push((row - d) * itemHeight);
+      translate.push(pose.offset - d * itemHeight);
+      rotate.push(`${pose.rotateX}deg`);
+      scale.push(pose.scale);
+      opacity.push(pose.opacity);
+    }
+    const range = (output: number[] | string[]) =>
+      scrollY.interpolate({ inputRange: input, outputRange: output, extrapolate: "clamp" });
+    return {
+      position: "absolute" as const,
+      left: 0,
+      right: 0,
+      top: padTop + row * itemHeight,
+      height: itemHeight,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+      opacity: range(opacity),
+      transform: [
+        { perspective: frameHeight * 4 },
+        { translateY: range(translate) },
+        { rotateX: range(rotate) },
+        { scale: range(scale) },
+      ],
+    };
+  }, [row, scrollY, itemHeight, frameHeight, padTop, reach]);
+  return (
+    <Animated.View pointerEvents="none" style={style}>
+      {children}
+    </Animated.View>
+  );
+});
+
+/**
+ * UIPickerView on a real UIScrollView: the platform's own momentum, rubber
+ * band and paging (snapToInterval) drive the wheel, and nested inside a
+ * screen's ScrollView the inner one owns the drag, so the column never drags
+ * its page along with it.
+ */
+export function NativeWheel<T = string | number>(props: WheelProps<T>) {
+  const {
+    items,
+    value,
+    onChange,
+    width: widthProp,
+    renderItem,
+    disabled = false,
+    loop = false,
+    flex,
+    onItemCross,
+    "aria-label": ariaLabel,
+  } = props;
+  const layout = useWheelLayout(props);
+  const { itemHeight, frameHeight, size, knobProps, snapDurationMs } = layout;
+  const n = items.length;
+  const loopEnabled = Boolean(loop && n > 1);
+  const copies = loopEnabled ? Math.max(3, Math.ceil(loopRowBudget / n)) | 1 : 1;
+  const totalRows = n * copies;
+  const middleBase = loopEnabled ? Math.floor(copies / 2) * n : 0;
+  const padTop = (frameHeight - itemHeight) / 2;
+  const reach = drumReachRows(itemHeight, frameHeight);
+  const columnWidth = widthProp ?? defaultColumnWidth;
+
+  const indexOfValue = useCallback(
+    (v: T | undefined) => (v === undefined ? -1 : items.findIndex((it) => getItemValue(it) === v)),
+    [items],
+  );
+
+  const initialIndex = Math.max(0, indexOfValue(value));
+  const initialRow = middleBase + initialIndex;
+  const scrollY = useRef(new Animated.Value(initialRow * itemHeight)).current;
+  // iOS shifts the live offset by any change to the contentOffset prop, which
+  // would add to an in-flight scrollTo, so the prop is fixed at mount.
+  const [initialOffset] = useState(() => ({ x: 0, y: initialRow * itemHeight }));
+  const scrollRef = useRef<{ scrollTo: (o: { y: number; animated?: boolean }) => void } | null>(
+    null,
+  );
+  const [centerRow, setCenterRow] = useState(initialRow);
+  const centerRowRef = useRef(initialRow);
+  const yRef = useRef(initialRow * itemHeight);
+  const committedIndexRef = useRef(initialIndex);
+  const [committedIndex, setCommittedIndex] = useState(initialIndex);
+  const programmaticRef = useRef(false);
+  const draggingRef = useRef(false);
+  const momentumRef = useRef(false);
+  const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const touchRef = useRef<{ pageY: number; time: number; stoppedMotion: boolean } | null>(null);
+  const dragBeganRef = useRef(false);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onItemCrossRef = useRef(onItemCross);
+  onItemCrossRef.current = onItemCross;
+
+  const scrollToRow = useCallback(
+    (row: number, animated: boolean) => {
+      const y = row * itemHeight;
+      programmaticRef.current = animated && Math.abs(y - yRef.current) > 0.5;
+      if (!animated) {
+        yRef.current = y;
+        scrollY.setValue(y);
+        centerRowRef.current = row;
+        setCenterRow(row);
+      }
+      scrollRef.current?.scrollTo({ y, animated });
+    },
+    [itemHeight, scrollY],
+  );
+
+  const commit = useCallback(
+    (dataIndex: number) => {
+      if (n === 0 || dataIndex === committedIndexRef.current) return;
+      committedIndexRef.current = dataIndex;
+      setCommittedIndex(dataIndex);
+      const item = items[dataIndex];
+      if (item !== undefined) onChangeRef.current?.(getItemValue(item));
+    },
+    [items, n],
+  );
+
+  /** Called once motion stops: seat the nearest row exactly, then report it. */
+  const settle = useCallback(() => {
+    if (n === 0 || draggingRef.current) return;
+    programmaticRef.current = false;
+    const y = yRef.current;
+    const row = Math.max(0, Math.min(totalRows - 1, Math.round(y / itemHeight)));
+    const dataIndex = modIndex(row, n);
+    if (Math.abs(y - row * itemHeight) > 0.5) {
+      scrollToRow(row, snapDurationMs > 0);
+    } else if (loopEnabled && Math.abs(row - (middleBase + dataIndex)) >= n) {
+      scrollToRow(middleBase + dataIndex, false);
+    }
+    commit(dataIndex);
+  }, [n, totalRows, itemHeight, scrollToRow, snapDurationMs, loopEnabled, middleBase, commit]);
+
+  const clearSettleTimer = () => {
+    if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+    settleTimerRef.current = null;
+  };
+  useEffect(() => clearSettleTimer, []);
+
+  const onScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+        listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+          const y = e.nativeEvent.contentOffset.y;
+          yRef.current = y;
+          const row = Math.round(y / itemHeight);
+          if (row === centerRowRef.current) return;
+          centerRowRef.current = row;
+          setCenterRow(row);
+          if (row < 0 || row >= totalRows || n === 0 || programmaticRef.current) return;
+          const dataIndex = modIndex(row, n);
+          const item = items[dataIndex];
+          if (item === undefined) return;
+          onItemCrossRef.current?.(getItemValue(item), dataIndex);
+          fireSelectionHaptic();
+        },
+      }),
+    [scrollY, itemHeight, totalRows, n, items],
+  );
+
+  useEffect(() => {
+    const index = indexOfValue(value);
+    if (index < 0 || draggingRef.current || momentumRef.current) return;
+    if (index === committedIndexRef.current && modIndex(centerRowRef.current, n) === index) return;
+    committedIndexRef.current = index;
+    setCommittedIndex(index);
+    const row = loopEnabled ? nearestRowForDataIndex(centerRowRef.current, index, n) : index;
+    scrollToRow(row, snapDurationMs > 0);
+  }, [value, indexOfValue, loopEnabled, n, scrollToRow, snapDurationMs]);
+
+  const seatedHeightRef = useRef(itemHeight);
+  useLayoutEffect(() => {
+    if (seatedHeightRef.current === itemHeight) return;
+    seatedHeightRef.current = itemHeight;
+    scrollToRow(centerRowRef.current, false);
+  }, [itemHeight, scrollToRow]);
+
+  const seatedCountRef = useRef(n);
+  useLayoutEffect(() => {
+    if (seatedCountRef.current === n || n === 0) return;
+    seatedCountRef.current = n;
+    const index = indexOfValue(value);
+    const dataIndex = index >= 0 ? index : Math.min(committedIndexRef.current, n - 1);
+    scrollToRow(middleBase + dataIndex, false);
+    commit(dataIndex);
+  }, [n, value, indexOfValue, middleBase, scrollToRow, commit]);
+
+  const step = useCallback(
+    (delta: number) => {
+      if (n === 0 || disabled) return;
+      const current = committedIndexRef.current;
+      const next = loopEnabled
+        ? modIndex(current + delta, n)
+        : Math.max(0, Math.min(n - 1, current + delta));
+      if (next === current) return;
+      const row = loopEnabled ? nearestRowForDataIndex(centerRowRef.current, next, n) : next;
+      scrollToRow(row, snapDurationMs > 0);
+      commit(next);
+    },
+    [n, disabled, loopEnabled, scrollToRow, snapDurationMs, commit],
+  );
+
+  const onAccessibilityAction = useCallback(
+    (e: AccessibilityActionEvent) => {
+      if (e.nativeEvent.actionName === "increment") step(1);
+      if (e.nativeEvent.actionName === "decrement") step(-1);
+    },
+    [step],
+  );
+
+  const onTouchStart = useCallback((e: GestureResponderEvent) => {
+    // A touch that stops a fling never gets onMomentumScrollEnd on iOS.
+    const stoppedMotion = momentumRef.current || programmaticRef.current;
+    momentumRef.current = false;
+    dragBeganRef.current = false;
+    clearSettleTimer();
+    touchRef.current = { pageY: e.nativeEvent.pageY, time: Date.now(), stoppedMotion };
+  }, []);
+
+  const onTouchEnd = useCallback(
+    (e: GestureResponderEvent) => {
+      const touch = touchRef.current;
+      touchRef.current = null;
+      if (!touch || disabled || n === 0 || dragBeganRef.current) return;
+      const isTap =
+        Math.abs(e.nativeEvent.pageY - touch.pageY) <= tapSlopPx &&
+        Date.now() - touch.time <= tapMaxMs;
+      if (touch.stoppedMotion || !isTap) {
+        settleTimerRef.current = setTimeout(() => {
+          if (!momentumRef.current && !draggingRef.current) settle();
+        }, settleFallbackMs);
+        return;
+      }
+      const radius = drumRadius(frameHeight);
+      // Rows ignore touches, so locationY is in the content view's space.
+      const fromCenter = e.nativeEvent.locationY - yRef.current - frameHeight / 2;
+      const theta = Math.asin(Math.max(-1, Math.min(1, fromCenter / radius)));
+      const rows = Math.round((theta * radius) / itemHeight);
+      if (rows === 0) return;
+      const row = Math.max(0, Math.min(totalRows - 1, centerRowRef.current + rows));
+      scrollToRow(row, snapDurationMs > 0);
+      commit(modIndex(row, n));
+    },
+    [disabled, n, frameHeight, itemHeight, totalRows, scrollToRow, snapDurationMs, commit, settle],
+  );
+
+  const span = Math.ceil(reach) + 1;
+  const rows: number[] = [];
+  for (let r = centerRow - span; r <= centerRow + span; r++) {
+    if (r >= 0 && r < totalRows) rows.push(r);
+  }
+
+  const committedItem = items[committedIndex];
+
+  return (
+    <RNView
+      style={{
+        height: frameHeight,
+        width: flex ? "100%" : columnWidth,
+        minWidth: flex ? 0 : columnWidth,
+        flex,
+        position: "relative",
+        overflow: "hidden",
+      }}
+      testID="wheel"
+      accessible
+      accessibilityRole="adjustable"
+      accessibilityLabel={ariaLabel ?? t("Value picker")}
+      accessibilityState={{ disabled }}
+      accessibilityValue={{
+        text: committedItem !== undefined ? getItemLabel(committedItem) : undefined,
+      }}
+      accessibilityActions={disabled ? [] : [{ name: "increment" }, { name: "decrement" }]}
+      onAccessibilityAction={onAccessibilityAction}
+    >
+      <View
+        className={layout.highlightClassName}
+        position="absolute"
+        left={0}
+        right={0}
+        top={padTop}
+        height={itemHeight}
+        backgroundColor="$color4"
+        pointerEvents="none"
+        style={layout.highlightStyle as never}
+        data-testid="wheel-selection"
+      />
+      <Animated.ScrollView
+        ref={scrollRef as never}
+        testID="wheel-wrapper"
+        style={{ flex: 1 }}
+        contentOffset={initialOffset}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={!disabled && n > 0}
+        nestedScrollEnabled
+        snapToInterval={itemHeight}
+        decelerationRate="normal"
+        scrollEventThrottle={16}
+        onScroll={onScroll}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        onScrollBeginDrag={() => {
+          clearSettleTimer();
+          draggingRef.current = true;
+          dragBeganRef.current = true;
+          programmaticRef.current = false;
+        }}
+        onScrollEndDrag={() => {
+          draggingRef.current = false;
+          clearSettleTimer();
+          settleTimerRef.current = setTimeout(() => {
+            if (!momentumRef.current) settle();
+          }, settleFallbackMs);
+        }}
+        onMomentumScrollBegin={() => {
+          clearSettleTimer();
+          momentumRef.current = true;
+        }}
+        onMomentumScrollEnd={(e: NativeSyntheticEvent<NativeScrollEvent>) => {
+          momentumRef.current = false;
+          yRef.current = e.nativeEvent.contentOffset.y;
+          settle();
+        }}
+      >
+        <RNView style={{ height: totalRows * itemHeight + padTop * 2 }}>
+          {rows.map((r) => {
+            const dataIndex = modIndex(r, n);
+            const item = items[dataIndex];
+            const isSelected = r === centerRow;
+            return (
+              <DrumRow
+                key={r}
+                row={r}
+                scrollY={scrollY}
+                itemHeight={itemHeight}
+                frameHeight={frameHeight}
+                padTop={padTop}
+                reach={reach}
+              >
+                {renderItem ? (
+                  renderItem(getItemValue(item), dataIndex, isSelected)
+                ) : (
+                  <Text
+                    {...knobProps.body}
+                    fontSize={size}
+                    color={disabled ? "$color10" : isSelected ? "$color12" : "$color11"}
+                    numberOfLines={1}
+                    paddingHorizontal="$2"
+                    data-testid="wheel-item"
+                    data-index={dataIndex}
+                    data-selected={isSelected ? true : undefined}
+                  >
+                    {getItemLabel(item)}
+                  </Text>
+                )}
+              </DrumRow>
+            );
+          })}
+        </RNView>
+      </Animated.ScrollView>
+    </RNView>
+  );
+}

package/src/Wheel/NativeWheel.tsx

@@ -0,0 +1,6 @@
+import type { WheelProps } from "./wheelShared";
+
+/** Web paints the wheel itself (index.tsx); the scroll-view drum is native only. */
+export function NativeWheel<T = string | number>(_props: WheelProps<T>) {
+  return null;
+}

package/src/Wheel/haptic.ts

@@ -1,15 +1,16 @@
 import { isWeb } from "tamagui";
 
+type HapticsModule = { selectionAsync?: () => Promise<void> };
+
 /**
- * iOS UIPickerView uses UISelectionFeedbackGenerator, not impact. Optional
- * so web / tests / apps without expo-haptics stay silent.
+ * iOS UIPickerView ticks with UISelectionFeedbackGenerator. The native module
+ * is looked up in the Expo registry instead of importing expo-haptics, so a
+ * binary built without it (the Kitchen Sink) stays silent and the wheel still
+ * ships over the air.
  */
 export function fireSelectionHaptic(): void {
   if (isWeb) return;
-  try {
-    const loaded = require("expo-haptics") as { selectionAsync?: () => Promise<void> };
-    void loaded.selectionAsync?.();
-  } catch {
-    // optional peer
-  }
+  const registry = (globalThis as { expo?: { modules?: Record<string, unknown> } }).expo?.modules;
+  const haptics = registry?.ExpoHaptics as HapticsModule | undefined;
+  void haptics?.selectionAsync?.()?.catch(() => {});
 }