react-native-drum-picker 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# Changelog
+
+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).
+
+## [Unreleased]
+
+### Added
+
+- Android-native `DrumPicker` Fabric view (Kotlin, `RecyclerView`, snap-to-center).
+- TypeScript public API and codegen spec (`DrumPickerView`).
+- `DateDrumPicker` wrapper with flexible modes (`day`, `month`, `year`, combinations).
+- Transparent background support (`backgroundColor`, `containerBackgroundColor`, `itemBackgroundColor`).
+- iOS-style center selection indicator (optional).
+- Distance-based text fade and size interpolation while scrolling.
+
+### Changed
+
+- (nothing yet)
+
+### Fixed
+
+- (nothing yet)
+
+## [0.1.0] - TBD
+
+> First public npm release when published. Replace **TBD** with the release date.
+
+### Added
+
+- Initial open-source release (Android only).
+
+[Unreleased]: https://github.com/scrollDynasty/react-native-drum-picker/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/scrollDynasty/react-native-drum-picker/releases/tag/v0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,252 @@
+# react-native-drum-picker
+
+[![npm version](https://img.shields.io/npm/v/react-native-drum-picker.svg)](https://www.npmjs.com/package/react-native-drum-picker)
+[![license](https://img.shields.io/npm/l/react-native-drum-picker.svg)](https://github.com/scrollDynasty/react-native-drum-picker/blob/main/LICENSE)
+[![platform](https://img.shields.io/badge/platform-Android-3DDC84.svg)](https://reactnative.dev)
+[![React Native](https://img.shields.io/badge/React%20Native-%E2%89%A50.76-61DAFB.svg)](https://reactnative.dev)
+
+A smooth **Android-native** iOS-style drum/wheel picker for React Native (Fabric / New Architecture).
+
+## Preview
+
+> Add a GIF or screenshot here.
+
+## Features
+
+- Android-native implementation (Kotlin + `RecyclerView`)
+- iOS-style wheel / drum picker with smooth snapping
+- Center selection indicator (optional)
+- Transparent background by default
+- Custom text colors and sizes
+- TypeScript API
+- Flexible `DateDrumPicker` wrapper (day / month / year columns)
+- Fabric View / New Architecture
+
+## Installation
+
+```sh
+yarn add react-native-drum-picker
+```
+
+```sh
+npm install react-native-drum-picker
+```
+
+This package includes **native Android code**. Rebuild your app after installing:
+
+```sh
+cd android && ./gradlew clean && cd ..
+npx react-native run-android
+```
+
+On Windows:
+
+```sh
+cd android
+.\gradlew clean
+cd ..
+npx react-native run-android
+```
+
+## Platform support
+
+| Platform | Status |
+|----------|--------|
+| Android | Supported |
+| iOS | Not supported yet |
+| Web | Not supported |
+
+Requires **React Native 0.76+** with the **New Architecture** enabled.
+
+## Basic usage
+
+```tsx
+import { DrumPicker } from 'react-native-drum-picker';
+
+export function Example() {
+  return (
+    <DrumPicker
+      items={['Mon 7 Sep', 'Tue 8 Sep', 'Wed 9 Sep']}
+      selectedIndex={1}
+      itemHeight={44}
+      visibleItemCount={5}
+      onChange={(event) => {
+        console.log(event.nativeEvent.index, event.nativeEvent.value);
+      }}
+      style={{ width: 150, height: 220 }}
+    />
+  );
+}
+```
+
+Set `style.height` ≈ `itemHeight * visibleItemCount` (default `44 × 5 = 220`).
+
+## DateDrumPicker
+
+Higher-level date columns (TypeScript only). Renders **wheels only** — no built-in titles; add labels in your app if needed.
+
+```tsx
+import { useState } from 'react';
+import { DateDrumPicker } from 'react-native-drum-picker';
+
+export function DateExample() {
+  const [date, setDate] = useState({ day: 21, month: 5, year: 2026 });
+
+  return (
+    <DateDrumPicker
+      mode="day-month-year"
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
+```
+
+```tsx
+<DateDrumPicker
+  mode="month-year"
+  monthFormat="long"
+  minYear={2020}
+  maxYear={2035}
+  value={{ month: 5, year: 2026 }}
+  onChange={(value) => console.log(value)}
+/>
+```
+
+**Controlled:** pass `value` and update in `onChange`.  
+**Uncontrolled:** omit `value`; internal state updates and `onChange` still fires.
+
+Day count follows month/year (e.g. February has 28/29 days).
+
+## API reference
+
+### `DrumPicker`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `string[]` | required | Wheel labels |
+| `selectedIndex` | `number` | `0` | Selected row index |
+| `itemHeight` | `number` | `44` | Row height (dp) |
+| `visibleItemCount` | `number` | `5` | Visible rows (odd recommended) |
+| `textColor` | `string` | `#8E8E93` | Unselected text |
+| `selectedTextColor` | `string` | `#1C1C1E` | Selected text |
+| `textSize` | `number` | `20` | Unselected size (sp) |
+| `selectedTextSize` | `number` | `22` | Selected size (sp) |
+| `backgroundColor` | `string` | `transparent` | Root view background |
+| `containerBackgroundColor` | `string` | `transparent` | `RecyclerView` background |
+| `itemBackgroundColor` | `string` | `transparent` | Row background |
+| `showSelectionIndicator` | `boolean` | `true` | Center lines |
+| `selectionIndicatorColor` | `string` | `#D1D1D6` | Line color |
+| `selectionIndicatorHeight` | `number` | `1` | Line thickness (dp) |
+| `onChange` | `function` | — | `nativeEvent: { index, value }` |
+| `style` | `ViewStyle` | — | Size and layout |
+
+### `DateDrumPicker`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `DateDrumPickerMode` | `day-month-year` | Which columns to show |
+| `value` | `{ day?, month?, year? }` | — | Controlled value |
+| `onChange` | `function` | — | `{ day, month, year }` |
+| `minYear` | `number` | now − 100 | Year range start |
+| `maxYear` | `number` | now + 50 | Year range end |
+| `monthFormat` | `'short' \| 'long' \| 'number'` | `short` | Month labels |
+| `locale` | `string` | `en` | `Intl` locale for month names |
+| `itemHeight` | `number` | `44` | Passed to each column |
+| `visibleItemCount` | `number` | `5` | Passed to each column |
+| `textColor` | `string` | — | Passed to each column |
+| `selectedTextColor` | `string` | — | Passed to each column |
+| `textSize` | `number` | — | Passed to each column |
+| `selectedTextSize` | `number` | — | Passed to each column |
+| `showSelectionIndicator` | `boolean` | — | Passed to each column |
+| `selectionIndicatorColor` | `string` | — | Passed to each column |
+| `selectionIndicatorHeight` | `number` | — | Passed to each column |
+| `backgroundColor` | `string` | `transparent` | Passed to each column |
+| `itemBackgroundColor` | `string` | `transparent` | Passed to each column |
+| `containerBackgroundColor` | `string` | `transparent` | Passed to each column |
+| `style` | `ViewStyle` | — | Row container |
+| `columnStyle` | `ViewStyle` | — | All columns |
+| `columnStyles` | `object` | — | Per column: `day`, `month`, `year` |
+
+### `DateDrumPicker` modes
+
+Column order is left → right:
+
+| `mode` | Columns |
+|--------|---------|
+| `day` | day |
+| `month` | month |
+| `year` | year |
+| `day-month` | day, month |
+| `month-year` | month, year |
+| `day-month-year` | day, month, year |
+| `month-day-year` | month, day, year |
+| `year-month-day` | year, month, day |
+
+```ts
+type DateDrumPickerMode =
+  | 'day'
+  | 'month'
+  | 'year'
+  | 'day-month'
+  | 'month-year'
+  | 'day-month-year'
+  | 'month-day-year'
+  | 'year-month-day';
+```
+
+## Styling
+
+Backgrounds are **transparent by default**. Only text and optional indicator lines are visible.
+
+```tsx
+<DrumPicker
+  items={['Small', 'Medium', 'Large']}
+  selectedTextColor="#111827"
+  textColor="#9CA3AF"
+  selectionIndicatorColor="#D1D1D6"
+  backgroundColor="transparent"
+  style={{ width: 120, height: 220 }}
+/>
+```
+
+Use an **odd** `visibleItemCount` (e.g. `5`) for a symmetric wheel.
+
+## Troubleshooting
+
+| Issue | What to try |
+|-------|-------------|
+| Must rebuild after install | Native library — run a full Android rebuild |
+| 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` |
+| Props not applied | Rebuild app after native changes; run `yarn build` in the library before packing |
+| iOS | Not supported — Android only |
+
+**New Architecture:** This library is a Fabric view. Ensure New Architecture is enabled in your app (required for RN 0.76+).
+
+## Development
+
+```sh
+git clone https://github.com/scrollDynasty/react-native-drum-picker.git
+cd react-native-drum-picker
+yarn
+yarn build
+cd example
+yarn android
+```
+
+From the repo root:
+
+```sh
+yarn lint
+yarn build
+yarn typecheck
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+[MIT](./LICENSE) © Umar Matyokubov

package/android/build.gradle

@@ -0,0 +1,68 @@
+buildscript {
+  ext.DrumPicker = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return DrumPicker[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.drumpicker"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "androidx.recyclerview:recyclerview:1.4.0"
+}

package/android/src/main/AndroidManifest.xml

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

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

@@ -0,0 +1,108 @@
+package com.drumpicker
+
+import android.graphics.Typeface
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import kotlin.math.abs
+import kotlin.math.roundToInt
+
+internal class DrumPickerAdapter(
+  private val defaultItemHeightPx: () -> Int,
+) : RecyclerView.Adapter<DrumPickerAdapter.ItemViewHolder>() {
+
+  var items: List<String> = emptyList()
+    private set
+
+  var itemHeightPx: Int = 0
+  var textColor: Int = DrumPickerDefaults.TEXT_COLOR
+  var selectedTextColor: Int = DrumPickerDefaults.SELECTED_TEXT_COLOR
+  var textSizeSp: Float = DrumPickerDefaults.TEXT_SIZE_SP
+  var selectedTextSizeSp: Float = DrumPickerDefaults.SELECTED_TEXT_SIZE_SP
+  var itemBackgroundColor: Int = DrumPickerDefaults.TRANSPARENT
+
+  var distanceForPosition: ((position: Int) -> Float)? = null
+
+  private val regularTypeface = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL)
+  private val selectedTypeface = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD)
+
+  private fun rowHeightPx(): Int =
+    if (itemHeightPx > 0) itemHeightPx else defaultItemHeightPx()
+
+  fun updateItems(newItems: List<String>): Boolean {
+    if (newItems == items) {
+      return false
+    }
+    val oldItems = items
+    items = newItems
+    when {
+      oldItems.size == newItems.size ->
+        notifyItemRangeChanged(0, newItems.size)
+      else ->
+        notifyDataSetChanged()
+    }
+    return true
+  }
+
+  fun notifyRowMetricsChanged() {
+    if (items.isNotEmpty()) {
+      notifyItemRangeChanged(0, items.size)
+    }
+  }
+
+  override fun getItemCount(): Int = items.size
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
+    val height = rowHeightPx()
+    val textView =
+      TextView(parent.context).apply {
+        gravity = Gravity.CENTER
+        includeFontPadding = false
+        setBackgroundColor(itemBackgroundColor)
+        layoutParams =
+          RecyclerView.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            height,
+          )
+      }
+    return ItemViewHolder(textView)
+  }
+
+  override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
+    val textView = holder.textView
+    val height = rowHeightPx()
+    textView.layoutParams =
+      (textView.layoutParams as RecyclerView.LayoutParams).apply { this.height = height }
+    textView.text = items[position]
+    textView.setBackgroundColor(itemBackgroundColor)
+    holder.lastStyleBucket = Int.MIN_VALUE
+    val distance = distanceForPosition?.invoke(position) ?: 2f
+    applyItemStyle(holder, distance)
+  }
+
+  fun applyItemStyle(holder: ItemViewHolder, distanceFromCenter: Float) {
+    val clampedDistance = abs(distanceFromCenter).coerceIn(0f, 3f)
+    val focus = (1f - clampedDistance / 3f).coerceIn(0f, 1f)
+    val bucket = (focus * 24f).roundToInt()
+
+    if (holder.lastStyleBucket == bucket) {
+      return
+    }
+    holder.lastStyleBucket = bucket
+
+    val textView = holder.textView
+    textView.alpha = 0.28f + 0.72f * focus
+    textView.setTextColor(if (focus >= 0.65f) selectedTextColor else textColor)
+    textView.setTextSize(
+      TypedValue.COMPLEX_UNIT_SP,
+      textSizeSp + (selectedTextSizeSp - textSizeSp) * focus,
+    )
+    textView.typeface = if (focus >= 0.65f) selectedTypeface else regularTypeface
+  }
+
+  class ItemViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView) {
+    var lastStyleBucket: Int = Int.MIN_VALUE
+  }
+}

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

@@ -0,0 +1,25 @@
+package com.drumpicker
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+internal class DrumPickerChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val index: Int,
+  private val value: String,
+) : Event<DrumPickerChangeEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply {
+      putInt("index", index)
+      putString("value", value)
+    }
+
+  private companion object {
+    const val EVENT_NAME = "topValueChange"
+  }
+}

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

@@ -0,0 +1,19 @@
+package com.drumpicker
+
+import android.graphics.Color
+
+/**
+ * Visual defaults only. Row labels always come from the JS `items` prop.
+ */
+internal object DrumPickerDefaults {
+  const val ITEM_HEIGHT_DP = 44f
+  const val VISIBLE_ITEM_COUNT = 5
+  const val TEXT_SIZE_SP = 20f
+  const val SELECTED_TEXT_SIZE_SP = 22f
+  const val SELECTION_INDICATOR_HEIGHT_DP = 1f
+
+  val TEXT_COLOR: Int = Color.parseColor("#8E8E93")
+  val SELECTED_TEXT_COLOR: Int = Color.parseColor("#1C1C1E")
+  val SELECTION_INDICATOR_COLOR: Int = Color.parseColor("#D1D1D6")
+  val TRANSPARENT: Int = Color.TRANSPARENT
+}

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

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