ios-wheel-picker-expo

Picker estilo iOS UIPickerView para Expo, React Native, iOS, Android y Web, escrito en JavaScript y sin módulos nativos obligatorios.

v1.1.0 — “UIKit mode”

• ♾️ loop para rueda prácticamente infinita.
• 🌗 theme="auto" | "light" | "dark".
• ✨ Haptics-ready mediante callback, sin obligar a instalar dependencias.
• 🧩 IOSMultiWheelPicker para múltiples columnas.
• 📅 IOSDateTimeWheelPicker listo para fecha/hora.
• 🖱️ Mouse wheel/trackpad + teclado en Web.
• 👆 Touch y snap en iOS/Android.
• 🧠 TypeScript declarations incluidas aunque el source es JavaScript.

Instalación

npm install ios-wheel-picker-expo

En Expo:

npx expo install ios-wheel-picker-expo

Picker simple con loop

import React, { useState } from 'react';
import IOSWheelPicker from 'ios-wheel-picker-expo';

export default function Example() {
  const [value, setValue] = useState('Professional');

  return (
    <IOSWheelPicker
      items={['Services', 'Retail', 'Wholesale', 'Professional', 'Salaried']}
      value={value}
      onValueChange={setValue}
      loop
      theme="auto"
    />
  );
}

Haptic feedback en Expo

La librería no obliga a instalar expo-haptics. Si quieres vibración táctil de selección:

npx expo install expo-haptics

import * as Haptics from 'expo-haptics';

<IOSWheelPicker
  items={items}
  value={value}
  onValueChange={setValue}
  haptics={() => Haptics.selectionAsync()}
/>

El callback se dispara cada vez que la rueda cruza una nueva posición central.

Fecha y hora con varias columnas

import React, { useState } from 'react';
import { IOSDateTimeWheelPicker } from 'ios-wheel-picker-expo';

export default function Example() {
  const [date, setDate] = useState(new Date());

  return (
    <IOSDateTimeWheelPicker
      value={date}
      onValueChange={setDate}
      mode="datetime"
      minuteInterval={5}
      hour12
      theme="auto"
      visibleItems={5}
      fontSize={22}
    />
  );
}

También admite:

mode="date"
mode="time"
mode="datetime"

Y límites:

<IOSDateTimeWheelPicker
  minimumDate={new Date(2026, 0, 1)}
  maximumDate={new Date(2027, 11, 31)}
/>

Multi-column genérico

import { IOSMultiWheelPicker } from 'ios-wheel-picker-expo';

<IOSMultiWheelPicker
  values={{ month: 'Aug', year: 2026 }}
  columns={[
    { key: 'month', items: ['Jul', 'Aug', 'Sep'], pickerProps: { loop: true } },
    { key: 'year', items: [2025, 2026, 2027] },
  ]}
  onValuesChange={(values) => console.log(values)}
/>

Props nuevas de IOSWheelPicker

| Prop | Tipo | Default | Descripción | |---|---|---:|---| | loop | boolean | false | Repite las opciones para una rueda circular/infinita | | theme | 'auto' \| 'light' \| 'dark' | 'auto' | Colores automáticos según el sistema | | haptics | false \| function | false | Callback al cruzar cada opción, ideal para Haptics.selectionAsync() | | onSelectionTick | function | — | Evento continuo al cruzar una nueva posición central |

Las props anteriores de 1.0.0 siguen disponibles.

Imports

import IOSWheelPicker from 'ios-wheel-picker-expo';

O:

import {
  IOSWheelPicker,
  IOSMultiWheelPicker,
  IOSDateTimeWheelPicker,
} from 'ios-wheel-picker-expo';

Probar el paquete antes de npm

npm pack

Luego en un proyecto Expo:

npm install /ruta/ios-wheel-picker-expo-1.1.0.tgz

Publicar una actualización

Si 1.0.0 ya está publicada, esta versión sería una minor release compatible:

npm publish

Licencia

MIT