From 08097e80c6a8170d74968df3ed28c150021edfda Mon Sep 17 00:00:00 2001
From: scroll <ymarumar502@gmail.com>
Date: Mon, 27 Jul 2026 09:53:09 +0500
Subject: [PATCH 1/3] fix: centre without a viewport and keep the selected
 value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React Native never runs an Android layout pass for native children:
ReactViewGroup.requestLayout() and ReactViewGroup.onLayout() are both empty,
so scrollToPositionWithOffset only parked an anchor nobody consumed. Combined
with centering scheduled through nested post() calls off a height that was
still 0, a picker mounted in a collapsed container stayed on index 0 with only
its centre row drawn. Centering is now layout-driven and drives the
RecyclerView's measure/layout itself.

selectedIndex was also clamped against the items list it was replacing. Fabric
hands props over as an unordered map, so a range change permanently moved the
selection and emitted onChange for a value the user never picked. The raw
requested index is kept and re-resolved against the new list, prop application
order is fixed, and change events are suppressed while props are applied.

Inside a Modal the same layout fix applies — DialogRootViewGroup only reports
its size asynchronously — and gestures are handed over via NativeGestureUtil,
since that root discards requestDisallowInterceptTouchEvent.

iOS gets the same re-resolution plus a layoutSubviews reassert.

Android instrumented tests and the iOS test additions were not executed; see
CHANGELOG for what was and was not verified.

BREAKING CHANGE: DateDrumPickerValue now requires day, month and year; use
DateDrumPickerPartialValue where an incomplete date is intentional.
---
 CHANGELOG.md                                  |  66 ++++
 README.md                                     | 111 +++++-
 android/src/androidTest/AndroidManifest.xml   |   4 +
 .../com/drumpicker/CollapsedTestActivity.kt   |  59 ++++
 .../drumpicker/DrumPickerRegressionTest.kt    | 203 +++++++++++
 .../java/com/drumpicker/DrumPickerView.kt     | 320 +++++++++++++-----
 .../com/drumpicker/DrumPickerViewManager.kt   |  72 ++--
 example/src/App.tsx                           |   9 +-
 .../DrumPickerWheelViewTests.swift            |  74 ++++
 ios/DrumPickerView.swift                      |  31 +-
 package.json                                  |   2 +-
 src/DateDrumPicker.tsx                        |  23 +-
 src/DrumPicker.native.tsx                     |  68 +++-
 .../DateDrumPickerControlled.test.tsx         | 197 +++++++++++
 .../DateDrumPicker.snapshot.test.tsx.snap     |   3 +
 .../DrumPicker.snapshot.test.tsx.snap         |   1 +
 src/dateDrumPickerLogic.ts                    |  18 +-
 src/index.tsx                                 |   1 +
 18 files changed, 1136 insertions(+), 126 deletions(-)
 create mode 100644 android/src/androidTest/java/com/drumpicker/CollapsedTestActivity.kt
 create mode 100644 android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
 create mode 100644 src/__tests__/DateDrumPickerControlled.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a668c1..7085b85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,72 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0](https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.2.4...v0.3.0) (2026-07-27)
+
+Fixes the integration defects that forced consumers to work around the picker with delayed
+mounting, two-phase range changes and `onChange` suppression flags.
+
+### ⚠ BREAKING CHANGES
+
+* **types:** `DateDrumPickerValue` now requires `day`, `month` and `year`. A partial value passed to
+  `DateDrumPicker.value` silently fell back to today's date for the missing fields. Use the new
+  `DateDrumPickerPartialValue` where an incomplete date is intentional — `scrollToDate` and
+  `clampDateDrumPickerValue` both accept it. Migration: `useState<DateDrumPickerValue>({})` becomes
+  an explicit `{ day, month, year }`.
+* **android:** changing `items` now restores the selected **value** instead of the scroll position,
+  and no longer emits `onChange`. Code that relied on the old drift (or on the spurious event) will
+  see different behaviour.
+
+### Bug Fixes
+
+* **android:** center on `selectedIndex` when the picker mounts without a size. Centering was
+  scheduled through nested `post` calls and computed its offset from a height that was still `0`,
+  so a picker mounted in a collapsed container stayed on index 0. The request is now parked and
+  flushed from `onLayout`, where the real height is known.
+* **android:** draw the rows around the selection after a programmatic scroll.
+  `scrollToPositionWithOffset` only parks an anchor and calls `requestLayout()`; React Native's
+  root view does not lay out native children, so the anchor went unused and the wheel was left
+  with just the centre row until the user dragged it.
+* **android:** keep the selected value when `items` or the date range changes.
+  `selectedIndex` was clamped against the list it was replacing — Fabric applies props in
+  arbitrary order — which permanently moved the selection. The raw requested index is now kept and
+  re-resolved against the new list, and `DrumPickerViewManager` applies size, list and position
+  props in a fixed order.
+* **android:** never emit `onChange` while props are being applied, so a controlled parent no
+  longer needs a ref flag to mute events during reconfiguration.
+* **android:** hand the touch sequence to React Native via `NativeGestureUtil` when the wheel
+  starts scrolling and back when it settles, so the JS responder system stops competing for it.
+  This is what makes the wheel spin inside a `Modal`, where
+  `DialogRootViewGroup.requestDisallowInterceptTouchEvent` is an empty method and the usual signal
+  is discarded.
+* **android:** re-centre when `itemHeight` or `visibleItemCount` changes. Both feed the centering
+  offset while often leaving the picker's own bounds untouched, so `onLayout` reported no change
+  and nothing re-centred.
+* **ios:** re-resolve the selection from the requested index on `setItems`, and reassert it in
+  `layoutSubviews`, matching the Android behaviour for zero-size mounts and list swaps.
+* **DateDrumPicker:** clamp the year column's `selectedIndex` like the day and month columns.
+
+### Features
+
+* **dev:** warn in `__DEV__` about empty `items`, an out-of-range `selectedIndex` that outlives a
+  render, and a picker still measuring zero after ~1.5s.
+* **docs:** new "Common problems" section covering hidden containers, `Modal`, dependent columns
+  and controlled usage, with an "open on the current date" example.
+
+### Verification
+
+Fixes were derived from React Native 0.86's own layout and touch plumbing —
+`ReactViewGroup.requestLayout()` and `ReactViewGroup.onLayout()` are both empty, and
+`DialogRootViewGroup.requestDisallowInterceptTouchEvent` likewise — which is why the picker now
+drives the RecyclerView's measure/layout itself and hands gestures over explicitly.
+
+The JS suite and a standalone compile against RN 0.86 both pass. The Android instrumented tests
+(`DrumPickerRegressionTest`) and the iOS `DrumPickerWheelViewTests` additions ship with this
+release but were **not executed** in the environment the fix was written in, and the reporter's
+`Modal` scenario was not re-run on a device. Run
+`./gradlew :react-native-drum-picker:connectedDebugAndroidTest` before trusting the Android
+behaviour blind.
+
 ## [0.2.4](https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.2.3...v0.2.4) (2026-05-28)
 
 
diff --git a/README.md b/README.md
index aaebb9e..5269d69 100644
--- a/README.md
+++ b/README.md
@@ -695,6 +695,112 @@ Backgrounds are **transparent by default**. Only text and optional indicator lin
 
 Use an **odd** `visibleItemCount` (e.g. `5`) for a symmetric wheel.
 
+## Common problems
+
+### Opening the picker on a given date
+
+The most frequent case: a section that renders the picker only while it is open, and wants it to
+open already showing a date. A controlled `value` is all you need — no ref calls, no delayed
+mounting, no `key` remount.
+
+```tsx
+const [open, setOpen] = useState(false);
+const [date, setDate] = useState({ day: 26, month: 7, year: 2026 });
+
+return (
+  <>
+    <Button title="Pick a date" onPress={() => setOpen(true)} />
+    {open ? (
+      <DateDrumPicker
+        mode="day-month-year"
+        locale="ru"
+        value={date}
+        onChange={setDate}
+        minDate={{ day: 1, month: 1, year: 1966 }}
+        maxDate={{ day: 31, month: 12, year: 2031 }}
+        itemHeight={44}
+        visibleItemCount={5}
+      />
+    ) : null}
+  </>
+);
+```
+
+On open the wheel sits on `26 июль 2026` with its neighbours (24, 25, **26**, 27, 28) already
+drawn, and `onChange` stays silent until the user actually spins something.
+
+### Mounting inside a hidden or zero-height container
+
+Accordions, bottom sheets and `{isOpen ? <Picker/> : null}` all mount the picker before it has a
+size. Since **0.3.0** the picker parks its centering request and applies it the moment it is first
+laid out, so this works out of the box. Two things still matter:
+
+- the container must eventually reach a non-zero height — an ancestor stuck at `height: 0`, or
+  `display: 'none'`, means the picker is never measured and never becomes visible. In `__DEV__` the
+  picker warns about this after ~1.5s;
+- keep `value` / `selectedIndex` controlled across the open/close cycle; do not reset it to `0`
+  while the section is collapsed.
+
+### Inside a React Native `<Modal>`
+
+Up to 0.2.4 the picker was effectively unusable inside `Modal`: rows clipped, offset from the
+selection indicator, and swiping did nothing. Both halves of that are addressed in **0.3.0**, for
+reasons worth spelling out because they explain the rest of this section too.
+
+**Layout.** `Modal` hosts its children in a separate Android window under `DialogRootViewGroup`,
+whose size only reaches the shadow tree asynchronously (`onSizeChanged` → state update → new mount
+transaction). So the picker is mounted, laid out at height 0, and only gets real bounds several
+frames later — the same situation as a collapsed accordion, just slower. The 0.3.0 centering fix is
+layout-driven and applies whenever the real height arrives, however late that is.
+
+**Gestures.** `DialogRootViewGroup.requestDisallowInterceptTouchEvent` is an empty method, so the
+usual "this gesture is mine" signal a scrolling view sends to its ancestors is discarded there. The
+picker now also calls `NativeGestureUtil.notifyNativeGestureStarted`, which routes through
+`onChildStartedNativeGesture` — the one channel that still reaches the touch dispatcher inside a
+dialog root.
+
+> **Caveat:** this was fixed by analysis of React Native 0.86's own layout and touch plumbing, not
+> by a reproduction on a device — the reporter's original scenario was never re-run. If `Modal`
+> still misbehaves for you, please open an issue with your RN version; the alternatives below are
+> known-good either way.
+
+If you would rather not depend on it, any of these avoids the extra window entirely:
+
+- an absolutely positioned overlay `View` inside your normal screen tree;
+- a bottom-sheet library that renders into the same root (`@gorhom/bottom-sheet`,
+  `react-native-modalize`);
+- a dedicated screen / route.
+
+```tsx
+// instead of <Modal> …
+{open ? (
+  <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+    <Pressable style={StyleSheet.absoluteFill} onPress={() => setOpen(false)} />
+    <View style={styles.sheet}>
+      <DateDrumPicker value={date} onChange={setDate} />
+    </View>
+  </View>
+) : null}
+```
+
+### Dependent columns (days in month, ranges that change)
+
+Changing `items` — a shorter month, a widened year range, a new `minDate`/`maxDate` — keeps the
+**selected value**, not the scroll position, and does not emit `onChange`. You do not need a ref
+flag to suppress events while reconfiguring props, and you do not need to widen the range in two
+phases.
+
+If the selected value falls outside the new range it is clamped: the year to
+`minDate.year…maxDate.year`, then the month to that year's allowed months, then the day to that
+month's length. A clamp caused by *your* value being out of range does emit `onChange`, once, so
+controlled parents can store the corrected value.
+
+### Controlled usage
+
+`value` is authoritative on every render. `onChange` fires only for user input, an explicit
+`scrollToDate` / `scrollToIndex` call, or the clamp described above — never as a side effect of
+changing other props.
+
 ## Troubleshooting
 
 | Issue                                 | What to try                                                                                                                           |
@@ -704,7 +810,10 @@ Use an **odd** `visibleItemCount` (e.g. `5`) for a symmetric wheel.
 | Gradle / build errors                 | `cd android && ./gradlew clean` (Windows: `.\gradlew clean`)                                                                          |
 | `adb` not found                       | Install Android SDK Platform-Tools; add to `PATH`                                                                                     |
 | Empty or white picker                 | Enable New Architecture; upgrade to **0.1.5+** for layout defaults; or set `style={{ width, height: itemHeight * visibleItemCount }}` |
-| Wrong initial row / off-center        | Upgrade to **0.1.5+**; avoid `key` remount hacks unless needed for other reasons                                                      |
+| Wrong initial row / off-center        | Upgrade to **0.3.0+**; see [Mounting inside a hidden or zero-height container](#mounting-inside-a-hidden-or-zero-height-container)     |
+| Only the centre row is drawn          | Upgrade to **0.3.0+**                                                                                                                 |
+| Value jumps when the range changes    | Upgrade to **0.3.0+**; see [Dependent columns](#dependent-columns-days-in-month-ranges-that-change)                                   |
+| Clipped / unscrollable in `<Modal>`   | Upgrade to **0.3.0+**; see [Inside a React Native `<Modal>`](#inside-a-react-native-modal)                                            |
 | Props not applied                     | Rebuild app after native changes; run `yarn build` in the library before packing                                                      |
 | iOS build issues                      | Run `pod install` in `example/ios`; use New Architecture; see [CONTRIBUTING.md](./CONTRIBUTING.md)                                    |
 | Expo Go                               | Use prebuild + dev build; this library is not in Expo Go                                                                              |
diff --git a/android/src/androidTest/AndroidManifest.xml b/android/src/androidTest/AndroidManifest.xml
index 9cd77cd..3896f4c 100644
--- a/android/src/androidTest/AndroidManifest.xml
+++ b/android/src/androidTest/AndroidManifest.xml
@@ -5,5 +5,9 @@
       android:name="com.drumpicker.TestActivity"
       android:exported="true"
       android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
+    <activity
+      android:name="com.drumpicker.CollapsedTestActivity"
+      android:exported="true"
+      android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
   </application>
 </manifest>
diff --git a/android/src/androidTest/java/com/drumpicker/CollapsedTestActivity.kt b/android/src/androidTest/java/com/drumpicker/CollapsedTestActivity.kt
new file mode 100644
index 0000000..e015231
--- /dev/null
+++ b/android/src/androidTest/java/com/drumpicker/CollapsedTestActivity.kt
@@ -0,0 +1,59 @@
+package com.drumpicker
+
+import android.os.Bundle
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.appcompat.app.AppCompatActivity
+
+/**
+ * Hosts the picker inside a container that starts with zero height, mirroring the
+ * `{isOpen ? <DrumPicker/> : null}` / collapsed-accordion mounting pattern.
+ */
+class CollapsedTestActivity : AppCompatActivity() {
+  lateinit var picker: DrumPickerView
+  private lateinit var container: FrameLayout
+
+  companion object {
+    const val ITEM_HEIGHT_DP = 44f
+    const val VISIBLE_ITEM_COUNT = 5
+
+    val ITEMS: List<String> =
+      listOf(
+        "Alpha",
+        "Beta",
+        "Gamma",
+        "Delta",
+        "Echo",
+        "Foxtrot",
+        "Golf",
+        "Hotel",
+        "India",
+        "Juliett",
+      )
+  }
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    picker = DrumPickerView(this)
+    container = FrameLayout(this)
+    container.addView(
+      picker,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT,
+      ),
+    )
+    setContentView(
+      container,
+      ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0),
+    )
+  }
+
+  /** Grows the container to the picker's natural height, as an accordion would. */
+  fun expand() {
+    val density = resources.displayMetrics.density
+    val height = (ITEM_HEIGHT_DP * density + 0.5f).toInt() * VISIBLE_ITEM_COUNT
+    container.layoutParams = container.layoutParams.apply { this.height = height }
+    container.requestLayout()
+  }
+}
diff --git a/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt b/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
new file mode 100644
index 0000000..f740713
--- /dev/null
+++ b/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
@@ -0,0 +1,203 @@
+package com.drumpicker
+
+import androidx.test.core.app.ActivityScenario
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.platform.app.InstrumentationRegistry
+import java.util.concurrent.CopyOnWriteArrayList
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import org.junit.runner.RunWith
+
+/**
+ * Regression coverage for the integration defects reported against 0.2.4:
+ *
+ * 1. mounting in a zero-height container left the wheel on index 0;
+ * 2. after a programmatic scroll only the centre row was laid out;
+ * 3. changing `items` kept the scroll position instead of the selected value and emitted a
+ *    spurious change event;
+ * 5. the centred row and the reported selected index disagreed.
+ */
+@RunWith(AndroidJUnit4::class)
+class DrumPickerRegressionTest {
+  private fun <A : androidx.appcompat.app.AppCompatActivity> onUiThread(
+    scenario: ActivityScenario<A>,
+    block: (A) -> Unit,
+  ) {
+    scenario.onActivity { block(it) }
+    InstrumentationRegistry.getInstrumentation().waitForIdleSync()
+  }
+
+  private fun <A : androidx.appcompat.app.AppCompatActivity, T> readAfterFrame(
+    scenario: ActivityScenario<A>,
+    read: (A) -> T,
+  ): T {
+    InstrumentationRegistry.getInstrumentation().waitForIdleSync()
+    val latch = CountDownLatch(1)
+    var result: T? = null
+    scenario.onActivity { activity ->
+      activity.window.decorView.post {
+        result = read(activity)
+        latch.countDown()
+      }
+    }
+    assertTrue("timed out reading picker state", latch.await(5, TimeUnit.SECONDS))
+    @Suppress("UNCHECKED_CAST")
+    return result as T
+  }
+
+  // --- Defect 1 + 5: mount without size, then get one -----------------------------------------
+
+  @Test
+  fun centersSelectedIndexWhenMountedInZeroHeightContainer() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(CollapsedTestActivity.ITEMS)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(7)
+      }
+
+      // Still collapsed: nothing is centred yet, and that is fine.
+      onUiThread(scenario) { activity -> activity.expand() }
+
+      val label = readAfterFrame(scenario) { it.picker.centeredLabelForTesting() }
+      assertEquals("Hotel", label)
+
+      val selected = readAfterFrame(scenario) { it.picker.selectedIndexForTesting() }
+      val snapped = readAfterFrame(scenario) { it.picker.snapCenterIndexForTesting() }
+      assertEquals(7, selected)
+      assertEquals("centred row disagrees with reported index", selected, snapped)
+    }
+  }
+
+  @Test
+  fun controlledIndexChangeAfterMountMovesTheWheel() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(CollapsedTestActivity.ITEMS)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(2)
+        activity.expand()
+      }
+      assertEquals("Gamma", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+
+      val emitted = CopyOnWriteArrayList<Int>()
+      onUiThread(scenario) { activity ->
+        activity.picker.changeEventListenerForTesting = { emitted.add(it) }
+        activity.picker.setSelectedIndexProp(5)
+      }
+
+      assertEquals("Foxtrot", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+      assertEquals("prop-driven selection must not emit onChange", emptyList<Int>(), emitted)
+    }
+  }
+
+  // --- Defect 2: neighbours -------------------------------------------------------------------
+
+  @Test
+  fun programmaticScrollLaysOutNeighbourRows() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(CollapsedTestActivity.ITEMS)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(6)
+        activity.expand()
+      }
+
+      val rows = readAfterFrame(scenario) { it.picker.laidOutRowCountForTesting() }
+      assertTrue("only $rows row(s) laid out — neighbours are missing", rows > 1)
+      assertEquals("Golf", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+    }
+  }
+
+  // --- Defect 3: items change -----------------------------------------------------------------
+
+  @Test
+  fun growingItemsKeepsSelectedValueAndStaysSilent() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      val years = (1966..2031).map(Int::toString)
+      val widerYears = (1926..2076).map(Int::toString)
+
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(years)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(years.indexOf("2026"))
+        activity.expand()
+      }
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+
+      val emitted = CopyOnWriteArrayList<Int>()
+      onUiThread(scenario) { activity ->
+        activity.picker.changeEventListenerForTesting = { emitted.add(it) }
+        // Fabric hands the props over as an unordered map: selectedIndex may land first.
+        activity.picker.setSelectedIndexProp(widerYears.indexOf("2026"))
+        activity.picker.setItemsProp(widerYears)
+      }
+
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+      assertEquals("range change must not emit onChange", emptyList<Int>(), emitted)
+    }
+  }
+
+  @Test
+  fun shrinkingItemsKeepsSelectedValueRegardlessOfPropOrder() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      val wide = (1926..2076).map(Int::toString)
+      val narrow = (1966..2031).map(Int::toString)
+
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(wide)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(wide.indexOf("2026"))
+        activity.expand()
+      }
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+
+      val emitted = CopyOnWriteArrayList<Int>()
+      onUiThread(scenario) { activity ->
+        activity.picker.changeEventListenerForTesting = { emitted.add(it) }
+        // selectedIndex (60) applied while the old 151-item list is still installed: clamping it
+        // against the stale list is what used to move "2026" to a different year.
+        activity.picker.setSelectedIndexProp(narrow.indexOf("2026"))
+        activity.picker.setItemsProp(narrow)
+      }
+
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+      assertEquals("range change must not emit onChange", emptyList<Int>(), emitted)
+    }
+  }
+
+  @Test
+  fun dependentColumnItemsChangeKeepsSelection() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      val julyDays = (1..31).map(Int::toString)
+      val juneDays = (1..30).map(Int::toString)
+
+      onUiThread(scenario) { activity ->
+        activity.picker.setItemsProp(julyDays)
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.picker.setSelectedIndexProp(25) // day 26
+        activity.expand()
+      }
+      assertEquals("26", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+
+      val emitted = CopyOnWriteArrayList<Int>()
+      onUiThread(scenario) { activity ->
+        activity.picker.changeEventListenerForTesting = { emitted.add(it) }
+        activity.picker.setItemsProp(juneDays)
+        activity.picker.setSelectedIndexProp(25)
+      }
+
+      assertEquals("26", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+      assertEquals("day-count change must not emit onChange", emptyList<Int>(), emitted)
+    }
+  }
+}
diff --git a/android/src/main/java/com/drumpicker/DrumPickerView.kt b/android/src/main/java/com/drumpicker/DrumPickerView.kt
index b4a03b1..c8c2629 100644
--- a/android/src/main/java/com/drumpicker/DrumPickerView.kt
+++ b/android/src/main/java/com/drumpicker/DrumPickerView.kt
@@ -19,6 +19,7 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.common.UIManagerType
 import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.uimanager.events.NativeGestureUtil
 import kotlin.math.abs
 
 class DrumPickerView @JvmOverloads constructor(
@@ -28,6 +29,9 @@ class DrumPickerView @JvmOverloads constructor(
   companion object {
     private const val CIRCULAR_MULTIPLIER_SMALL_LIST = 200
     private const val CIRCULAR_MULTIPLIER_LARGE_LIST = 100
+
+    /** Rows an animated jump may traverse before it is shortened into a jump plus a short glide. */
+    private const val MAX_ANIMATED_ROWS = 20
   }
 
   private val recyclerView = RecyclerView(context)
@@ -67,9 +71,32 @@ class DrumPickerView @JvmOverloads constructor(
   private var isAttachedToWindow = false
   private var isDisposed = false
   private var styleUpdatePosted = false
-  private var pendingScrollRunnable: Runnable? = null
   private val minWidthPx = dpToPx(DrumPickerDefaults.MIN_WIDTH_DP)
 
+  /**
+   * Last index JS asked for, kept unclamped.
+   *
+   * Fabric hands props over as an unordered map, so `selectedIndex` can be applied while the
+   * previous `items` list is still installed. Clamping the incoming value against that stale list
+   * destroys it, which is how a selected year used to drift when the range changed. Keeping the
+   * raw request lets [setItemsProp] re-resolve the position against the new list.
+   */
+  private var requestedSelectedIndex = 0
+
+  /** Centering that could not run yet because the picker has no viewport. */
+  private var hasPendingCenterRequest = false
+  private var pendingCenterEmitsChange = false
+
+  /**
+   * Non-zero while props are being applied. Prop-driven repositioning must never surface as
+   * `onChange`, otherwise a controlled parent sees a value it never selected.
+   */
+  private var programmaticDepth = 0
+
+  /** Set once per touch sequence, when the RecyclerView actually starts scrolling. */
+  private var nativeGestureNotified = false
+  private var lastDownEvent: MotionEvent? = null
+
   private val styleUpdateRunnable =
     Runnable {
       styleUpdatePosted = false
@@ -94,11 +121,13 @@ class DrumPickerView @JvmOverloads constructor(
         }
         when (newState) {
           RecyclerView.SCROLL_STATE_DRAGGING -> {
+            notifyNativeGestureStartedIfNeeded()
             lastChangingIndex = -1
             updateVisibleItemStyles()
           }
           RecyclerView.SCROLL_STATE_SETTLING -> updateVisibleItemStyles()
           RecyclerView.SCROLL_STATE_IDLE -> {
+            notifyNativeGestureEndedIfNeeded()
             updateVisibleItemStyles()
             if (suppressChangeEvent) {
               val centerIndex = findSnapCenterIndex()
@@ -152,33 +181,36 @@ class DrumPickerView @JvmOverloads constructor(
       return
     }
 
-    recyclerView.stopScroll()
-    items = newItems
-    circularRealItemCount = resolveCircularRealItemCount(newItems.size)
-    adapter.updateItems(newItems)
-    lastEmittedIndex = -1
-    lastHapticIndex = -1
-    lastChangingIndex = -1
+    withProgrammaticUpdate {
+      recyclerView.stopScroll()
+      items = newItems
+      circularRealItemCount = resolveCircularRealItemCount(newItems.size)
+      adapter.updateItems(newItems)
+      lastHapticIndex = -1
+      lastChangingIndex = -1
 
-    if (items.isEmpty()) {
-      selectedIndex = selectedIndex.coerceAtLeast(0)
-      return
-    }
+      if (items.isEmpty()) {
+        selectedIndex = 0
+        lastEmittedIndex = -1
+        return@withProgrammaticUpdate
+      }
 
-    selectedIndex = selectedIndex.coerceIn(0, items.size - 1)
-    runWhenAttached { scheduleScrollToSelectedIndexCentered(animated = false, emit = false) }
+      // Re-resolve against the raw request rather than the current scroll position: the wheel
+      // must keep the selected *value*, and `selectedIndex` may have been clamped against the
+      // list this update is replacing.
+      selectedIndex = requestedSelectedIndex.coerceIn(0, items.size - 1)
+      lastEmittedIndex = selectedIndex
+      requestCenterOnSelectedIndex(animated = false, emit = false)
+    }
   }
 
   fun setSelectedIndexProp(value: Any?) {
-    val index = toInt(value, selectedIndex)
-    val safeIndex =
-      if (items.isEmpty()) {
-        index.coerceAtLeast(0)
-      } else {
-        index.coerceIn(0, items.size - 1)
-      }
-    setSelectedIndex(safeIndex, animated = scrollAnimatedForNextIndex)
+    requestedSelectedIndex = toInt(value, requestedSelectedIndex).coerceAtLeast(0)
+    val animated = scrollAnimatedForNextIndex
     scrollAnimatedForNextIndex = false
+    withProgrammaticUpdate {
+      setSelectedIndex(requestedSelectedIndex, animated = animated)
+    }
   }
 
   fun setScrollAnimatedProp(value: Any?) {
@@ -277,7 +309,8 @@ class DrumPickerView @JvmOverloads constructor(
       return
     }
     selectedIndex = clamped
-    scheduleScrollToSelectedIndexCentered(animated = true, emit = true)
+    requestedSelectedIndex = clamped
+    requestCenterOnSelectedIndex(animated = true, emit = true)
   }
 
   /** @see selectedIndexForTesting — instrumented tests only */
@@ -321,6 +354,22 @@ class DrumPickerView @JvmOverloads constructor(
 
   internal fun selectedIndexForTesting(): Int = selectedIndex
 
+  /** Index of the row actually sitting under the selection indicator. */
+  internal fun snapCenterIndexForTesting(): Int = findSnapCenterIndex()
+
+  /** Label of the row actually sitting under the selection indicator. */
+  internal fun centeredLabelForTesting(): String? =
+    items.getOrNull(findSnapCenterIndex())
+
+  /** How many rows the RecyclerView has laid out — 1 means neighbours are missing. */
+  internal fun laidOutRowCountForTesting(): Int = recyclerView.childCount
+
+  /**
+   * Observes change events in instrumented tests, where [context] is not a ReactContext and the
+   * real event dispatcher is therefore unreachable.
+   */
+  internal var changeEventListenerForTesting: ((Int) -> Unit)? = null
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     updateMinimumDimensions()
     val width = resolveSize(minWidthPx, widthMeasureSpec)
@@ -342,8 +391,58 @@ class DrumPickerView @JvmOverloads constructor(
     layoutSelectionIndicators(width, height)
     if (changed) {
       applyRecyclerPadding()
-      runWhenAttached { scheduleScrollToSelectedIndexCentered(animated = false, emit = false) }
+      // New bounds invalidate the offset derived from the previous height. Re-centering targets
+      // `selectedIndex`, which tracks whatever the user last scrolled to, so this is idempotent
+      // and never overrides a manual choice — unless a drag is in flight, which we leave alone.
+      if (recyclerView.scrollState == RecyclerView.SCROLL_STATE_IDLE) {
+        hasPendingCenterRequest = true
+      }
+    }
+    // First point at which the viewport height is known. A request parked while the picker was
+    // collapsed is flushed here rather than re-posted frame after frame.
+    if (hasPendingCenterRequest && height > 0) {
+      hasPendingCenterRequest = false
+      val emit = pendingCenterEmitsChange
+      pendingCenterEmitsChange = false
+      centerOnSelectedIndex(animated = false, emit = emit, width = width, height = height)
+    }
+  }
+
+  override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+    if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
+      nativeGestureNotified = false
+      lastDownEvent?.recycle()
+      lastDownEvent = MotionEvent.obtain(ev)
+    }
+    return super.onInterceptTouchEvent(ev)
+  }
+
+  /**
+   * Tells React Native that a native scroll has taken over the touch sequence.
+   *
+   * Without it the JS responder system keeps competing for the gesture. This matters most inside
+   * a React Native `Modal`: `ReactModalHostView.DialogRootViewGroup.requestDisallowInterceptTouchEvent`
+   * is an empty method, so the usual "leave my gesture alone" signal is swallowed there and
+   * `onChildStartedNativeGesture` is the only channel that still reaches the touch dispatcher.
+   */
+  private fun notifyNativeGestureStartedIfNeeded() {
+    if (nativeGestureNotified) {
+      return
+    }
+    nativeGestureNotified = true
+    parent?.requestDisallowInterceptTouchEvent(true)
+    val down = lastDownEvent ?: return
+    NativeGestureUtil.notifyNativeGestureStarted(this, down)
+  }
+
+  /** Hands the touch sequence back once the wheel has settled. */
+  private fun notifyNativeGestureEndedIfNeeded() {
+    if (!nativeGestureNotified) {
+      return
     }
+    nativeGestureNotified = false
+    val down = lastDownEvent ?: return
+    NativeGestureUtil.notifyNativeGestureEnded(this, down)
   }
 
   override fun onAttachedToWindow() {
@@ -360,7 +459,11 @@ class DrumPickerView @JvmOverloads constructor(
     isDisposed = true
     suppressChangeEvent = false
     styleUpdatePosted = false
-    cancelPendingScroll()
+    hasPendingCenterRequest = false
+    pendingCenterEmitsChange = false
+    nativeGestureNotified = false
+    lastDownEvent?.recycle()
+    lastDownEvent = null
     recyclerView.stopScroll()
     recyclerView.removeCallbacks(styleUpdateRunnable)
     removeCallbacks(null)
@@ -374,8 +477,9 @@ class DrumPickerView @JvmOverloads constructor(
   private fun isLifecycleActive(): Boolean = isAttachedToWindow && !isDisposed
 
   fun setSelectedIndex(index: Int, animated: Boolean = false) {
+    requestedSelectedIndex = index.coerceAtLeast(0)
     if (items.isEmpty()) {
-      selectedIndex = index.coerceAtLeast(0)
+      selectedIndex = requestedSelectedIndex
       return
     }
     val clamped = index.coerceIn(0, items.size - 1)
@@ -388,7 +492,7 @@ class DrumPickerView @JvmOverloads constructor(
       return
     }
     selectedIndex = clamped
-    scheduleScrollToSelectedIndexCentered(animated = animated, emit = false)
+    requestCenterOnSelectedIndex(animated = animated, emit = false)
   }
 
   fun setItemHeight(height: Float) {
@@ -402,6 +506,9 @@ class DrumPickerView @JvmOverloads constructor(
     applyRecyclerPadding()
     updateMinimumDimensions()
     requestLayout()
+    // Row height feeds the centering offset. The picker's own bounds may well stay the same, so
+    // `onLayout` would report `changed == false` and never re-centre on its own.
+    requestCenterOnSelectedIndex(animated = false, emit = false)
   }
 
   fun setVisibleItemCount(count: Int) {
@@ -412,6 +519,7 @@ class DrumPickerView @JvmOverloads constructor(
     applyRecyclerPadding()
     updateMinimumDimensions()
     requestLayout()
+    requestCenterOnSelectedIndex(animated = false, emit = false)
   }
 
   private fun updateMinimumDimensions() {
@@ -512,85 +620,110 @@ class DrumPickerView @JvmOverloads constructor(
     bottomIndicator.requestLayout()
   }
 
-  private fun scheduleScrollToSelectedIndexCentered(animated: Boolean, emit: Boolean) {
-    if (!isLifecycleActive() || items.isEmpty()) {
-      return
-    }
-    cancelPendingScroll()
-    val runnable =
-      Runnable {
-        pendingScrollRunnable = null
-        if (!isLifecycleActive()) {
-          return@Runnable
-        }
-        scrollToSelectedIndexCentered(animated, emit)
-      }
-    pendingScrollRunnable = runnable
-    if (recyclerView.height > 0) {
-      recyclerView.post(runnable)
-    } else {
-      post(runnable)
+  /** Runs [block] with change events suppressed, so prop updates never look like user input. */
+  private inline fun withProgrammaticUpdate(block: () -> Unit) {
+    programmaticDepth++
+    try {
+      block()
+    } finally {
+      programmaticDepth--
     }
   }
 
-  private fun cancelPendingScroll() {
-    pendingScrollRunnable?.let { pending ->
-      recyclerView.removeCallbacks(pending)
-      removeCallbacks(pending)
+  /**
+   * Centers [selectedIndex] as soon as the picker actually has a viewport.
+   *
+   * The centering offset is derived from the RecyclerView's height, so a request that arrives
+   * before the first layout — props are applied before mount, and a collapsed container reports
+   * zero height — is parked and flushed from [onLayout], where the real height is known. Nothing
+   * is posted, so no frame is spent polling for a size that may take a while to arrive.
+   */
+  private fun requestCenterOnSelectedIndex(animated: Boolean, emit: Boolean) {
+    if (isDisposed || items.isEmpty()) {
+      return
+    }
+    val width = recyclerView.width
+    val height = recyclerView.height
+    if (width <= 0 || height <= 0) {
+      hasPendingCenterRequest = true
+      pendingCenterEmitsChange = pendingCenterEmitsChange || emit
+      return
     }
-    pendingScrollRunnable = null
+    hasPendingCenterRequest = false
+    pendingCenterEmitsChange = false
+    centerOnSelectedIndex(animated, emit, width, height)
   }
 
-  private fun scrollToSelectedIndexCentered(animated: Boolean, emit: Boolean) {
-    if (!isLifecycleActive() || items.isEmpty()) {
+  private fun centerOnSelectedIndex(animated: Boolean, emit: Boolean, width: Int, height: Int) {
+    if (isDisposed || items.isEmpty() || height <= 0) {
       return
     }
-    suppressChangeEvent = !emit
     val index = selectedIndex.coerceIn(0, items.size - 1)
     if (animated) {
+      suppressChangeEvent = !emit
+      // Smooth-scrolling across a long list binds every row in between, which drops frames on a
+      // year wheel. Jump to just outside the animation window first and animate only the tail.
+      val current = findSnapCenterIndex()
+      if (current != RecyclerView.NO_POSITION && abs(current - index) > MAX_ANIMATED_ROWS) {
+        val approach =
+          if (index > current) index - MAX_ANIMATED_ROWS else index + MAX_ANIMATED_ROWS
+        applyCenterAnchor(approach.coerceIn(0, items.size - 1), width, height)
+      }
       recyclerView.smoothScrollToPosition(index)
       return
     }
 
-    if (recyclerView.height <= 0) {
-      scheduleScrollToSelectedIndexCentered(animated = false, emit = emit)
-      return
+    // Guard the synchronous relayout below: it makes the RecyclerView dispatch onScrolled.
+    suppressChangeEvent = true
+    applyCenterAnchor(index, width, height)
+    var snappedIndex = findSnapCenterIndex()
+    if (snappedIndex != RecyclerView.NO_POSITION && snappedIndex != index) {
+      applyCenterAnchor(index, width, height)
+      snappedIndex = findSnapCenterIndex()
     }
+    updateVisibleItemStyles()
+    suppressChangeEvent = false
 
-    val centerOffset = ((recyclerView.height - itemHeightPx) / 2).coerceAtLeast(0)
+    if (emit) {
+      maybeEmitChange(if (snappedIndex != RecyclerView.NO_POSITION) snappedIndex else index)
+    } else {
+      selectedIndex = index
+      lastEmittedIndex = index
+    }
+  }
+
+  /**
+   * Anchors [index] to the middle of the viewport and makes the RecyclerView consume the anchor
+   * right away.
+   *
+   * [LinearLayoutManager.scrollToPositionWithOffset] only records the anchor and asks for a new
+   * layout pass — which never comes. React Native drives layout from its mounting layer:
+   * `ReactViewGroup.requestLayout()` and `ReactViewGroup.onLayout()` are both empty, so a
+   * `requestLayout()` from a native child dies at the nearest React parent and no traversal
+   * reaches us. Left alone the anchor would sit unused until the next commit, leaving the wheel
+   * where it was with only the centre row filled in.
+   *
+   * Re-running measure/layout on the RecyclerView here both applies the anchor and lets the
+   * layout manager fill the viewport, which is what puts the neighbouring rows back.
+   * [View.forceLayout] is what makes that possible: [measure] short-circuits on unchanged specs
+   * unless the force-layout flag is set, and it would then never reach `onLayoutChildren`, the
+   * step that actually consumes the anchor. It is deliberately not `requestLayout()` — that would
+   * additionally register a doomed second traversal and log "requestLayout() improperly called
+   * during layout" every time this runs from [onLayout].
+   */
+  private fun applyCenterAnchor(index: Int, width: Int, height: Int) {
+    val centerOffset = ((height - itemHeightPx) / 2).coerceAtLeast(0)
     layoutManager.scrollToPositionWithOffset(index, centerOffset)
-    recyclerView.post {
-      if (!isLifecycleActive()) {
-        return@post
-      }
-      var snappedIndex = findSnapCenterIndex()
-      if (snappedIndex != RecyclerView.NO_POSITION && snappedIndex != index) {
-        layoutManager.scrollToPositionWithOffset(index, centerOffset)
-        snappedIndex = findSnapCenterIndex()
-      }
-      updateVisibleItemStyles()
-      val resolvedIndex =
-        if (emit && snappedIndex != RecyclerView.NO_POSITION) snappedIndex else index
-      if (emit) {
-        maybeEmitChange(resolvedIndex)
-      } else {
-        lastEmittedIndex = index
-        selectedIndex = index
-      }
-      suppressChangeEvent = false
-    }
-  }
-
-  private fun runWhenAttached(block: () -> Unit) {
-    if (!isLifecycleActive()) {
+    if (recyclerView.isComputingLayout) {
+      // The in-flight pass will pick the anchor up; re-entering layout here would throw.
       return
     }
-    post {
-      if (!isLifecycleActive()) {
-        return@post
-      }
-      block()
-    }
+    recyclerView.forceLayout()
+    recyclerView.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+    )
+    recyclerView.layout(0, 0, width, height)
   }
 
   private fun updateCenterFromSnap() {
@@ -603,6 +736,9 @@ class DrumPickerView @JvmOverloads constructor(
     }
 
     selectedIndex = centerIndex
+    // The wheel is the source of truth once the user has spun it: remember this as the intent to
+    // restore should `items` be swapped without JS sending a fresh selectedIndex.
+    requestedSelectedIndex = centerIndex
     updateVisibleItemStyles()
     maybePerformHaptic(centerIndex)
     maybeEmitChange(centerIndex)
@@ -634,13 +770,13 @@ class DrumPickerView @JvmOverloads constructor(
     if (centerVirtual == centerIndex) {
       return
     }
-    if (recyclerView.height <= 0) {
+    if (recyclerView.height <= 0 || recyclerView.width <= 0) {
       recyclerView.scrollToPosition(centerVirtual)
     } else {
-      val centerOffset = ((recyclerView.height - itemHeightPx) / 2).coerceAtLeast(0)
-      layoutManager.scrollToPositionWithOffset(centerVirtual, centerOffset)
+      applyCenterAnchor(centerVirtual, recyclerView.width, recyclerView.height)
     }
     selectedIndex = centerVirtual
+    requestedSelectedIndex = centerVirtual
     lastEmittedIndex = centerVirtual
     lastChangingIndex = centerVirtual
   }
@@ -708,6 +844,7 @@ class DrumPickerView @JvmOverloads constructor(
       !onValueChangingEnabled ||
       !isLifecycleActive() ||
       suppressChangeEvent ||
+      programmaticDepth > 0 ||
       items.isEmpty()
     ) {
       return
@@ -740,7 +877,7 @@ class DrumPickerView @JvmOverloads constructor(
   }
 
   private fun maybeEmitChange(index: Int) {
-    if (!isLifecycleActive() || suppressChangeEvent || items.isEmpty()) {
+    if (!isLifecycleActive() || suppressChangeEvent || programmaticDepth > 0 || items.isEmpty()) {
       return
     }
     if (index < 0 || index >= items.size) {
@@ -754,6 +891,7 @@ class DrumPickerView @JvmOverloads constructor(
 
     lastEmittedIndex = clamped
     selectedIndex = clamped
+    changeEventListenerForTesting?.invoke(clamped)
 
     val reactContext = context as? ReactContext ?: return
     if (!reactContext.hasActiveReactInstance()) {
diff --git a/android/src/main/java/com/drumpicker/DrumPickerViewManager.kt b/android/src/main/java/com/drumpicker/DrumPickerViewManager.kt
index 2055383..19b0dd9 100644
--- a/android/src/main/java/com/drumpicker/DrumPickerViewManager.kt
+++ b/android/src/main/java/com/drumpicker/DrumPickerViewManager.kt
@@ -24,33 +24,50 @@ class DrumPickerViewManager :
     DrumPickerView(context)
 
   override fun updateProperties(view: DrumPickerView, props: ReactStylesDiffMap) {
-    for ((key, value) in props.toMap()) {
-      when (key) {
-        "items" -> view.setItemsProp(value)
-        "scrollAnimated" -> view.setScrollAnimatedProp(value)
-        "selectedIndex" -> view.setSelectedIndexProp(value)
-        "itemHeight" -> view.setItemHeightProp(value)
-        "visibleItemCount" -> view.setVisibleItemCountProp(value)
-        "textColor" -> view.setTextColorProp(value)
-        "selectedTextColor" -> view.setSelectedTextColorProp(value)
-        "textSize" -> view.setTextSizeProp(value)
-        "selectedTextSize" -> view.setSelectedTextSizeProp(value)
-        "showSelectionIndicator" -> view.setShowSelectionIndicatorProp(value)
-        "selectionIndicatorColor" -> view.setSelectionIndicatorColorProp(value)
-        "selectionIndicatorHeight" -> view.setSelectionIndicatorHeightProp(value)
-        "backgroundColor" -> view.setBackgroundColorProp(value)
-        "containerBackgroundColor" -> view.setContainerBackgroundColorProp(value)
-        "itemBackgroundColor" -> view.setItemBackgroundColorProp(value)
-        "hapticFeedback" -> view.setHapticFeedbackProp(value)
-        "circular" -> view.setCircularProp(value)
-        "enableScrollByTapOnItem" -> view.setEnableScrollByTapOnItemProp(value)
-        "onValueChangingEnabled" -> view.setOnValueChangingEnabledProp(value)
-        else -> delegate.setProperty(view, key, value)
+    val map = props.toMap()
+    // `props.toMap()` is a HashMap: iterating it applies props in an arbitrary order, so
+    // `selectedIndex` could land while the previous `items` list was still installed. Row metrics
+    // first (they decide the centering offset), then the list, then the position.
+    for (key in ORDERED_PROPS) {
+      if (!map.containsKey(key)) {
+        continue
       }
+      applyProp(view, key, map[key])
+    }
+    for ((key, value) in map) {
+      if (key in ORDERED_PROPS) {
+        continue
+      }
+      applyProp(view, key, value)
     }
     onAfterUpdateTransaction(view)
   }
 
+  private fun applyProp(view: DrumPickerView, key: String, value: Any?) {
+    when (key) {
+      "items" -> view.setItemsProp(value)
+      "scrollAnimated" -> view.setScrollAnimatedProp(value)
+      "selectedIndex" -> view.setSelectedIndexProp(value)
+      "itemHeight" -> view.setItemHeightProp(value)
+      "visibleItemCount" -> view.setVisibleItemCountProp(value)
+      "textColor" -> view.setTextColorProp(value)
+      "selectedTextColor" -> view.setSelectedTextColorProp(value)
+      "textSize" -> view.setTextSizeProp(value)
+      "selectedTextSize" -> view.setSelectedTextSizeProp(value)
+      "showSelectionIndicator" -> view.setShowSelectionIndicatorProp(value)
+      "selectionIndicatorColor" -> view.setSelectionIndicatorColorProp(value)
+      "selectionIndicatorHeight" -> view.setSelectionIndicatorHeightProp(value)
+      "backgroundColor" -> view.setBackgroundColorProp(value)
+      "containerBackgroundColor" -> view.setContainerBackgroundColorProp(value)
+      "itemBackgroundColor" -> view.setItemBackgroundColorProp(value)
+      "hapticFeedback" -> view.setHapticFeedbackProp(value)
+      "circular" -> view.setCircularProp(value)
+      "enableScrollByTapOnItem" -> view.setEnableScrollByTapOnItemProp(value)
+      "onValueChangingEnabled" -> view.setOnValueChangingEnabledProp(value)
+      else -> delegate.setProperty(view, key, value)
+    }
+  }
+
   override fun setItems(view: DrumPickerView?, value: ReadableArray?) {
     view?.setItemsProp(value)
   }
@@ -129,5 +146,16 @@ class DrumPickerViewManager :
 
   companion object {
     const val NAME = "DrumPickerView"
+
+    /** Props whose relative order matters; everything else follows in map order. */
+    private val ORDERED_PROPS =
+      listOf(
+        "itemHeight",
+        "visibleItemCount",
+        "circular",
+        "items",
+        "scrollAnimated",
+        "selectedIndex",
+      )
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 13642a0..fde5ea9 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -74,7 +74,14 @@ export default function App() {
     month: 9,
     year: 2026,
   });
-  const [bookingDate, setBookingDate] = useState<DateDrumPickerValue>({});
+  const [bookingDate, setBookingDate] = useState<DateDrumPickerValue>(() => {
+    const today = new Date();
+    return {
+      day: today.getDate(),
+      month: today.getMonth() + 1,
+      year: today.getFullYear(),
+    };
+  });
 
   const bookingMinMax = useMemo(() => {
     const today = new Date();
diff --git a/ios/DrumPickerTests/DrumPickerWheelViewTests.swift b/ios/DrumPickerTests/DrumPickerWheelViewTests.swift
index 684973a..0dc6469 100644
--- a/ios/DrumPickerTests/DrumPickerWheelViewTests.swift
+++ b/ios/DrumPickerTests/DrumPickerWheelViewTests.swift
@@ -126,6 +126,80 @@ final class DrumPickerWheelViewTests: XCTestCase {
     XCTAssertEqual(view.selectedIndexForTesting(), 2)
   }
 
+  // MARK: - Regression: mounting without a size (defect 1 / 5)
+
+  func testSelectionSurvivesMountInZeroHeightContainer() {
+    let collapsed = DrumPickerWheelView(frame: .zero)
+    collapsed.setItemHeight(44)
+    collapsed.setVisibleItemCount(5)
+    collapsed.setItems(["Alpha", "Beta", "Gamma", "Delta", "Echo", "Foxtrot", "Golf", "Hotel"])
+    collapsed.setSelectedIndex(7, animated: false)
+
+    // Container expands, exactly like an accordion opening.
+    collapsed.frame = CGRect(x: 0, y: 0, width: 200, height: 220)
+    collapsed.layoutIfNeeded()
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    let wheel = collapsed.subviews.compactMap { $0 as? UIPickerView }.first!
+    XCTAssertEqual(wheel.selectedRow(inComponent: 0), 7)
+    XCTAssertEqual(collapsed.selectedIndexForTesting(), 7)
+  }
+
+  // MARK: - Regression: items swap (defect 3)
+
+  func testGrowingItemsKeepsSelectedValueAndStaysSilent() {
+    let delegate = MockWheelDelegate()
+    let years = (1966...2031).map(String.init)
+    let wider = (1926...2076).map(String.init)
+
+    view.setItems(years)
+    view.setSelectedIndex(years.firstIndex(of: "2026")!, animated: false)
+    view.layoutIfNeeded()
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+    view.wheelDelegate = delegate
+
+    view.setItems(wider)
+    view.setSelectedIndex(wider.firstIndex(of: "2026")!, animated: false)
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    XCTAssertEqual(picker.selectedRow(inComponent: 0), wider.firstIndex(of: "2026"))
+    XCTAssertEqual(delegate.userInitiatedCount, 0)
+  }
+
+  func testShrinkingItemsKeepsSelectedValueWhenIndexArrivesFirst() {
+    let wide = (1926...2076).map(String.init)
+    let narrow = (1966...2031).map(String.init)
+
+    view.setItems(wide)
+    view.setSelectedIndex(wide.firstIndex(of: "2026")!, animated: false)
+    view.layoutIfNeeded()
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    // Index applied while the wide list is still installed — clamping it against the stale list
+    // is what used to move the selected year.
+    view.setSelectedIndex(narrow.firstIndex(of: "2026")!, animated: false)
+    view.setItems(narrow)
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    XCTAssertEqual(picker.selectedRow(inComponent: 0), narrow.firstIndex(of: "2026"))
+    XCTAssertEqual(view.selectedIndexForTesting(), narrow.firstIndex(of: "2026"))
+  }
+
+  func testDependentColumnItemsChangeKeepsSelection() {
+    let july = (1...31).map(String.init)
+    let june = (1...30).map(String.init)
+
+    view.setItems(july)
+    view.setSelectedIndex(25, animated: false) // day 26
+    view.layoutIfNeeded()
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    view.setItems(june)
+    RunLoop.main.run(until: Date(timeIntervalSinceNow: 0.05))
+
+    XCTAssertEqual(picker.selectedRow(inComponent: 0), 25)
+  }
+
   func testTapIgnoredWhenDisabled() {
     view.setSelectedIndex(2, animated: false)
     view.setEnableScrollByTapOnItem(false)
diff --git a/ios/DrumPickerView.swift b/ios/DrumPickerView.swift
index 3a2b99d..50c14ee 100644
--- a/ios/DrumPickerView.swift
+++ b/ios/DrumPickerView.swift
@@ -41,6 +41,10 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
 
   private var items: [String] = []
   private var selectedIndex: Int = 0
+
+  /// Last index JS asked for, kept unclamped so `setItems` can re-resolve the *value* rather than
+  /// preserving the scroll position. Mirrors `requestedSelectedIndex` on Android.
+  private var requestedSelectedIndex: Int = 0
   private var suppressSelectionEvents = false
   private var isProgrammaticSelection = false
   private var lastSelectedIndex = -1
@@ -174,11 +178,28 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
     updatePickerFrame()
     updateIndicators()
     attachPickerScrollViewIfNeeded()
+    reapplySelectionIfDrifted()
     if picker.accessibilityIdentifier != accessibilityIdentifier {
       picker.accessibilityIdentifier = accessibilityIdentifier
     }
   }
 
+  /// Re-centres the wheel once the view finally has a size.
+  ///
+  /// Mounting inside a collapsed container means `selectRow` runs against a zero-height picker;
+  /// UIKit can drop that selection when the real frame arrives. Reasserting it on layout is
+  /// idempotent — `selectedIndex` tracks whatever the user last spun to — and is the iOS
+  /// counterpart of the pending-centre flush Android does in `onLayout`.
+  private func reapplySelectionIfDrifted() {
+    guard !items.isEmpty, bounds.height > 0 else { return }
+    let target = min(max(selectedIndex, 0), items.count - 1)
+    guard picker.selectedRow(inComponent: 0) != target else { return }
+    performProgrammaticUpdate {
+      self.picker.selectRow(target, inComponent: 0, animated: false)
+      self.lastSelectedIndex = target
+    }
+  }
+
   private func attachPickerScrollViewIfNeeded() {
     guard pickerScrollView == nil else { return }
     for subview in picker.subviews {
@@ -275,7 +296,9 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
         self.lastSelectedIndex = -1
         return
       }
-      let clamped = min(max(self.selectedIndex, 0), self.items.count - 1)
+      // Re-resolve from the raw request, not from where the wheel currently sits: a list swap
+      // must keep the selected value even when the index was clamped against the old list.
+      let clamped = min(max(self.requestedSelectedIndex, 0), self.items.count - 1)
       self.selectedIndex = clamped
       self.picker.selectRow(clamped, inComponent: 0, animated: false)
       self.lastSelectedIndex = clamped
@@ -286,6 +309,7 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
   }
 
   @objc public func setSelectedIndex(_ index: Int, animated: Bool) {
+    requestedSelectedIndex = max(index, 0)
     applySelectedIndex(index, animated: animated, userInitiated: false)
   }
 
@@ -409,6 +433,7 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
       if clamped == lastSelectedIndex {
         return
       }
+      requestedSelectedIndex = clamped
       picker.selectRow(clamped, inComponent: 0, animated: animated)
       lastSelectedIndex = clamped
       notifySelection(row: clamped, userInitiated: true)
@@ -494,6 +519,8 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
     }
 
     selectedIndex = row
+    // The wheel is the source of truth once the user has spun it.
+    requestedSelectedIndex = row
     lastSelectedIndex = row
     pickerView.reloadComponent(0)
     notifySelection(row: row, userInitiated: true)
@@ -518,6 +545,7 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
     isProgrammaticSelection = true
     picker.selectRow(center, inComponent: 0, animated: false)
     selectedIndex = center
+    requestedSelectedIndex = center
     lastSelectedIndex = center
     DispatchQueue.main.async {
       self.isProgrammaticSelection = false
@@ -535,6 +563,7 @@ public final class DrumPickerWheelView: UIView, UIPickerViewDataSource, UIPicker
     isProgrammaticSelection = true
     picker.selectRow(center, inComponent: 0, animated: animated)
     selectedIndex = center
+    requestedSelectedIndex = center
     lastSelectedIndex = center
     DispatchQueue.main.async {
       self.isProgrammaticSelection = false
diff --git a/package.json b/package.json
index 9a817a5..680534e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-drum-picker",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Cross-platform native drum/wheel picker for React Native (Fabric)",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
diff --git a/src/DateDrumPicker.tsx b/src/DateDrumPicker.tsx
index 07341e0..4b60b7d 100644
--- a/src/DateDrumPicker.tsx
+++ b/src/DateDrumPicker.tsx
@@ -21,6 +21,7 @@ import {
   buildYearItems,
   clampDateDrumPickerValue,
   type DateDrumPickerMonthFormat,
+  type DateDrumPickerPartialValue,
   type DateDrumPickerValue,
 } from './dateDrumPickerLogic';
 import { DrumPicker } from './DrumPicker.native';
@@ -41,7 +42,11 @@ export type DateDrumPickerMode =
   | 'month-day-year'
   | 'year-month-day';
 
-export type { DateDrumPickerMonthFormat, DateDrumPickerValue };
+export type {
+  DateDrumPickerMonthFormat,
+  DateDrumPickerPartialValue,
+  DateDrumPickerValue,
+};
 export {
   clampDateDrumPickerValue,
   getDaysInMonth,
@@ -55,6 +60,11 @@ export type DateDrumPickerColumnKey = 'day' | 'month' | 'year';
 
 export type DateDrumPickerProps = {
   mode?: DateDrumPickerMode;
+  /**
+   * Controlled value. Must be complete — `{ day, month, year }`. Passing it is enough to position
+   * every column; no ref call is needed, including when the picker mounts inside a container that
+   * is collapsed or not yet measured.
+   */
   value?: DateDrumPickerValue;
   onChange?: (value: DateDrumPickerValue) => void;
   /**
@@ -208,7 +218,7 @@ export const DateDrumPicker = forwardRef<
   }, [minDate, maxDate, minYearProp, maxYearProp]);
 
   const clampValue = useCallback(
-    (input: DateDrumPickerValue | undefined) => {
+    (input: DateDrumPickerPartialValue | undefined) => {
       const calendar = clampDateDrumPickerValue(input ?? {}, minYear, maxYear);
       return clampToConstraints(calendar, constraints);
     },
@@ -302,9 +312,7 @@ export const DateDrumPicker = forwardRef<
       return;
     }
     const clamped = clampValue(value);
-    const day = value.day ?? clamped.day;
-    const month = value.month ?? clamped.month;
-    const year = value.year ?? clamped.year;
+    const { day, month, year } = value;
     if (
       day === clamped.day &&
       month === clamped.month &&
@@ -524,7 +532,10 @@ export const DateDrumPicker = forwardRef<
         testID={columnTestIDs?.year}
         style={columnContainerStyle('year')}
         items={yearItems}
-        selectedIndex={resolvedValue.year - minYear}
+        selectedIndex={Math.min(
+          Math.max(resolvedValue.year - minYear, 0),
+          Math.max(yearItems.length - 1, 0)
+        )}
         onChange={(event: NativeSyntheticEvent<DrumPickerChangeEvent>) => {
           const year = minYear + event.nativeEvent.index;
           emitChange({ year });
diff --git a/src/DrumPicker.native.tsx b/src/DrumPicker.native.tsx
index 3fafd90..8fc08ac 100644
--- a/src/DrumPicker.native.tsx
+++ b/src/DrumPicker.native.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react';
 import type { ElementRef, ReactElement, RefAttributes } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
+import type { LayoutChangeEvent, NativeSyntheticEvent } from 'react-native';
 import DrumPickerNative from './DrumPickerViewNativeComponent';
 import { DrumPickerWithRenderItem } from './DrumPickerWithRenderItem';
 import { resolveDrumPickerStyle } from './drumPickerLayout';
@@ -39,6 +39,9 @@ const DEFAULTS = {
 const CIRCULAR_MULTIPLIER_SMALL_LIST = 200;
 const CIRCULAR_MULTIPLIER_LARGE_LIST = 100;
 
+/** Zero height for this long means the picker is mounted somewhere it will never be measured. */
+const ZERO_HEIGHT_GRACE_MS = 1500;
+
 function clampIndex(index: number, itemCount: number): number {
   if (itemCount <= 0) {
     return 0;
@@ -203,6 +206,68 @@ export const DrumPickerNativeBase = forwardRef<
     }
   }, [pickerGroup, pickerName]);
 
+  const diagnosticsRef = useRef({
+    itemCount: labels.length,
+    index: resolvedSelectedIndex,
+  });
+  diagnosticsRef.current = {
+    itemCount: labels.length,
+    index: resolvedSelectedIndex,
+  };
+
+  useEffect(() => {
+    if (!__DEV__) {
+      return;
+    }
+    // A shrinking `items` list legitimately leaves selectedIndex out of range for the single
+    // render before the parent recomputes it, so only report a mismatch that outlives the tick.
+    const timer = setTimeout(() => {
+      const { itemCount, index } = diagnosticsRef.current;
+      if (itemCount === 0) {
+        console.warn(
+          '[DrumPicker] `items` is empty, so the picker renders nothing. ' +
+            'Render the picker only once you have items, or pass a non-empty array.'
+        );
+        return;
+      }
+      if (index < 0 || index > itemCount - 1) {
+        console.warn(
+          `[DrumPicker] selectedIndex ${index} is outside 0..${itemCount - 1}; ` +
+            `showing index ${clampIndex(index, itemCount)} instead. ` +
+            'Recompute selectedIndex whenever `items` changes.'
+        );
+      }
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [labels.length, resolvedSelectedIndex]);
+
+  const hasMeasuredRef = useRef(false);
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    if (event.nativeEvent.layout.height > 0) {
+      hasMeasuredRef.current = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!__DEV__) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      if (hasMeasuredRef.current) {
+        return;
+      }
+      console.warn(
+        '[DrumPicker] still has zero height after ' +
+          `${ZERO_HEIGHT_GRACE_MS}ms — it is mounted but will never be visible. ` +
+          'Usual causes: a parent with height 0 that never expands, a `display: none` ancestor, ' +
+          'or a parent sized by content that has none. ' +
+          'Give the picker or one of its parents a real height. ' +
+          'See "Common problems" in the README.'
+      );
+    }, ZERO_HEIGHT_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
   useEffect(() => {
     if (!pickerGroup || !pickerName) {
       return;
@@ -291,6 +356,7 @@ export const DrumPickerNativeBase = forwardRef<
       ref={nativeRef}
       {...(testID != null ? { testID } : {})}
       collapsable={false}
+      onLayout={handleLayout}
       items={nativeItems}
       selectedIndex={nativeSelectedIndex}
       circular={isCircular}
diff --git a/src/__tests__/DateDrumPickerControlled.test.tsx b/src/__tests__/DateDrumPickerControlled.test.tsx
new file mode 100644
index 0000000..1ab6b45
--- /dev/null
+++ b/src/__tests__/DateDrumPickerControlled.test.tsx
@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react-native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { resetNativeDrumPickerMocks } from '../__mocks__/DrumPickerViewNativeComponent';
+import { DateDrumPicker } from '../DateDrumPicker';
+import type { DateDrumPickerRef } from '../types';
+
+/**
+ * The acceptance scenario reported from a production integration: an accordion that mounts a
+ * controlled `DateDrumPicker` and expects the value alone to position every column, without ref
+ * calls, phased ranges or onChange suppression flags on the parent side.
+ */
+
+const MIN_DATE = { day: 1, month: 1, year: 1966 };
+const MAX_DATE = { day: 31, month: 12, year: 2031 };
+
+type ColumnState = { day: number; month: number; year: number };
+
+function readColumns(): ColumnState {
+  const pickers = screen.getAllByTestId('drum-picker-native');
+  const [dayPicker, monthPicker, yearPicker] = pickers;
+  const label = (node: (typeof pickers)[number], index: number) =>
+    node.props.items[index];
+  return {
+    day: Number(label(dayPicker!, dayPicker!.props.selectedIndex)),
+    month: monthPicker!.props.selectedIndex + 1,
+    year: Number(label(yearPicker!, yearPicker!.props.selectedIndex)),
+  };
+}
+
+describe('DateDrumPicker — controlled value positions every column', () => {
+  beforeEach(() => {
+    resetNativeDrumPickerMocks();
+  });
+
+  it('positions all columns from `value` on mount without any ref call', () => {
+    const onChange = jest.fn();
+    render(
+      <DateDrumPicker
+        mode="day-month-year"
+        locale="ru"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+        itemHeight={44}
+        visibleItemCount={5}
+      />
+    );
+
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('positions all columns when mounted inside a zero-height container', () => {
+    const onChange = jest.fn();
+    render(
+      <View style={{ height: 0, overflow: 'hidden' }}>
+        <DateDrumPicker
+          mode="day-month-year"
+          locale="ru"
+          value={{ day: 26, month: 7, year: 2026 }}
+          onChange={onChange}
+          minDate={MIN_DATE}
+          maxDate={MAX_DATE}
+        />
+      </View>
+    );
+
+    // Layout never happens in the JS test environment, which is exactly the collapsed case: the
+    // native view must still be told which index to centre.
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('follows an external `value` change without emitting onChange', () => {
+    const onChange = jest.fn();
+    const { rerender } = render(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+      />
+    );
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+
+    rerender(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 3, month: 2, year: 1999 }}
+        onChange={onChange}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+      />
+    );
+
+    expect(readColumns()).toEqual({ day: 3, month: 2, year: 1999 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('keeps the selected date when the range widens, and stays silent', () => {
+    const onChange = jest.fn();
+    const { rerender } = render(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+      />
+    );
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+
+    rerender(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={{ day: 1, month: 1, year: 1926 }}
+        maxDate={{ day: 31, month: 12, year: 2076 }}
+      />
+    );
+
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('keeps the selected date when the range narrows around it, and stays silent', () => {
+    const onChange = jest.fn();
+    const { rerender } = render(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={{ day: 1, month: 1, year: 1926 }}
+        maxDate={{ day: 31, month: 12, year: 2076 }}
+      />
+    );
+
+    rerender(
+      <DateDrumPicker
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        onChange={onChange}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+      />
+    );
+
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports the same date through getCurrentDate() as the columns show', () => {
+    const ref = React.createRef<DateDrumPickerRef>();
+    render(
+      <DateDrumPicker
+        ref={ref}
+        mode="day-month-year"
+        value={{ day: 26, month: 7, year: 2026 }}
+        minDate={MIN_DATE}
+        maxDate={MAX_DATE}
+      />
+    );
+
+    expect(ref.current?.getCurrentDate()).toEqual(readColumns());
+  });
+
+  it('survives the open/close cycle of a conditionally rendered section', () => {
+    const onChange = jest.fn();
+
+    function Host({ open }: { open: boolean }) {
+      const [date] = useState({ day: 26, month: 7, year: 2026 });
+      return open ? (
+        <DateDrumPicker
+          mode="day-month-year"
+          locale="ru"
+          value={date}
+          onChange={onChange}
+          minDate={MIN_DATE}
+          maxDate={MAX_DATE}
+          itemHeight={44}
+          visibleItemCount={5}
+        />
+      ) : null;
+    }
+
+    const { rerender } = render(<Host open={false} />);
+    expect(screen.queryAllByTestId('drum-picker-native')).toHaveLength(0);
+
+    rerender(<Host open />);
+    expect(readColumns()).toEqual({ day: 26, month: 7, year: 2026 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/snapshots/__snapshots__/DateDrumPicker.snapshot.test.tsx.snap b/src/__tests__/snapshots/__snapshots__/DateDrumPicker.snapshot.test.tsx.snap
index 984268e..6580469 100644
--- a/src/__tests__/snapshots/__snapshots__/DateDrumPicker.snapshot.test.tsx.snap
+++ b/src/__tests__/snapshots/__snapshots__/DateDrumPicker.snapshot.test.tsx.snap
@@ -57,6 +57,7 @@ exports[`DateDrumPicker snapshots matches day-month-year mode 1`] = `
         "31",
       ]
     }
+    onLayout={[Function]}
     onValueChange={[Function]}
     onValueChangingEnabled={false}
     scrollAnimated={false}
@@ -105,6 +106,7 @@ exports[`DateDrumPicker snapshots matches day-month-year mode 1`] = `
         "Dec",
       ]
     }
+    onLayout={[Function]}
     onValueChange={[Function]}
     onValueChangingEnabled={false}
     scrollAnimated={false}
@@ -292,6 +294,7 @@ exports[`DateDrumPicker snapshots matches day-month-year mode 1`] = `
         "2076",
       ]
     }
+    onLayout={[Function]}
     onValueChange={[Function]}
     onValueChangingEnabled={false}
     scrollAnimated={false}
diff --git a/src/__tests__/snapshots/__snapshots__/DrumPicker.snapshot.test.tsx.snap b/src/__tests__/snapshots/__snapshots__/DrumPicker.snapshot.test.tsx.snap
index dd88ac3..ead6454 100644
--- a/src/__tests__/snapshots/__snapshots__/DrumPicker.snapshot.test.tsx.snap
+++ b/src/__tests__/snapshots/__snapshots__/DrumPicker.snapshot.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`DrumPicker snapshots matches default render 1`] = `
       "Three",
     ]
   }
+  onLayout={[Function]}
   onValueChange={[Function]}
   onValueChangingEnabled={false}
   scrollAnimated={false}
diff --git a/src/dateDrumPickerLogic.ts b/src/dateDrumPickerLogic.ts
index 08fb947..91e297d 100644
--- a/src/dateDrumPickerLogic.ts
+++ b/src/dateDrumPickerLogic.ts
@@ -1,4 +1,18 @@
+/**
+ * A complete calendar date. All three fields are required: `DateDrumPicker` renders a column per
+ * field, so a partial value would silently fall back to today's date for whatever is missing.
+ *
+ * Use {@link DateDrumPickerPartialValue} for inputs that are allowed to be incomplete —
+ * `scrollToDate` and `clampDateDrumPickerValue` both accept it.
+ */
 export type DateDrumPickerValue = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+/** A date with any subset of fields — missing fields are filled in by clamping. */
+export type DateDrumPickerPartialValue = {
   day?: number;
   month?: number;
   year?: number;
@@ -42,10 +56,10 @@ export function clampDayForMonth(
 }
 
 export function clampDateDrumPickerValue(
-  value: DateDrumPickerValue,
+  value: DateDrumPickerPartialValue,
   minYear: number,
   maxYear: number
-): Required<DateDrumPickerValue> {
+): DateDrumPickerValue {
   const { minYear: min, maxYear: max } = normalizeYearRange(minYear, maxYear);
   const now = new Date();
   const month = clampMonth(value.month ?? now.getMonth() + 1);
diff --git a/src/index.tsx b/src/index.tsx
index a33429f..bfc2f75 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,6 +27,7 @@ export type {
   DateDrumPickerColumnKey,
   DateDrumPickerMode,
   DateDrumPickerMonthFormat,
+  DateDrumPickerPartialValue,
   DateDrumPickerProps,
   DateDrumPickerValue,
 } from './DateDrumPicker';

From 5059aa4e7f42e5de34828fa5b10280c00ab5ac8d Mon Sep 17 00:00:00 2001
From: scroll <ymarumar502@gmail.com>
Date: Mon, 27 Jul 2026 10:02:36 +0500
Subject: [PATCH 2/3] fix(android): correct row positioning under selection
 indicator and improve centering logic

---
 CHANGELOG.md                                  | 21 +++++++++++-----
 README.md                                     |  9 ++++---
 .../java/com/drumpicker/DrumPickerView.kt     | 25 ++++++++++++++++---
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7085b85..e776a40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,14 @@ mounting, two-phase range changes and `onChange` suppression flags.
 
 ### Bug Fixes
 
+* **android:** put the selected row under the selection indicator instead of
+  `(visibleItemCount - 1) / 2` rows below it. `scrollToPositionWithOffset` measures its offset from
+  the layout manager's start *after padding*, but the offset was computed from the viewport centre
+  as if padding did not exist — and the picker reserves exactly that many rows of top padding. The
+  wheel therefore showed a row two positions early at the default `visibleItemCount = 5`. It went
+  unnoticed because the old code then forced `selectedIndex` to the requested value regardless of
+  where the wheel had actually landed, which is why the reported symptom was "JS state is correct,
+  only the rendering disagrees".
 * **android:** center on `selectedIndex` when the picker mounts without a size. Centering was
   scheduled through nested `post` calls and computed its offset from a height that was still `0`,
   so a picker mounted in a collapsed container stayed on index 0. The request is now parked and
@@ -64,12 +72,13 @@ Fixes were derived from React Native 0.86's own layout and touch plumbing —
 `DialogRootViewGroup.requestDisallowInterceptTouchEvent` likewise — which is why the picker now
 drives the RecyclerView's measure/layout itself and hands gestures over explicitly.
 
-The JS suite and a standalone compile against RN 0.86 both pass. The Android instrumented tests
-(`DrumPickerRegressionTest`) and the iOS `DrumPickerWheelViewTests` additions ship with this
-release but were **not executed** in the environment the fix was written in, and the reporter's
-`Modal` scenario was not re-run on a device. Run
-`./gradlew :react-native-drum-picker:connectedDebugAndroidTest` before trusting the Android
-behaviour blind.
+The JS suite and a standalone compile against RN 0.86 both pass. `DrumPickerRegressionTest` ran on
+an emulator in CI and caught the centering-offset bug above, which every pre-existing test had
+missed because they only asserted the *reported* index and never the row actually sitting under the
+indicator.
+
+Still unverified: the iOS `DrumPickerWheelViewTests` additions, and the reporter's `Modal` scenario
+on a device.
 
 ## [0.2.4](https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.2.3...v0.2.4) (2026-05-28)
 
diff --git a/README.md b/README.md
index 5269d69..c04e96a 100644
--- a/README.md
+++ b/README.md
@@ -759,10 +759,11 @@ picker now also calls `NativeGestureUtil.notifyNativeGestureStarted`, which rout
 `onChildStartedNativeGesture` — the one channel that still reaches the touch dispatcher inside a
 dialog root.
 
-> **Caveat:** this was fixed by analysis of React Native 0.86's own layout and touch plumbing, not
-> by a reproduction on a device — the reporter's original scenario was never re-run. If `Modal`
-> still misbehaves for you, please open an issue with your RN version; the alternatives below are
-> known-good either way.
+> **Caveat:** this was derived from React Native 0.86's own layout and touch plumbing, not from a
+> reproduction on a device — the reporter's original scenario was never re-run inside a `Modal`.
+> The underlying centering fix is covered by instrumented tests, the gesture handoff is not. If
+> `Modal` still misbehaves for you, please open an issue with your RN version; the alternatives
+> below are known-good either way.
 
 If you would rather not depend on it, any of these avoids the extra window entirely:
 
diff --git a/android/src/main/java/com/drumpicker/DrumPickerView.kt b/android/src/main/java/com/drumpicker/DrumPickerView.kt
index c8c2629..bebc3b9 100644
--- a/android/src/main/java/com/drumpicker/DrumPickerView.kt
+++ b/android/src/main/java/com/drumpicker/DrumPickerView.kt
@@ -323,8 +323,10 @@ class DrumPickerView @JvmOverloads constructor(
     val holder = recyclerView.findViewHolderForAdapterPosition(position)
     if (holder == null) {
       if (recyclerView.height > 0) {
-        val centerOffset = ((recyclerView.height - itemHeightPx) / 2).coerceAtLeast(0)
-        layoutManager.scrollToPositionWithOffset(position, centerOffset)
+        layoutManager.scrollToPositionWithOffset(
+          position,
+          centerOffsetForViewport(recyclerView.height),
+        )
       } else {
         layoutManager.scrollToPosition(position)
       }
@@ -712,8 +714,7 @@ class DrumPickerView @JvmOverloads constructor(
    * during layout" every time this runs from [onLayout].
    */
   private fun applyCenterAnchor(index: Int, width: Int, height: Int) {
-    val centerOffset = ((height - itemHeightPx) / 2).coerceAtLeast(0)
-    layoutManager.scrollToPositionWithOffset(index, centerOffset)
+    layoutManager.scrollToPositionWithOffset(index, centerOffsetForViewport(height))
     if (recyclerView.isComputingLayout) {
       // The in-flight pass will pick the anchor up; re-entering layout here would throw.
       return
@@ -726,6 +727,22 @@ class DrumPickerView @JvmOverloads constructor(
     recyclerView.layout(0, 0, width, height)
   }
 
+  /**
+   * Offset to pass to [LinearLayoutManager.scrollToPositionWithOffset] so the row lands under the
+   * selection indicator.
+   *
+   * That offset is measured from the layout manager's start *after padding*, not from the top of
+   * the view. [applyRecyclerPadding] reserves `itemHeight * (visibleItemCount - 1) / 2` at the
+   * top, so an offset computed straight from the viewport centre pushes the anchor that many rows
+   * too low — the wheel then shows a row `(visibleItemCount - 1) / 2` earlier than the selected
+   * one. Subtracting the padding cancels it out; for the natural height the result is 0.
+   *
+   * The result may legitimately be negative when the container is shorter than
+   * `itemHeight * visibleItemCount`, so it is deliberately not clamped.
+   */
+  private fun centerOffsetForViewport(height: Int): Int =
+    (height - itemHeightPx) / 2 - recyclerView.paddingTop
+
   private fun updateCenterFromSnap() {
     if (!isLifecycleActive() || items.isEmpty()) {
       return

From b856aba5d66c8419b2c9afe44a8f469d4af2e241 Mon Sep 17 00:00:00 2001
From: scroll <ymarumar502@gmail.com>
Date: Mon, 27 Jul 2026 10:08:26 +0500
Subject: [PATCH 3/3] fix(android): improve user interaction by releasing
 change suppression on drag start

---
 CHANGELOG.md                                  |  5 +++
 .../drumpicker/DrumPickerRegressionTest.kt    | 43 +++++++++++++++++++
 .../java/com/drumpicker/DrumPickerView.kt     | 16 ++++++-
 example/src/App.tsx                           | 19 ++++----
 src/DrumPicker.native.tsx                     | 11 ++---
 5 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e776a40..53d671d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,11 @@ mounting, two-phase range changes and `onChange` suppression flags.
   and nothing re-centred.
 * **ios:** re-resolve the selection from the requested index on `setItems`, and reassert it in
   `layoutSubviews`, matching the Android behaviour for zero-size mounts and list swaps.
+* **android:** stop swallowing the user's `onChange` when they grab the wheel mid-animation. An
+  animated programmatic scroll armed change suppression until the wheel settled; a drag that
+  interrupted it settled under that same flag, so the row the user chose was applied silently.
+  Suppression is now released as soon as a drag starts, and is never armed when the target row is
+  already centred (no scroll would follow, so nothing would release it).
 * **DateDrumPicker:** clamp the year column's `selectedIndex` like the day and month columns.
 
 ### Features
diff --git a/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt b/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
index f740713..45b1277 100644
--- a/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
+++ b/android/src/androidTest/java/com/drumpicker/DrumPickerRegressionTest.kt
@@ -3,6 +3,9 @@ package com.drumpicker
 import androidx.test.core.app.ActivityScenario
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import androidx.test.platform.app.InstrumentationRegistry
+import com.facebook.react.bridge.JavaOnlyArray
+import com.facebook.react.bridge.JavaOnlyMap
+import com.facebook.react.uimanager.ReactStylesDiffMap
 import java.util.concurrent.CopyOnWriteArrayList
 import java.util.concurrent.CountDownLatch
 import java.util.concurrent.TimeUnit
@@ -174,6 +177,46 @@ class DrumPickerRegressionTest {
     }
   }
 
+  /**
+   * The view-level tests above apply the setters in the worst possible order by hand. This one
+   * goes through [DrumPickerViewManager.updateProperties] instead, which is what Fabric actually
+   * calls — with a `ReactStylesDiffMap` whose backing HashMap has no meaningful iteration order.
+   */
+  @Test
+  fun viewManagerAppliesItemsBeforeSelectedIndex() {
+    ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
+      val manager = DrumPickerViewManager()
+      val wide = (1926..2076).map(Int::toString)
+      val narrow = (1966..2031).map(Int::toString)
+
+      onUiThread(scenario) { activity ->
+        manager.updateProperties(activity.picker, styleProps(wide, wide.indexOf("2026")))
+        activity.picker.setItemHeightProp(CollapsedTestActivity.ITEM_HEIGHT_DP)
+        activity.picker.setVisibleItemCountProp(CollapsedTestActivity.VISIBLE_ITEM_COUNT)
+        activity.expand()
+      }
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+
+      val emitted = CopyOnWriteArrayList<Int>()
+      onUiThread(scenario) { activity ->
+        activity.picker.changeEventListenerForTesting = { emitted.add(it) }
+        manager.updateProperties(activity.picker, styleProps(narrow, narrow.indexOf("2026")))
+      }
+
+      assertEquals("2026", readAfterFrame(scenario) { it.picker.centeredLabelForTesting() })
+      assertEquals("prop transaction must not emit onChange", emptyList<Int>(), emitted)
+    }
+  }
+
+  private fun styleProps(items: List<String>, selectedIndex: Int): ReactStylesDiffMap {
+    val array = JavaOnlyArray()
+    items.forEach { array.pushString(it) }
+    val map = JavaOnlyMap()
+    map.putArray("items", array)
+    map.putInt("selectedIndex", selectedIndex)
+    return ReactStylesDiffMap(map)
+  }
+
   @Test
   fun dependentColumnItemsChangeKeepsSelection() {
     ActivityScenario.launch(CollapsedTestActivity::class.java).use { scenario ->
diff --git a/android/src/main/java/com/drumpicker/DrumPickerView.kt b/android/src/main/java/com/drumpicker/DrumPickerView.kt
index bebc3b9..09d7e60 100644
--- a/android/src/main/java/com/drumpicker/DrumPickerView.kt
+++ b/android/src/main/java/com/drumpicker/DrumPickerView.kt
@@ -122,6 +122,9 @@ class DrumPickerView @JvmOverloads constructor(
         when (newState) {
           RecyclerView.SCROLL_STATE_DRAGGING -> {
             notifyNativeGestureStartedIfNeeded()
+            // The user has taken the wheel over. Whatever programmatic animation was in flight is
+            // no longer responsible for where it lands, so stop suppressing the resulting change.
+            suppressChangeEvent = false
             lastChangingIndex = -1
             updateVisibleItemStyles()
           }
@@ -662,10 +665,21 @@ class DrumPickerView @JvmOverloads constructor(
     }
     val index = selectedIndex.coerceIn(0, items.size - 1)
     if (animated) {
+      val current = findSnapCenterIndex()
+      if (current == index && recyclerView.scrollState == RecyclerView.SCROLL_STATE_IDLE) {
+        // Already under the indicator. Arming suppression here would leave it latched: there is
+        // no scroll, so no SCROLL_STATE_IDLE transition would ever come to clear it.
+        if (emit) {
+          maybeEmitChange(index)
+        } else {
+          selectedIndex = index
+          lastEmittedIndex = index
+        }
+        return
+      }
       suppressChangeEvent = !emit
       // Smooth-scrolling across a long list binds every row in between, which drops frames on a
       // year wheel. Jump to just outside the animation window first and animate only the tail.
-      val current = findSnapCenterIndex()
       if (current != RecyclerView.NO_POSITION && abs(current - index) > MAX_ANIMATED_ROWS) {
         val approach =
           if (index > current) index - MAX_ANIMATED_ROWS else index + MAX_ANIMATED_ROWS
diff --git a/example/src/App.tsx b/example/src/App.tsx
index fde5ea9..0689505 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -74,17 +74,16 @@ export default function App() {
     month: 9,
     year: 2026,
   });
-  const [bookingDate, setBookingDate] = useState<DateDrumPickerValue>(() => {
-    const today = new Date();
-    return {
-      day: today.getDate(),
-      month: today.getMonth() + 1,
-      year: today.getFullYear(),
-    };
-  });
+  // One snapshot for both the value and the bounds: taking `new Date()` twice can straddle
+  // midnight and leave the controlled value a day below minDate, forcing a clamp on mount.
+  const today = useMemo(() => new Date(), []);
+  const [bookingDate, setBookingDate] = useState<DateDrumPickerValue>(() => ({
+    day: today.getDate(),
+    month: today.getMonth() + 1,
+    year: today.getFullYear(),
+  }));
 
   const bookingMinMax = useMemo(() => {
-    const today = new Date();
     const nextYear = new Date(today);
     nextYear.setFullYear(today.getFullYear() + 1);
     return {
@@ -99,7 +98,7 @@ export default function App() {
         year: nextYear.getFullYear(),
       },
     };
-  }, []);
+  }, [today]);
 
   const saveDebounced = useDebouncedCallback((value: string) => {
     setDebouncedLog(value);
diff --git a/src/DrumPicker.native.tsx b/src/DrumPicker.native.tsx
index 8fc08ac..4706e5c 100644
--- a/src/DrumPicker.native.tsx
+++ b/src/DrumPicker.native.tsx
@@ -257,11 +257,12 @@ export const DrumPickerNativeBase = forwardRef<
         return;
       }
       console.warn(
-        '[DrumPicker] still has zero height after ' +
-          `${ZERO_HEIGHT_GRACE_MS}ms — it is mounted but will never be visible. ` +
-          'Usual causes: a parent with height 0 that never expands, a `display: none` ancestor, ' +
-          'or a parent sized by content that has none. ' +
-          'Give the picker or one of its parents a real height. ' +
+        '[DrumPicker] has had zero height for ' +
+          `${ZERO_HEIGHT_GRACE_MS}ms, so nothing is visible yet. ` +
+          'Expected while a collapsing container is closed — the picker centres itself as soon ' +
+          'as it is laid out, so you can ignore this if the section is deliberately collapsed. ' +
+          'Otherwise the usual causes are a parent stuck at height 0, a `display: none` ' +
+          'ancestor, or a parent sized by content that has none. ' +
           'See "Common problems" in the README.'
       );
     }, ZERO_HEIGHT_GRACE_MS);