@tatil/react-native-wheel-date-picker

Inline native wheel date picker for React Native.

• Android: the platform DatePicker in spinner mode (three wheels, no calendar), as a Fabric view.
• iOS: UIDatePicker wheels through @react-native-community/datetimepicker.

The picker is a plain view: place it wherever you need, for example inside your own bottom sheet or modal. onChange fires on every wheel step, so a "Save" button can read the value at any moment, even while the wheel is still spinning.

Requirements

[!IMPORTANT] New Architecture only. The Android picker is a Fabric component and does not work on the old architecture (Paper).

| Dependency | Version | | --- | --- | | react-native | >= 0.80 with the New Architecture enabled | | react | >= 19 | | @react-native-community/datetimepicker | >= 9.1.0 (peer dependency, used on iOS) |

Installation

yarn add @tatil/react-native-wheel-date-picker @react-native-community/datetimepicker

npm install @tatil/react-native-wheel-date-picker @react-native-community/datetimepicker

Then install pods and rebuild the native apps:

cd ios && bundle exec pod install

Autolinking handles the rest; no manual registration is needed.

Usage

import { useState } from 'react';
import { WheelDatePicker } from '@tatil/react-native-wheel-date-picker';

const BirthDateField = () => {
  const [date, setDate] = useState(new Date(1990, 0, 1));

  return (
    <WheelDatePicker
      value={date}
      onChange={setDate}
      minimumDate={new Date(1920, 0, 1)}
      maximumDate={new Date()}
      locale="tr-TR"
    />
  );
};

The picker is controlled: keep the date in state and update it in onChange.

Props

| Prop | Type | Platform | Description | | --- | --- | --- | --- | | value | Date | both | Selected date. Required. | | onChange | (date: Date) => void | both | Called on every wheel step. Required. | | minimumDate | Date | both | Earliest selectable date. | | maximumDate | Date | both | Latest selectable date. | | textColor | string | both | Wheel text color, e.g. '#1F1F1F'. Android 10 (API 29) and later; older Android versions use the theme color. | | locale | string | iOS | Locale for month names and wheel order, e.g. 'tr-TR'. | | style | StyleProp<ViewStyle> | both | Size and layout. Android defaults to full width and 200 pt height. |

Dates and time zones

Every date going in and out of the picker is normalized to 12:00 local time on the selected day. Some time zones changed their UTC offset in the past (for example Türkiye before 2016), and a midnight Date can shift to 23:00 of the previous day during conversions. Noon keeps the day stable. If you need midnight, reset the hours yourself.

Platform notes

Android

• Language: month names and wheel order (day, month, year) follow the device language. The locale prop has no effect on Android.

• Theme: the wheel uses a light theme. To change the default text and divider colors, declare a style with the same name in your app's android/app/src/main/res/values/styles.xml:

  <style name="ThemeOverlay.TatilWheelDatePicker" parent="">
      <item name="android:datePickerStyle">@style/Widget.TatilWheelDatePicker</item>
      <!-- Wheel text -->
      <item name="android:textColorPrimary">#1F1F1F</item>
      <!-- Selection divider lines -->
      <item name="android:colorControlNormal">#525252</item>
  </style>

• Gestures: while a wheel is being dragged, parent scroll views and bottom sheets do not take over the touch.

iOS

• The wheel always uses the light appearance.
• The package ships no iOS native code of its own; @react-native-community/datetimepicker must be installed in the app.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library