@tatil/react-native-wheel-date-picker 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Uğur Karataş
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,114 @@
-# Temporary Holding Version
+# @tatil/react-native-wheel-date-picker
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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`](https://github.com/react-native-datetimepicker/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
+
+```sh
+yarn add @tatil/react-native-wheel-date-picker @react-native-community/datetimepicker
+```
+
+```sh
+npm install @tatil/react-native-wheel-date-picker @react-native-community/datetimepicker
+```
+
+Then install pods and rebuild the native apps:
+
+```sh
+cd ios && bundle exec pod install
+```
+
+Autolinking handles the rest; no manual registration is needed.
+
+## Usage
+
+```tsx
+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`:
+
+  ```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](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,55 @@
+buildscript {
+  ext.ReactNativeWheelDatePicker = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ReactNativeWheelDatePicker[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+
+if (project.extensions.findByName("kotlin") == null) {
+  apply plugin: "kotlin-android"
+}
+
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.tatil.wheeldatepicker"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/tatil/wheeldatepicker/DateChangeEvent.kt

@@ -0,0 +1,17 @@
+package com.tatil.wheeldatepicker
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class DateChangeEvent(surfaceId: Int, viewTag: Int, private val date: String) :
+  Event<DateChangeEvent>(surfaceId, viewTag) {
+
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap().apply { putString("date", date) }
+
+  companion object {
+    const val EVENT_NAME = "topDateChange"
+  }
+}

package/android/src/main/java/com/tatil/wheeldatepicker/TatilWheelDatePickerPackage.kt

@@ -0,0 +1,16 @@
+package com.tatil.wheeldatepicker
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class TatilWheelDatePickerPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+    listOf(TatilWheelDatePickerViewManager())
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/com/tatil/wheeldatepicker/TatilWheelDatePickerView.kt

@@ -0,0 +1,161 @@
+package com.tatil.wheeldatepicker
+
+import android.annotation.SuppressLint
+import android.os.Build
+import android.view.ContextThemeWrapper
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.DatePicker
+import android.widget.FrameLayout
+import android.widget.NumberPicker
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import java.util.Calendar
+
+/**
+ * Inline Android date wheel: android.widget.DatePicker in spinner mode
+ * (theme: ThemeOverlay.TatilWheelDatePicker). Dates travel to and from JS as
+ * 'YYYY-MM-DD' strings so no time zone is involved.
+ */
+@SuppressLint("ViewConstructor")
+class TatilWheelDatePickerView(context: ThemedReactContext) : FrameLayout(context) {
+
+  private var value: String? = null
+  private var minDate: String? = null
+  private var maxDate: String? = null
+  private var textColor: Int? = null
+
+  // Changes coming from props must not be echoed back to JS as events.
+  private var isApplyingProps = false
+
+  private val picker =
+    DatePicker(ContextThemeWrapper(context, R.style.ThemeOverlay_TatilWheelDatePicker))
+
+  // Fires on every wheel step, before scrolling settles.
+  private val onDateChanged =
+    DatePicker.OnDateChangedListener { _, year, month, day ->
+      if (!isApplyingProps) emitDateChange(year, month, day)
+    }
+
+  // React Native does not handle requestLayout from native children; when a
+  // NumberPicker asks to be measured again, measure and lay out here.
+  private val measureAndLayout = Runnable {
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+    )
+    layout(left, top, right, bottom)
+  }
+
+  init {
+    val today = Calendar.getInstance()
+    picker.init(
+      today.get(Calendar.YEAR),
+      today.get(Calendar.MONTH),
+      today.get(Calendar.DAY_OF_MONTH),
+      onDateChanged,
+    )
+    addView(picker, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, Gravity.CENTER))
+  }
+
+  fun setValue(value: String?) {
+    this.value = value
+  }
+
+  fun setMinDate(minDate: String?) {
+    this.minDate = minDate
+  }
+
+  fun setMaxDate(maxDate: String?) {
+    this.maxDate = maxDate
+  }
+
+  fun setTextColor(textColor: Int?) {
+    this.textColor = textColor
+  }
+
+  /** Called once all props of an update have been set. */
+  fun applyProps() {
+    isApplyingProps = true
+    // Open max first so a new min never lands above the old max.
+    picker.maxDate = toMillis(DEFAULT_MAX_DATE)
+    picker.minDate = toMillis(minDate ?: DEFAULT_MIN_DATE)
+    picker.maxDate = toMillis(maxDate ?: DEFAULT_MAX_DATE)
+
+    val requested = value?.let(::parse)
+    if (requested != null) {
+      val (year, month, day) = requested
+      if (year != picker.year || month != picker.month || day != picker.dayOfMonth) {
+        picker.updateDate(year, month, day)
+      }
+    }
+    isApplyingProps = false
+
+    applyTextColor()
+
+    // An out-of-range value snaps to the bound; keep JS in sync with what is shown.
+    if (requested != null && requested != Triple(picker.year, picker.month, picker.dayOfMonth)) {
+      emitDateChange(picker.year, picker.month, picker.dayOfMonth)
+    }
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun dispatchTouchEvent(event: MotionEvent): Boolean {
+    // Keep parent scroll views and sheets from taking over while a wheel spins.
+    if (event.actionMasked == MotionEvent.ACTION_DOWN) {
+      parent?.requestDisallowInterceptTouchEvent(true)
+    }
+    return super.dispatchTouchEvent(event)
+  }
+
+  override fun requestLayout() {
+    super.requestLayout()
+    post(measureAndLayout)
+  }
+
+  // NumberPicker.setTextColor exists from Android 10 (API 29); below that the
+  // theme color is used.
+  private fun applyTextColor() {
+    val color = textColor ?: return
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+    forEachNumberPicker(picker) { it.textColor = color }
+  }
+
+  private fun forEachNumberPicker(view: View, action: (NumberPicker) -> Unit) {
+    if (view is NumberPicker) return action(view)
+    if (view !is ViewGroup) return
+    for (index in 0 until view.childCount) forEachNumberPicker(view.getChildAt(index), action)
+  }
+
+  private fun emitDateChange(year: Int, month: Int, day: Int) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+      ?.dispatchEvent(DateChangeEvent(surfaceId, id, format(year, month, day)))
+  }
+
+  private companion object {
+    const val DEFAULT_MIN_DATE = "1900-01-01"
+    const val DEFAULT_MAX_DATE = "2100-12-31"
+
+    /** 'YYYY-MM-DD' to (year, zero-based month, day). */
+    fun parse(date: String): Triple<Int, Int, Int>? {
+      val parts = date.split("-").mapNotNull { it.toIntOrNull() }
+      if (parts.size != 3) return null
+      return Triple(parts[0], parts[1] - 1, parts[2])
+    }
+
+    fun format(year: Int, month: Int, day: Int) =
+      "%04d-%02d-%02d".format(year, month + 1, day)
+
+    fun toMillis(date: String): Long {
+      val calendar = Calendar.getInstance()
+      calendar.clear()
+      parse(date)?.let { (year, month, day) -> calendar.set(year, month, day) }
+      return calendar.timeInMillis
+    }
+  }
+}

package/android/src/main/java/com/tatil/wheeldatepicker/TatilWheelDatePickerViewManager.kt

@@ -0,0 +1,42 @@
+package com.tatil.wheeldatepicker
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.TatilWheelDatePickerViewManagerDelegate
+import com.facebook.react.viewmanagers.TatilWheelDatePickerViewManagerInterface
+
+@ReactModule(name = TatilWheelDatePickerViewManager.NAME)
+class TatilWheelDatePickerViewManager :
+  SimpleViewManager<TatilWheelDatePickerView>(),
+  TatilWheelDatePickerViewManagerInterface<TatilWheelDatePickerView> {
+
+  private val delegate = TatilWheelDatePickerViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<TatilWheelDatePickerView> = delegate
+
+  override fun getName() = NAME
+
+  override fun createViewInstance(context: ThemedReactContext) = TatilWheelDatePickerView(context)
+
+  override fun setValue(view: TatilWheelDatePickerView, value: String?) = view.setValue(value)
+
+  override fun setMinDate(view: TatilWheelDatePickerView, value: String?) = view.setMinDate(value)
+
+  override fun setMaxDate(view: TatilWheelDatePickerView, value: String?) = view.setMaxDate(value)
+
+  override fun setTextColor(view: TatilWheelDatePickerView, value: Int?) = view.setTextColor(value)
+
+  override fun onAfterUpdateTransaction(view: TatilWheelDatePickerView) {
+    super.onAfterUpdateTransaction(view)
+    view.applyProps()
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf(DateChangeEvent.EVENT_NAME to mapOf("registrationName" to "onDateChange"))
+
+  companion object {
+    const val NAME = "TatilWheelDatePickerView"
+  }
+}

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Opens DatePicker in spinner mode without the calendar. Apps can
+         restyle the wheel by declaring a style with the same name in their
+         own 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>
+
+    <style name="Widget.TatilWheelDatePicker" parent="android:Widget.Material.Light.DatePicker">
+        <item name="android:datePickerMode">spinner</item>
+        <item name="android:calendarViewShown">false</item>
+    </style>
+</resources>

package/lib/module/DateWheel.android.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import TatilWheelDatePickerView from './TatilWheelDatePickerViewNativeComponent';
+import { fromDateString, toDateString } from "./dateUtils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DateWheel = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  textColor,
+  style
+}) => /*#__PURE__*/_jsx(TatilWheelDatePickerView, {
+  style: [styles.wheel, style],
+  value: toDateString(value),
+  ...(minimumDate && {
+    minDate: toDateString(minimumDate)
+  }),
+  ...(maximumDate && {
+    maxDate: toDateString(maximumDate)
+  }),
+  ...(textColor && {
+    textColor
+  }),
+  onDateChange: ({
+    nativeEvent
+  }) => onChange(fromDateString(nativeEvent.date))
+});
+const styles = StyleSheet.create({
+  wheel: {
+    width: '100%',
+    height: 200
+  }
+});
+export default DateWheel;
+//# sourceMappingURL=DateWheel.android.js.map

package/lib/module/DateWheel.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","TatilWheelDatePickerView","fromDateString","toDateString","jsx","_jsx","DateWheel","value","onChange","minimumDate","maximumDate","textColor","style","styles","wheel","minDate","maxDate","onDateChange","nativeEvent","date","create","width","height"],"sourceRoot":"../../src","sources":["DateWheel.android.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAOC,wBAAwB,MAAM,2CAA2C;AAChF,SAASC,cAAc,EAAEC,YAAY,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG3D,MAAMC,SAAS,GAAGA,CAAC;EACjBC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACXC,SAAS;EACTC;AACc,CAAC,kBACfP,IAAA,CAACJ,wBAAwB;EACvBW,KAAK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAEF,KAAK,CAAE;EAC7BL,KAAK,EAAEJ,YAAY,CAACI,KAAK,CAAE;EAAA,IACtBE,WAAW,IAAI;IAAEM,OAAO,EAAEZ,YAAY,CAACM,WAAW;EAAE,CAAC;EAAA,IACrDC,WAAW,IAAI;IAAEM,OAAO,EAAEb,YAAY,CAACO,WAAW;EAAE,CAAC;EAAA,IACrDC,SAAS,IAAI;IAAEA;EAAU,CAAC;EAC/BM,YAAY,EAAEA,CAAC;IAAEC;EAAY,CAAC,KAC5BV,QAAQ,CAACN,cAAc,CAACgB,WAAW,CAACC,IAAI,CAAC;AAC1C,CACF,CACF;AAED,MAAMN,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,KAAK,EAAE;IACLO,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAehB,SAAS","ignoreList":[]}

package/lib/module/DateWheel.ios.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Inline UIDatePicker wheels.
+const DateWheel = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  textColor,
+  locale,
+  style
+}) => /*#__PURE__*/_jsx(DateTimePicker, {
+  value: value,
+  mode: "date",
+  display: "spinner",
+  themeVariant: "light",
+  ...(style && {
+    style
+  }),
+  ...(locale && {
+    locale
+  }),
+  ...(textColor && {
+    textColor
+  }),
+  ...(minimumDate && {
+    minimumDate
+  }),
+  ...(maximumDate && {
+    maximumDate
+  }),
+  onValueChange: (_, date) => onChange(date)
+});
+export default DateWheel;
+//# sourceMappingURL=DateWheel.ios.js.map

package/lib/module/DateWheel.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DateTimePicker","jsx","_jsx","DateWheel","value","onChange","minimumDate","maximumDate","textColor","locale","style","mode","display","themeVariant","onValueChange","_","date"],"sourceRoot":"../../src","sources":["DateWheel.ios.tsx"],"mappings":";;AAAA,OAAOA,cAAc,MAAM,wCAAwC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIpE;AACA,MAAMC,SAAS,GAAGA,CAAC;EACjBC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACXC,SAAS;EACTC,MAAM;EACNC;AACc,CAAC,kBACfR,IAAA,CAACF,cAAc;EACbI,KAAK,EAAEA,KAAM;EACbO,IAAI,EAAC,MAAM;EACXC,OAAO,EAAC,SAAS;EACjBC,YAAY,EAAC,OAAO;EAAA,IACfH,KAAK,IAAI;IAAEA;EAAM,CAAC;EAAA,IAClBD,MAAM,IAAI;IAAEA;EAAO,CAAC;EAAA,IACpBD,SAAS,IAAI;IAAEA;EAAU,CAAC;EAAA,IAC1BF,WAAW,IAAI;IAAEA;EAAY,CAAC;EAAA,IAC9BC,WAAW,IAAI;IAAEA;EAAY,CAAC;EACnCO,aAAa,EAAEA,CAACC,CAAC,EAAEC,IAAI,KAAKX,QAAQ,CAACW,IAAI;AAAE,CAC5C,CACF;AAED,eAAeb,SAAS","ignoreList":[]}

package/lib/module/DateWheel.js

@@ -0,0 +1,8 @@
+"use strict";
+
+// Platforms other than Android and iOS (e.g. web) are not supported.
+const DateWheel = _props => {
+  throw new Error("'@tatil/react-native-wheel-date-picker' is only supported on Android and iOS.");
+};
+export default DateWheel;
+//# sourceMappingURL=DateWheel.js.map

package/lib/module/DateWheel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DateWheel","_props","Error"],"sourceRoot":"../../src","sources":["DateWheel.tsx"],"mappings":";;AAEA;AACA,MAAMA,SAAS,GAAIC,MAAsB,IAAY;EACnD,MAAM,IAAIC,KAAK,CACb,+EACF,CAAC;AACH,CAAC;AAED,eAAeF,SAAS","ignoreList":[]}

package/lib/module/TatilWheelDatePickerViewNativeComponent.ts

@@ -0,0 +1,27 @@
+/**
+ * Codegen spec of the Android date wheel (android.widget.DatePicker in spinner
+ * mode). Dates are 'YYYY-MM-DD' strings so no time zone is involved.
+ */
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ColorValue,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+type DateChangeEvent = Readonly<{
+  date: string;
+}>;
+
+interface NativeProps extends ViewProps {
+  value: string;
+  minDate?: string;
+  maxDate?: string;
+  textColor?: ColorValue;
+  onDateChange?: CodegenTypes.DirectEventHandler<DateChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'TatilWheelDatePickerView',
+) as HostComponent<NativeProps>;

package/lib/module/WheelDatePicker.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import DateWheel from './DateWheel';
+import { toLocalNoon } from "./dateUtils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Inline native date wheel: Android DatePicker spinner, iOS UIDatePicker
+ * wheels. Every date going in and out is normalized to 12:00 local time.
+ */
+export const WheelDatePicker = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  ...rest
+}) => /*#__PURE__*/_jsx(DateWheel, {
+  ...rest,
+  value: toLocalNoon(value),
+  ...(minimumDate && {
+    minimumDate: toLocalNoon(minimumDate)
+  }),
+  ...(maximumDate && {
+    maximumDate: toLocalNoon(maximumDate)
+  }),
+  onChange: date => onChange(toLocalNoon(date))
+});
+//# sourceMappingURL=WheelDatePicker.js.map

package/lib/module/WheelDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DateWheel","toLocalNoon","jsx","_jsx","WheelDatePicker","value","onChange","minimumDate","maximumDate","rest","date"],"sourceRoot":"../../src","sources":["WheelDatePicker.tsx"],"mappings":";;AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,SAASC,WAAW,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1C;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACX,GAAGC;AACiB,CAAC,kBACrBN,IAAA,CAACH,SAAS;EAAA,GACJS,IAAI;EACRJ,KAAK,EAAEJ,WAAW,CAACI,KAAK,CAAE;EAAA,IACrBE,WAAW,IAAI;IAAEA,WAAW,EAAEN,WAAW,CAACM,WAAW;EAAE,CAAC;EAAA,IACxDC,WAAW,IAAI;IAAEA,WAAW,EAAEP,WAAW,CAACO,WAAW;EAAE,CAAC;EAC7DF,QAAQ,EAAEI,IAAI,IAAIJ,QAAQ,CAACL,WAAW,CAACS,IAAI,CAAC;AAAE,CAC/C,CACF","ignoreList":[]}

package/lib/module/dateUtils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+/**
+ * Dates exchanged with the wheels are kept at 12:00 local time. Some time
+ * zones changed their offset in the past (e.g. Türkiye before 2016), so a
+ * midnight Date can shift to 23:00 of the previous day in conversions; noon
+ * leaves room on both sides.
+ */
+export const toLocalNoon = date => new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
+const pad = number => String(number).padStart(2, '0');
+export const toDateString = date => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+export const fromDateString = dateString => {
+  const [year = 1970, month = 1, day = 1] = dateString.split('-').map(Number);
+  return new Date(year, month - 1, day, 12);
+};
+//# sourceMappingURL=dateUtils.js.map

package/lib/module/dateUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toLocalNoon","date","Date","getFullYear","getMonth","getDate","pad","number","String","padStart","toDateString","fromDateString","dateString","year","month","day","split","map","Number"],"sourceRoot":"../../src","sources":["dateUtils.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,WAAW,GAAIC,IAAU,IACpC,IAAIC,IAAI,CAACD,IAAI,CAACE,WAAW,CAAC,CAAC,EAAEF,IAAI,CAACG,QAAQ,CAAC,CAAC,EAAEH,IAAI,CAACI,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;AAEnE,MAAMC,GAAG,GAAIC,MAAc,IAAaC,MAAM,CAACD,MAAM,CAAC,CAACE,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAEvE,OAAO,MAAMC,YAAY,GAAIT,IAAU,IACrC,GAAGA,IAAI,CAACE,WAAW,CAAC,CAAC,IAAIG,GAAG,CAACL,IAAI,CAACG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAIE,GAAG,CAACL,IAAI,CAACI,OAAO,CAAC,CAAC,CAAC,EAAE;AAE5E,OAAO,MAAMM,cAAc,GAAIC,UAAkB,IAAW;EAC1D,MAAM,CAACC,IAAI,GAAG,IAAI,EAAEC,KAAK,GAAG,CAAC,EAAEC,GAAG,GAAG,CAAC,CAAC,GAAGH,UAAU,CAACI,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC;EAC3E,OAAO,IAAIhB,IAAI,CAACW,IAAI,EAAEC,KAAK,GAAG,CAAC,EAAEC,GAAG,EAAE,EAAE,CAAC;AAC3C,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { WheelDatePicker } from "./WheelDatePicker.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WheelDatePicker"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,sBAAmB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/DateWheel.android.d.ts

@@ -0,0 +1,4 @@
+import type { DateWheelProps } from './types.js';
+declare const DateWheel: ({ value, onChange, minimumDate, maximumDate, textColor, style, }: DateWheelProps) => import("react").JSX.Element;
+export default DateWheel;
+//# sourceMappingURL=DateWheel.android.d.ts.map

package/lib/typescript/src/DateWheel.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateWheel.android.d.ts","sourceRoot":"","sources":["../../../src/DateWheel.android.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAE9C,QAAA,MAAM,SAAS,GAAI,kEAOhB,cAAc,gCAWhB,CAAC;AASF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/DateWheel.d.ts

@@ -0,0 +1,4 @@
+import type { DateWheelProps } from './types.js';
+declare const DateWheel: (_props: DateWheelProps) => never;
+export default DateWheel;
+//# sourceMappingURL=DateWheel.d.ts.map

package/lib/typescript/src/DateWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateWheel.d.ts","sourceRoot":"","sources":["../../../src/DateWheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAG9C,QAAA,MAAM,SAAS,GAAI,QAAQ,cAAc,KAAG,KAI3C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/DateWheel.ios.d.ts

@@ -0,0 +1,4 @@
+import type { DateWheelProps } from './types.js';
+declare const DateWheel: ({ value, onChange, minimumDate, maximumDate, textColor, locale, style, }: DateWheelProps) => import("react").JSX.Element;
+export default DateWheel;
+//# sourceMappingURL=DateWheel.ios.d.ts.map

package/lib/typescript/src/DateWheel.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateWheel.ios.d.ts","sourceRoot":"","sources":["../../../src/DateWheel.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAG9C,QAAA,MAAM,SAAS,GAAI,0EAQhB,cAAc,gCAahB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/TatilWheelDatePickerViewNativeComponent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Codegen spec of the Android date wheel (android.widget.DatePicker in spinner
+ * mode). Dates are 'YYYY-MM-DD' strings so no time zone is involved.
+ */
+import { type CodegenTypes, type ColorValue, type HostComponent, type ViewProps } from 'react-native';
+type DateChangeEvent = Readonly<{
+    date: string;
+}>;
+interface NativeProps extends ViewProps {
+    value: string;
+    minDate?: string;
+    maxDate?: string;
+    textColor?: ColorValue;
+    onDateChange?: CodegenTypes.DirectEventHandler<DateChangeEvent>;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=TatilWheelDatePickerViewNativeComponent.d.ts.map

package/lib/typescript/src/TatilWheelDatePickerViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TatilWheelDatePickerViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/TatilWheelDatePickerViewNativeComponent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,QAAQ,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,UAAU,WAAY,SAAQ,SAAS;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACjE;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}

package/lib/typescript/src/WheelDatePicker.d.ts

@@ -0,0 +1,7 @@
+import type { WheelDatePickerProps } from './types.js';
+/**
+ * Inline native date wheel: Android DatePicker spinner, iOS UIDatePicker
+ * wheels. Every date going in and out is normalized to 12:00 local time.
+ */
+export declare const WheelDatePicker: ({ value, onChange, minimumDate, maximumDate, ...rest }: WheelDatePickerProps) => import("react").JSX.Element;
+//# sourceMappingURL=WheelDatePicker.d.ts.map

package/lib/typescript/src/WheelDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WheelDatePicker.d.ts","sourceRoot":"","sources":["../../../src/WheelDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAS,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,wDAM7B,oBAAoB,gCAQtB,CAAC"}

package/lib/typescript/src/dateUtils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dates exchanged with the wheels are kept at 12:00 local time. Some time
+ * zones changed their offset in the past (e.g. Türkiye before 2016), so a
+ * midnight Date can shift to 23:00 of the previous day in conversions; noon
+ * leaves room on both sides.
+ */
+export declare const toLocalNoon: (date: Date) => Date;
+export declare const toDateString: (date: Date) => string;
+export declare const fromDateString: (dateString: string) => Date;
+//# sourceMappingURL=dateUtils.d.ts.map

package/lib/typescript/src/dateUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/dateUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,KAAG,IAC0B,CAAC;AAIpE,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,MACkC,CAAC;AAE7E,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,KAAG,IAGnD,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { WheelDatePicker } from './WheelDatePicker.js';
+export type { WheelDatePickerProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAS,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,22 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type WheelDatePickerProps = {
+    /** Selected date. The picker is controlled: update it in `onChange`. */
+    value: Date;
+    /** Called on every wheel step, before scrolling settles. */
+    onChange: (date: Date) => void;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    /**
+     * Wheel text color, e.g. '#1F1F1F'. On Android it applies from Android 10
+     * (API 29); below that the theme color is used.
+     */
+    textColor?: string;
+    /**
+     * iOS only, e.g. 'tr-TR'. Android follows the device language for month
+     * names and wheel order.
+     */
+    locale?: string;
+    style?: StyleProp<ViewStyle>;
+};
+export type DateWheelProps = WheelDatePickerProps;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG;IACjC,wEAAwE;IACxE,KAAK,EAAE,IAAI,CAAC;IACZ,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,137 @@
 {
   "name": "@tatil/react-native-wheel-date-picker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Native inline wheel date picker for React Native (New Architecture): Android DatePicker spinner, iOS UIDatePicker wheels.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "tatil-react-native-wheel-date-picker-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "react-native.config.js",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/*.iml",
+    "!**/*.tgz",
+    "!**/*.log",
+    "!**/*.tsbuildinfo",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @tatil/react-native-wheel-date-picker-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "android",
+    "ios",
+    "date-picker",
+    "datepicker",
+    "wheel",
+    "spinner",
+    "fabric",
+    "new-architecture"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.tatilsepeti.com/tatilsepeti/react-native-wheel-date-picker.git"
+  },
+  "author": "Uğur Karataş <ugur.karatas@tatilsepeti.com> (https://www.npmjs.com/~ugur.karatas)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.tatilsepeti.com/tatilsepeti/react-native-wheel-date-picker/-/issues"
+  },
+  "homepage": "https://gitlab.tatilsepeti.com/tatilsepeti/react-native-wheel-date-picker#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/js": "^9.39.5",
+    "@react-native-community/datetimepicker": "9.2.1",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "prettier": "^3.9.6",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-builder-bob": "^0.43.2",
+    "turbo": "^2.10.8",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@react-native-community/datetimepicker": ">=9.1.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.80.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "TatilWheelDatePickerSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.tatil.wheeldatepicker"
+    }
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.1"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,10 @@
+// The native code is Android only. On iOS the JS side renders
+// @react-native-community/datetimepicker, so iOS autolinking and codegen skip
+// this package.
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: null,
+    },
+  },
+};

package/src/DateWheel.android.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+import TatilWheelDatePickerView from './TatilWheelDatePickerViewNativeComponent';
+import { fromDateString, toDateString } from './dateUtils';
+import type { DateWheelProps } from './types';
+
+const DateWheel = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  textColor,
+  style,
+}: DateWheelProps) => (
+  <TatilWheelDatePickerView
+    style={[styles.wheel, style]}
+    value={toDateString(value)}
+    {...(minimumDate && { minDate: toDateString(minimumDate) })}
+    {...(maximumDate && { maxDate: toDateString(maximumDate) })}
+    {...(textColor && { textColor })}
+    onDateChange={({ nativeEvent }) =>
+      onChange(fromDateString(nativeEvent.date))
+    }
+  />
+);
+
+const styles = StyleSheet.create({
+  wheel: {
+    width: '100%',
+    height: 200,
+  },
+});
+
+export default DateWheel;

package/src/DateWheel.ios.tsx

@@ -0,0 +1,29 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+import type { DateWheelProps } from './types';
+
+// Inline UIDatePicker wheels.
+const DateWheel = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  textColor,
+  locale,
+  style,
+}: DateWheelProps) => (
+  <DateTimePicker
+    value={value}
+    mode="date"
+    display="spinner"
+    themeVariant="light"
+    {...(style && { style })}
+    {...(locale && { locale })}
+    {...(textColor && { textColor })}
+    {...(minimumDate && { minimumDate })}
+    {...(maximumDate && { maximumDate })}
+    onValueChange={(_, date) => onChange(date)}
+  />
+);
+
+export default DateWheel;

package/src/DateWheel.tsx

@@ -0,0 +1,10 @@
+import type { DateWheelProps } from './types';
+
+// Platforms other than Android and iOS (e.g. web) are not supported.
+const DateWheel = (_props: DateWheelProps): never => {
+  throw new Error(
+    "'@tatil/react-native-wheel-date-picker' is only supported on Android and iOS.",
+  );
+};
+
+export default DateWheel;

package/src/TatilWheelDatePickerViewNativeComponent.ts

@@ -0,0 +1,27 @@
+/**
+ * Codegen spec of the Android date wheel (android.widget.DatePicker in spinner
+ * mode). Dates are 'YYYY-MM-DD' strings so no time zone is involved.
+ */
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ColorValue,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+type DateChangeEvent = Readonly<{
+  date: string;
+}>;
+
+interface NativeProps extends ViewProps {
+  value: string;
+  minDate?: string;
+  maxDate?: string;
+  textColor?: ColorValue;
+  onDateChange?: CodegenTypes.DirectEventHandler<DateChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'TatilWheelDatePickerView',
+) as HostComponent<NativeProps>;

package/src/WheelDatePicker.tsx

@@ -0,0 +1,23 @@
+import DateWheel from './DateWheel';
+import { toLocalNoon } from './dateUtils';
+import type { WheelDatePickerProps } from './types';
+
+/**
+ * Inline native date wheel: Android DatePicker spinner, iOS UIDatePicker
+ * wheels. Every date going in and out is normalized to 12:00 local time.
+ */
+export const WheelDatePicker = ({
+  value,
+  onChange,
+  minimumDate,
+  maximumDate,
+  ...rest
+}: WheelDatePickerProps) => (
+  <DateWheel
+    {...rest}
+    value={toLocalNoon(value)}
+    {...(minimumDate && { minimumDate: toLocalNoon(minimumDate) })}
+    {...(maximumDate && { maximumDate: toLocalNoon(maximumDate) })}
+    onChange={date => onChange(toLocalNoon(date))}
+  />
+);

package/src/dateUtils.ts

@@ -0,0 +1,18 @@
+/**
+ * Dates exchanged with the wheels are kept at 12:00 local time. Some time
+ * zones changed their offset in the past (e.g. Türkiye before 2016), so a
+ * midnight Date can shift to 23:00 of the previous day in conversions; noon
+ * leaves room on both sides.
+ */
+export const toLocalNoon = (date: Date): Date =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
+
+const pad = (number: number): string => String(number).padStart(2, '0');
+
+export const toDateString = (date: Date): string =>
+  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+
+export const fromDateString = (dateString: string): Date => {
+  const [year = 1970, month = 1, day = 1] = dateString.split('-').map(Number);
+  return new Date(year, month - 1, day, 12);
+};

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { WheelDatePicker } from './WheelDatePicker';
+export type { WheelDatePickerProps } from './types';

package/src/types.ts

@@ -0,0 +1,23 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type WheelDatePickerProps = {
+  /** Selected date. The picker is controlled: update it in `onChange`. */
+  value: Date;
+  /** Called on every wheel step, before scrolling settles. */
+  onChange: (date: Date) => void;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  /**
+   * Wheel text color, e.g. '#1F1F1F'. On Android it applies from Android 10
+   * (API 29); below that the theme color is used.
+   */
+  textColor?: string;
+  /**
+   * iOS only, e.g. 'tr-TR'. Android follows the device language for month
+   * names and wheel order.
+   */
+  locale?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type DateWheelProps = WheelDatePickerProps;