Wheel Picker

An iOS-style scrolling wheel. Rows snap to the middle, shrink and fade with their distance from it, and onChange fires when the wheel comes to rest, including when a mouse wheel stops, not on every frame of the scroll. A tap on a row brings it to the middle, and screen readers can step through the options. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add wheel-picker

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/wheel-picker.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { WheelPicker } from "@/components/ui/wheel-picker";

const sizes = ["Small", "Medium", "Large", "Extra large"].map((name) => ({
  value: name.toLowerCase(),
  label: name,
}));

export default function Example() {
  const [size, setSize] = useState("medium");

  return <WheelPicker label="Size" options={sizes} value={size} onChange={setSize} />;
}

Props