react-native-drum-picker 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -9,6 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 _No changes yet._
 
+## [0.1.5] - 2026-05-22
+
+### Fixed
+
+- Center `selectedIndex` reliably using `scrollToPositionWithOffset` with a computed center offset (after items, layout, and metric changes).
+- Cancel pending scroll work and `stopScroll()` on detach; broader lifecycle guards for navigation transitions.
+
+### Changed
+
+- JS `DrumPicker` applies default `minWidth` / `height` (or `minHeight` with flex) so the picker is visible without manual sizing.
+- Android native `minimumWidth` / `minimumHeight` aligned with `itemHeight * visibleItemCount`.
+- One-time `__DEV__` warning when layout dimensions are missing.
+
+### Documentation
+
+- README: tested compatibility matrix, practical examples, `onChange` / debounce guidance.
+- Example app: basic, time, height/weight, date, controlled, debounced demos.
+- Bug report template: Expo, react-native-screens, navigation crash, empty picker.
+
 ## [0.1.4] - 2026-05-22
 
 ### Fixed
@@ -63,7 +82,8 @@ First release on [npm](https://www.npmjs.com/package/react-native-drum-picker).
 
 Initial GitHub release. See [v0.0.1](https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.0.1).
 
-[Unreleased]: https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.1.4...HEAD
+[Unreleased]: https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.1.5...HEAD
+[0.1.5]: https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.1.5
 [0.1.4]: https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.1.4
 [0.1.2]: https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.1.2
 [0.1.1]: https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.1.1

package/README.md

@@ -67,22 +67,27 @@ Requires **React Native 0.76+** with the **New Architecture** enabled.
 | React Native New Architecture | **Required** |
 | Fabric | **Required** |
 | Android | Supported |
-| iOS | Not supported yet |
-| Expo SDK 54 | Supported via **prebuild** / development build |
-| React Native 0.81+ | Supported |
-| Expo Go | **Not supported** (native module) |
+| iOS | **Not supported yet** |
+| Expo Go | **Not supported** (native Android library) |
+| Expo SDK 54 + dev build / prebuild | Tested |
+| `react-native-screens` navigation | Tested (use **0.1.4+** for detach safety) |
 
-This package is an **Android Fabric View** library. New Architecture must be enabled (`newArchEnabled: true` in Expo, or equivalent in bare React Native).
+### Tested with
 
-Recommended: **React Native >= 0.76**. Use a **development build** or `expo run:android` after `expo prebuild` — not Expo Go.
+| Tool | Version |
+|------|---------|
+| Expo SDK | 54 |
+| React Native | 0.81.5, 0.85.0 (example app) |
+| New Architecture | enabled |
+| Android | emulator / device |
 
-### React Native 0.81+ event dispatch
+**Intended range:** `react-native >= 0.76` with New Architecture. The package is **actively tested on RN 0.81.x / 0.85.x**. Older 0.76–0.80 may work but are not CI-guaranteed.
 
-If Android Kotlin compile fails with:
+This package is an **Android Fabric View** library. Use a **development build** or `expo run:android` after `expo prebuild` — not Expo Go.
 
-`No value passed for parameter 'uiManagerType'`
+### React Native 0.81+ event dispatch
 
-upgrade to a release that dispatches Fabric events with `UIManagerType.FABRIC` (0.1.3+).
+If Android Kotlin compile fails with `No value passed for parameter 'uiManagerType'`, upgrade to **0.1.3+** (Fabric `UIManagerType.FABRIC`).
 
 ## Basic usage
 
@@ -105,7 +110,73 @@ export function Example() {
 }
 ```
 
-Set `style.height` ≈ `itemHeight * visibleItemCount` (default `44 × 5 = 220`).
+### Layout defaults (0.1.5+)
+
+The JS wrapper applies **`minWidth: 64`** and, unless you use flex or pass `height` / `minHeight`, **`height: itemHeight * visibleItemCount`** (default **220**). Native Android also sets matching `minimumWidth` / `minimumHeight`.
+
+For production layouts, still pass explicit dimensions:
+
+```tsx
+style={{ width: 120, height: itemHeight * visibleItemCount }}
+```
+
+In `__DEV__`, a **one-time** warning is logged if neither height nor flex sizing is provided.
+
+## Examples
+
+### Time picker (hour · minute)
+
+```tsx
+const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
+
+<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <DrumPicker items={hours} style={{ width: 72, height: 220 }} />
+  <DrumPicker items={minutes} style={{ width: 72, height: 220 }} />
+</View>
+```
+
+### Height / weight row (onboarding style)
+
+```tsx
+<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <DrumPicker items={heightsCm} style={{ width: 90, height: 220 }} />
+  <DrumPicker items={weightsKg} style={{ width: 96, height: 220 }} />
+</View>
+```
+
+### Controlled `selectedIndex`
+
+```tsx
+const [index, setIndex] = useState(1);
+
+<DrumPicker
+  items={items}
+  selectedIndex={index}
+  onChange={(e) => setIndex(e.nativeEvent.index)}
+  style={{ width: 120, height: 220 }}
+/>
+```
+
+### `onChange` and expensive side effects
+
+Native emits `onChange` when the wheel **snaps to idle** and the **centered index changes** (duplicate indices are ignored). Use it for UI state. For AsyncStorage, APIs, or analytics, **debounce** in your app:
+
+```tsx
+const save = useMemo(() => {
+  let t: ReturnType<typeof setTimeout> | undefined;
+  return (value: string) => {
+    if (t) clearTimeout(t);
+    t = setTimeout(() => {
+      // persist value
+    }, 300);
+  };
+}, []);
+
+<DrumPicker onChange={(e) => save(e.nativeEvent.value)} ... />
+```
+
+See the **example** app (`example/src/App.tsx`) for basic, time, height/weight, date, controlled, and debounced demos.
 
 ## DateDrumPicker
 
@@ -246,12 +317,14 @@ Use an **odd** `visibleItemCount` (e.g. `5`) for a symmetric wheel.
 | Metro shows old code | `npx react-native start --reset-cache` |
 | 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; set explicit `width` / `height` in `style` |
+| 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 |
 | Props not applied | Rebuild app after native changes; run `yarn build` in the library before packing |
 | iOS | Not supported — Android only |
 | Expo Go | Use prebuild + dev build; this library is not in Expo Go |
 | RN 0.81 `uiManagerType` compile error | Upgrade to 0.1.3+ |
 | Crash when leaving a screen | Upgrade to 0.1.4+ (safe `onDetachedFromWindow` with react-native-screens) |
+| npm shows “no README” | Often a registry UI lag; run `npm view react-native-drum-picker readme` — if content appears, hard-refresh the package page |
 
 ### Android build fails in Expo / React Native 0.81+
 

package/android/src/main/java/com/drumpicker/DrumPickerAdapter.kt

@@ -76,6 +76,7 @@ internal class DrumPickerAdapter(
     textView.layoutParams =
       (textView.layoutParams as RecyclerView.LayoutParams).apply { this.height = height }
     textView.text = items[position]
+    textView.contentDescription = items[position]
     textView.setBackgroundColor(itemBackgroundColor)
     holder.lastStyleBucket = Int.MIN_VALUE
     val distance = distanceForPosition?.invoke(position) ?: 2f

package/android/src/main/java/com/drumpicker/DrumPickerDefaults.kt

@@ -8,6 +8,7 @@ import android.graphics.Color
 internal object DrumPickerDefaults {
   const val ITEM_HEIGHT_DP = 44f
   const val VISIBLE_ITEM_COUNT = 5
+  const val MIN_WIDTH_DP = 64f
   const val TEXT_SIZE_SP = 20f
   const val SELECTED_TEXT_SIZE_SP = 22f
   const val SELECTION_INDICATOR_HEIGHT_DP = 1f

package/android/src/main/java/com/drumpicker/DrumPickerView.kt

@@ -51,6 +51,8 @@ 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)
 
   private val styleUpdateRunnable =
     Runnable {
@@ -120,11 +122,12 @@ class DrumPickerView @JvmOverloads constructor(
     applyBackgroundColors()
     applyRecyclerPadding()
     updateIndicatorAppearance()
+    updateMinimumDimensions()
   }
 
   fun setItemsProp(value: Any?) {
     val newItems = parseItems(value)
-    if (newItems == items) {
+    if (itemsContentEquals(newItems, items)) {
       return
     }
 
@@ -139,7 +142,7 @@ class DrumPickerView @JvmOverloads constructor(
     }
 
     selectedIndex = selectedIndex.coerceIn(0, items.size - 1)
-    runWhenAttached { scrollToSelectedIndex(animated = false, emit = false) }
+    runWhenAttached { scheduleScrollToSelectedIndexCentered(animated = false, emit = false) }
   }
 
   fun setSelectedIndexProp(value: Any?) {
@@ -215,13 +218,11 @@ class DrumPickerView @JvmOverloads constructor(
   }
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
-    val width = resolveSize(suggestedMinimumWidth, widthMeasureSpec)
+    updateMinimumDimensions()
+    val width = resolveSize(minWidthPx, widthMeasureSpec)
     val safeVisibleCount = visibleItemCount.coerceAtLeast(1)
-    val height =
-      resolveSize(
-        (itemHeightPx * safeVisibleCount).coerceAtLeast(suggestedMinimumHeight),
-        heightMeasureSpec,
-      )
+    val defaultHeight = itemHeightPx * safeVisibleCount
+    val height = resolveSize(defaultHeight, heightMeasureSpec)
 
     val childWidthSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY)
     val childHeightSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
@@ -237,7 +238,7 @@ class DrumPickerView @JvmOverloads constructor(
     layoutSelectionIndicators(width, height)
     if (changed) {
       applyRecyclerPadding()
-      runWhenAttached { scrollToSelectedIndex(animated = false, emit = false) }
+      runWhenAttached { scheduleScrollToSelectedIndexCentered(animated = false, emit = false) }
     }
   }
 
@@ -245,6 +246,7 @@ class DrumPickerView @JvmOverloads constructor(
     super.onAttachedToWindow()
     isAttachedToWindow = true
     isDisposed = false
+    suppressChangeEvent = false
     recyclerView.removeOnScrollListener(scrollListener)
     recyclerView.addOnScrollListener(scrollListener)
   }
@@ -252,7 +254,10 @@ class DrumPickerView @JvmOverloads constructor(
   override fun onDetachedFromWindow() {
     isAttachedToWindow = false
     isDisposed = true
+    suppressChangeEvent = false
     styleUpdatePosted = false
+    cancelPendingScroll()
+    recyclerView.stopScroll()
     recyclerView.removeCallbacks(styleUpdateRunnable)
     removeCallbacks(null)
     recyclerView.removeCallbacks(null)
@@ -271,11 +276,15 @@ class DrumPickerView @JvmOverloads constructor(
     }
     val clamped = index.coerceIn(0, items.size - 1)
     val snapIndex = findSnapCenterIndex()
-    if (clamped == selectedIndex && snapIndex == clamped) {
+    val isAlreadyCentered =
+      clamped == selectedIndex &&
+        snapIndex == clamped &&
+        recyclerView.scrollState == RecyclerView.SCROLL_STATE_IDLE
+    if (isAlreadyCentered) {
       return
     }
     selectedIndex = clamped
-    scrollToSelectedIndex(animated = false, emit = false)
+    scheduleScrollToSelectedIndexCentered(animated = false, emit = false)
   }
 
   fun setItemHeight(height: Float) {
@@ -287,6 +296,7 @@ class DrumPickerView @JvmOverloads constructor(
     adapter.itemHeightPx = itemHeightPx
     adapter.notifyRowMetricsChanged()
     applyRecyclerPadding()
+    updateMinimumDimensions()
     requestLayout()
   }
 
@@ -296,9 +306,16 @@ class DrumPickerView @JvmOverloads constructor(
     }
     visibleItemCount = count
     applyRecyclerPadding()
+    updateMinimumDimensions()
     requestLayout()
   }
 
+  private fun updateMinimumDimensions() {
+    val safeVisibleCount = visibleItemCount.coerceAtLeast(1)
+    minimumHeight = itemHeightPx * safeVisibleCount
+    minimumWidth = minWidthPx
+  }
+
   fun setTextColor(color: Int) {
     textColor = color
     syncAdapterStyle()
@@ -391,7 +408,36 @@ class DrumPickerView @JvmOverloads constructor(
     bottomIndicator.requestLayout()
   }
 
-  private fun scrollToSelectedIndex(animated: Boolean, emit: Boolean) {
+  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)
+    }
+  }
+
+  private fun cancelPendingScroll() {
+    pendingScrollRunnable?.let { pending ->
+      recyclerView.removeCallbacks(pending)
+      removeCallbacks(pending)
+    }
+    pendingScrollRunnable = null
+  }
+
+  private fun scrollToSelectedIndexCentered(animated: Boolean, emit: Boolean) {
     if (!isLifecycleActive() || items.isEmpty()) {
       return
     }
@@ -402,16 +448,30 @@ class DrumPickerView @JvmOverloads constructor(
       return
     }
 
-    layoutManager.scrollToPositionWithOffset(index, 0)
+    if (recyclerView.height <= 0) {
+      scheduleScrollToSelectedIndexCentered(animated = false, emit = emit)
+      return
+    }
+
+    val centerOffset = ((recyclerView.height - itemHeightPx) / 2).coerceAtLeast(0)
+    layoutManager.scrollToPositionWithOffset(index, centerOffset)
     recyclerView.post {
       if (!isLifecycleActive()) {
         return@post
       }
+      val snappedIndex = findSnapCenterIndex()
+      if (snappedIndex != RecyclerView.NO_POSITION && snappedIndex != index) {
+        layoutManager.scrollToPositionWithOffset(snappedIndex, centerOffset)
+        selectedIndex = snappedIndex
+      }
       updateVisibleItemStyles()
+      val resolvedIndex =
+        if (snappedIndex != RecyclerView.NO_POSITION) snappedIndex else index
       if (emit) {
-        maybeEmitChange(index)
+        maybeEmitChange(resolvedIndex)
       } else {
-        lastEmittedIndex = index
+        lastEmittedIndex = resolvedIndex
+        selectedIndex = resolvedIndex
       }
       suppressChangeEvent = false
     }
@@ -506,7 +566,8 @@ class DrumPickerView @JvmOverloads constructor(
     if (!reactContext.hasActiveReactInstance()) {
       return
     }
-    // Fabric-only: RN 0.81+ requires uiManagerType when resolving the event dispatcher.
+    // Fabric-only: pass UIManagerType.FABRIC for RN 0.81–0.84; deprecated but still required there.
+    @Suppress("DEPRECATION")
     val dispatcher: EventDispatcher? =
       UIManagerHelper.getEventDispatcher(reactContext, UIManagerType.FABRIC)
     dispatcher?.dispatchEvent(
@@ -589,4 +650,19 @@ class DrumPickerView @JvmOverloads constructor(
 
   private fun dpToPx(dp: Float): Int =
     (dp * resources.displayMetrics.density + 0.5f).toInt()
+
+  private fun itemsContentEquals(a: List<String>, b: List<String>): Boolean {
+    if (a === b) {
+      return true
+    }
+    if (a.size != b.size) {
+      return false
+    }
+    for (i in a.indices) {
+      if (a[i] != b[i]) {
+        return false
+      }
+    }
+    return true
+  }
 }

package/lib/module/DateDrumPicker.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { buildDayItems, buildMonthItems, buildYearItems, clampDateDrumPickerValue, clampDayForMonth, clampYear, normalizeYearRange, parseMonthFromLabel } from "./dateDrumPickerLogic.js";
 import { DrumPicker } from './DrumPicker';
@@ -75,6 +75,20 @@ export function DateDrumPicker({
     }
     onChange?.(next);
   }, [isControlled, onChange, resolvedValue, minYear, maxYear]);
+
+  // Controlled: parent may pass day 31 + April — clamp and notify once.
+  useEffect(() => {
+    if (!isControlled || !onChange || value === undefined) {
+      return;
+    }
+    const clamped = clampDateDrumPickerValue(value, minYear, maxYear);
+    const day = value.day ?? clamped.day;
+    const month = value.month ?? clamped.month;
+    const year = value.year ?? clamped.year;
+    if (day !== clamped.day || month !== clamped.month || year !== clamped.year) {
+      onChange(clamped);
+    }
+  }, [isControlled, onChange, value, minYear, maxYear]);
   const sharedPickerProps = {
     itemHeight,
     visibleItemCount,

package/lib/module/DrumPicker.native.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { StyleSheet } from 'react-native';
 import DrumPickerNative from './DrumPickerViewNativeComponent';
+import { resolveDrumPickerStyle } from "./drumPickerLayout.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULTS = {
   selectedIndex: 0,
@@ -36,10 +36,7 @@ export function DrumPicker({
   onChange,
   style
 }) {
-  const pickerHeight = itemHeight * visibleItemCount;
-  const pickerStyle = StyleSheet.flatten([{
-    height: pickerHeight
-  }, style]);
+  const pickerStyle = resolveDrumPickerStyle(itemHeight, visibleItemCount, style);
   return /*#__PURE__*/_jsx(DrumPickerNative, {
     collapsable: false,
     items: items,

package/lib/module/drumPickerLayout.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+let didWarnMissingLayout = false;
+
+/**
+ * Merges consumer style with sensible defaults so the native picker is visible
+ * without forcing dimensions when flex layout is used.
+ */
+export function resolveDrumPickerStyle(itemHeight, visibleItemCount, style) {
+  const flat = StyleSheet.flatten(style) ?? {};
+  const pickerHeight = itemHeight * visibleItemCount;
+  const hasExplicitHeight = flat.height != null || flat.minHeight != null || flat.maxHeight != null;
+  const usesFlex = flat.flex != null || flat.flexGrow != null || flat.flexShrink != null || flat.alignSelf === 'stretch';
+  if (__DEV__ && !didWarnMissingLayout && !hasExplicitHeight && !usesFlex) {
+    didWarnMissingLayout = true;
+    console.warn('react-native-drum-picker: DrumPicker needs a visible height. ' + `Defaulting to itemHeight * visibleItemCount (${pickerHeight}). ` + 'Pass style={{ height: ... }} or style={{ minHeight: ... }} for precise control.');
+  }
+  const sizeDefaults = hasExplicitHeight || usesFlex ? {
+    minWidth: 64,
+    minHeight: pickerHeight
+  } : {
+    minWidth: 64,
+    minHeight: pickerHeight,
+    height: pickerHeight
+  };
+  return StyleSheet.flatten([sizeDefaults, style]);
+}
+//# sourceMappingURL=drumPickerLayout.js.map

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

@@ -0,0 +1,7 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Merges consumer style with sensible defaults so the native picker is visible
+ * without forcing dimensions when flex layout is used.
+ */
+export declare function resolveDrumPickerStyle(itemHeight: number, visibleItemCount: number, style?: StyleProp<ViewStyle>): ViewStyle;
+//# sourceMappingURL=drumPickerLayout.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-drum-picker",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Android-native iOS-style drum/wheel picker for React Native (Fabric)",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",

package/src/DateDrumPicker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   StyleSheet,
   View,
@@ -164,6 +164,24 @@ export function DateDrumPicker({
     [isControlled, onChange, resolvedValue, minYear, maxYear]
   );
 
+  // Controlled: parent may pass day 31 + April — clamp and notify once.
+  useEffect(() => {
+    if (!isControlled || !onChange || value === undefined) {
+      return;
+    }
+    const clamped = clampDateDrumPickerValue(value, minYear, maxYear);
+    const day = value.day ?? clamped.day;
+    const month = value.month ?? clamped.month;
+    const year = value.year ?? clamped.year;
+    if (
+      day !== clamped.day ||
+      month !== clamped.month ||
+      year !== clamped.year
+    ) {
+      onChange(clamped);
+    }
+  }, [isControlled, onChange, value, minYear, maxYear]);
+
   const sharedPickerProps = {
     itemHeight,
     visibleItemCount,

package/src/DrumPicker.native.tsx

@@ -1,5 +1,5 @@
-import { StyleSheet } from 'react-native';
 import DrumPickerNative from './DrumPickerViewNativeComponent';
+import { resolveDrumPickerStyle } from './drumPickerLayout';
 import type { DrumPickerProps } from './types';
 
 const DEFAULTS = {
@@ -36,13 +36,11 @@ export function DrumPicker({
   onChange,
   style,
 }: DrumPickerProps) {
-  const pickerHeight = itemHeight * visibleItemCount;
-  const pickerStyle = StyleSheet.flatten([
-    {
-      height: pickerHeight,
-    },
-    style,
-  ]);
+  const pickerStyle = resolveDrumPickerStyle(
+    itemHeight,
+    visibleItemCount,
+    style
+  );
 
   return (
     <DrumPickerNative

package/src/drumPickerLayout.ts

@@ -0,0 +1,39 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+
+let didWarnMissingLayout = false;
+
+/**
+ * Merges consumer style with sensible defaults so the native picker is visible
+ * without forcing dimensions when flex layout is used.
+ */
+export function resolveDrumPickerStyle(
+  itemHeight: number,
+  visibleItemCount: number,
+  style?: StyleProp<ViewStyle>
+): ViewStyle {
+  const flat = StyleSheet.flatten(style) ?? {};
+  const pickerHeight = itemHeight * visibleItemCount;
+  const hasExplicitHeight =
+    flat.height != null || flat.minHeight != null || flat.maxHeight != null;
+  const usesFlex =
+    flat.flex != null ||
+    flat.flexGrow != null ||
+    flat.flexShrink != null ||
+    flat.alignSelf === 'stretch';
+
+  if (__DEV__ && !didWarnMissingLayout && !hasExplicitHeight && !usesFlex) {
+    didWarnMissingLayout = true;
+    console.warn(
+      'react-native-drum-picker: DrumPicker needs a visible height. ' +
+        `Defaulting to itemHeight * visibleItemCount (${pickerHeight}). ` +
+        'Pass style={{ height: ... }} or style={{ minHeight: ... }} for precise control.'
+    );
+  }
+
+  const sizeDefaults: ViewStyle =
+    hasExplicitHeight || usesFlex
+      ? { minWidth: 64, minHeight: pickerHeight }
+      : { minWidth: 64, minHeight: pickerHeight, height: pickerHeight };
+
+  return StyleSheet.flatten([sizeDefaults, style]) as ViewStyle;
+}