react-native-drum-picker 0.1.0

package/lib/module/DateDrumPicker.js

@@ -0,0 +1,153 @@
+"use strict";
+
+import { useCallback, 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { clampDateDrumPickerValue, getDaysInMonth, normalizeYearRange } from "./dateDrumPickerLogic.js";
+const COLUMN_ORDER = {
+  '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']
+};
+const COLUMN_WIDTH = {
+  day: 64,
+  month: 110,
+  year: 86
+};
+const DEFAULT_ITEM_HEIGHT = 44;
+const DEFAULT_VISIBLE_ITEM_COUNT = 5;
+export function DateDrumPicker({
+  mode = 'day-month-year',
+  value,
+  onChange,
+  minYear: minYearProp,
+  maxYear: maxYearProp,
+  monthFormat = 'short',
+  locale = 'en',
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  visibleItemCount = DEFAULT_VISIBLE_ITEM_COUNT,
+  textColor,
+  selectedTextColor,
+  textSize,
+  selectedTextSize,
+  showSelectionIndicator,
+  selectionIndicatorColor,
+  selectionIndicatorHeight,
+  backgroundColor = 'transparent',
+  itemBackgroundColor = 'transparent',
+  containerBackgroundColor = 'transparent',
+  style,
+  columnStyle,
+  columnStyles
+}) {
+  const currentYear = new Date().getFullYear();
+  const {
+    minYear,
+    maxYear
+  } = useMemo(() => normalizeYearRange(minYearProp ?? currentYear - 100, maxYearProp ?? currentYear + 50), [minYearProp, maxYearProp, currentYear]);
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(() => clampDateDrumPickerValue(value ?? {}, minYear, maxYear));
+  const resolvedValue = useMemo(() => {
+    if (isControlled) {
+      return clampDateDrumPickerValue(value, minYear, maxYear);
+    }
+    return internalValue;
+  }, [isControlled, value, internalValue, minYear, maxYear]);
+  const columns = COLUMN_ORDER[mode];
+  const dayItems = useMemo(() => buildDayItems(resolvedValue.month, resolvedValue.year), [resolvedValue.month, resolvedValue.year]);
+  const monthItems = useMemo(() => buildMonthItems(monthFormat, locale), [monthFormat, locale]);
+  const yearItems = useMemo(() => buildYearItems(minYear, maxYear), [minYear, maxYear]);
+  const pickerHeight = itemHeight * visibleItemCount;
+  const emitChange = useCallback(patch => {
+    const next = clampDateDrumPickerValue({
+      ...resolvedValue,
+      ...patch
+    }, minYear, maxYear);
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  }, [isControlled, onChange, resolvedValue, minYear, maxYear]);
+  const sharedPickerProps = {
+    itemHeight,
+    visibleItemCount,
+    textColor,
+    selectedTextColor,
+    textSize,
+    selectedTextSize,
+    showSelectionIndicator,
+    selectionIndicatorColor,
+    selectionIndicatorHeight,
+    backgroundColor,
+    itemBackgroundColor,
+    containerBackgroundColor
+  };
+  const columnContainerStyle = column => [styles.column, {
+    width: COLUMN_WIDTH[column],
+    height: pickerHeight
+  }, columnStyle, columnStyles?.[column]];
+  const renderColumn = column => {
+    if (column === 'day') {
+      return /*#__PURE__*/_jsx(DrumPicker, {
+        ...sharedPickerProps,
+        style: columnContainerStyle('day'),
+        items: dayItems,
+        selectedIndex: Math.min(resolvedValue.day - 1, dayItems.length - 1),
+        onChange: event => {
+          const day = clampDayForMonth(event.nativeEvent.index + 1, resolvedValue.month, resolvedValue.year);
+          emitChange({
+            day
+          });
+        }
+      }, "day");
+    }
+    if (column === 'month') {
+      return /*#__PURE__*/_jsx(DrumPicker, {
+        ...sharedPickerProps,
+        style: columnContainerStyle('month'),
+        items: monthItems,
+        selectedIndex: resolvedValue.month - 1,
+        onChange: event => {
+          const month = parseMonthFromLabel(event.nativeEvent.value, monthFormat, monthItems);
+          emitChange({
+            month
+          });
+        }
+      }, "month");
+    }
+    return /*#__PURE__*/_jsx(DrumPicker, {
+      ...sharedPickerProps,
+      style: columnContainerStyle('year'),
+      items: yearItems,
+      selectedIndex: resolvedValue.year - minYear,
+      onChange: event => {
+        const year = clampYear(minYear + event.nativeEvent.index, minYear, maxYear);
+        emitChange({
+          year
+        });
+      }
+    }, "year");
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.row, style],
+    children: columns.map(column => renderColumn(column))
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'transparent'
+  },
+  column: {
+    backgroundColor: 'transparent'
+  }
+});
+//# sourceMappingURL=DateDrumPicker.js.map

package/lib/module/DrumPicker.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export function DrumPicker(_props) {
+  throw new Error("'react-native-drum-picker' is only supported on native platforms.");
+}
+//# sourceMappingURL=DrumPicker.js.map

package/lib/module/DrumPicker.native.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import DrumPickerNative from './DrumPickerViewNativeComponent';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULTS = {
+  selectedIndex: 0,
+  itemHeight: 44,
+  visibleItemCount: 5,
+  textColor: '#8E8E93',
+  selectedTextColor: '#1C1C1E',
+  textSize: 20,
+  selectedTextSize: 22,
+  showSelectionIndicator: true,
+  selectionIndicatorColor: '#D1D1D6',
+  selectionIndicatorHeight: 1,
+  backgroundColor: 'transparent',
+  itemBackgroundColor: 'transparent',
+  containerBackgroundColor: 'transparent'
+};
+export function DrumPicker({
+  items,
+  selectedIndex = DEFAULTS.selectedIndex,
+  itemHeight = DEFAULTS.itemHeight,
+  visibleItemCount = DEFAULTS.visibleItemCount,
+  textColor = DEFAULTS.textColor,
+  selectedTextColor = DEFAULTS.selectedTextColor,
+  textSize = DEFAULTS.textSize,
+  selectedTextSize = DEFAULTS.selectedTextSize,
+  showSelectionIndicator = DEFAULTS.showSelectionIndicator,
+  selectionIndicatorColor = DEFAULTS.selectionIndicatorColor,
+  selectionIndicatorHeight = DEFAULTS.selectionIndicatorHeight,
+  backgroundColor = DEFAULTS.backgroundColor,
+  itemBackgroundColor = DEFAULTS.itemBackgroundColor,
+  containerBackgroundColor = DEFAULTS.containerBackgroundColor,
+  onChange,
+  style
+}) {
+  const pickerHeight = itemHeight * visibleItemCount;
+  const pickerStyle = StyleSheet.flatten([{
+    height: pickerHeight
+  }, style]);
+  return /*#__PURE__*/_jsx(DrumPickerNative, {
+    collapsable: false,
+    items: items,
+    selectedIndex: selectedIndex,
+    itemHeight: itemHeight,
+    visibleItemCount: visibleItemCount,
+    textColor: textColor,
+    selectedTextColor: selectedTextColor,
+    textSize: textSize,
+    selectedTextSize: selectedTextSize,
+    showSelectionIndicator: showSelectionIndicator,
+    selectionIndicatorColor: selectionIndicatorColor,
+    selectionIndicatorHeight: selectionIndicatorHeight,
+    backgroundColor: backgroundColor,
+    itemBackgroundColor: itemBackgroundColor,
+    containerBackgroundColor: containerBackgroundColor,
+    onValueChange: onChange,
+    style: pickerStyle
+  });
+}
+//# sourceMappingURL=DrumPicker.native.js.map

package/lib/module/DrumPickerViewNativeComponent.ts

@@ -0,0 +1,31 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+export type DrumPickerChangeEventPayload = {
+  index: CodegenTypes.Int32;
+  value: string;
+};
+
+interface NativeProps extends ViewProps {
+  items: ReadonlyArray<string>;
+  selectedIndex?: CodegenTypes.Int32;
+  itemHeight?: CodegenTypes.Float;
+  visibleItemCount?: CodegenTypes.Int32;
+  textColor?: ColorValue;
+  selectedTextColor?: ColorValue;
+  textSize?: CodegenTypes.Float;
+  selectedTextSize?: CodegenTypes.Float;
+  showSelectionIndicator?: CodegenTypes.WithDefault<boolean, true>;
+  selectionIndicatorColor?: ColorValue;
+  selectionIndicatorHeight?: CodegenTypes.Float;
+  backgroundColor?: ColorValue;
+  containerBackgroundColor?: ColorValue;
+  itemBackgroundColor?: ColorValue;
+  onValueChange?: CodegenTypes.DirectEventHandler<DrumPickerChangeEventPayload>;
+}
+
+export default codegenNativeComponent<NativeProps>('DrumPickerView');

package/lib/module/dateDrumPickerLogic.js

@@ -0,0 +1,82 @@
+"use strict";
+
+export function getDaysInMonth(month, year) {
+  return new Date(year, clampMonth(month), 0).getDate();
+}
+export function normalizeYearRange(minYear, maxYear) {
+  if (minYear <= maxYear) {
+    return {
+      minYear,
+      maxYear
+    };
+  }
+  return {
+    minYear: maxYear,
+    maxYear: minYear
+  };
+}
+export function clampMonth(month) {
+  return Math.min(12, Math.max(1, Math.round(month)));
+}
+export function clampYear(year, minYear, maxYear) {
+  return Math.min(maxYear, Math.max(minYear, Math.round(year)));
+}
+export function clampDayForMonth(day, month, year) {
+  const maxDay = getDaysInMonth(month, year);
+  return Math.min(maxDay, Math.max(1, Math.round(day)));
+}
+export function clampDateDrumPickerValue(value, minYear, maxYear) {
+  const {
+    minYear: min,
+    maxYear: max
+  } = normalizeYearRange(minYear, maxYear);
+  const now = new Date();
+  const month = clampMonth(value.month ?? now.getMonth() + 1);
+  const year = clampYear(value.year ?? now.getFullYear(), min, max);
+  const day = clampDayForMonth(value.day ?? now.getDate(), month, year);
+  return {
+    day,
+    month,
+    year
+  };
+}
+export function buildDayItems(month, year) {
+  const count = getDaysInMonth(month, year);
+  return Array.from({
+    length: count
+  }, (_, index) => String(index + 1));
+}
+export function buildMonthItems(monthFormat, locale) {
+  if (monthFormat === 'number') {
+    return Array.from({
+      length: 12
+    }, (_, index) => String(index + 1).padStart(2, '0'));
+  }
+  const monthStyle = monthFormat === 'long' ? 'long' : 'short';
+  return Array.from({
+    length: 12
+  }, (_, index) => {
+    const date = new Date(2020, index, 1);
+    return new Intl.DateTimeFormat(locale, {
+      month: monthStyle
+    }).format(date);
+  });
+}
+export function buildYearItems(minYear, maxYear) {
+  const {
+    minYear: min,
+    maxYear: max
+  } = normalizeYearRange(minYear, maxYear);
+  const length = max - min + 1;
+  return Array.from({
+    length
+  }, (_, index) => String(min + index));
+}
+export function parseMonthFromLabel(label, monthFormat, monthItems) {
+  if (monthFormat === 'number') {
+    return clampMonth(Number.parseInt(label, 10));
+  }
+  const index = monthItems.indexOf(label);
+  return index >= 0 ? index + 1 : 1;
+}
+//# sourceMappingURL=dateDrumPickerLogic.js.map

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { DrumPicker } from './DrumPicker';
+export { DateDrumPicker, clampDateDrumPickerValue, getDaysInMonth, normalizeYearRange } from "./DateDrumPicker.js";
+//# sourceMappingURL=index.js.map

package/lib/module/package.json

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

package/lib/module/types.js

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

package/lib/typescript/package.json

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

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

@@ -0,0 +1,32 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type DateDrumPickerMonthFormat, type DateDrumPickerValue } from './dateDrumPickerLogic';
+export type DateDrumPickerMode = 'day' | 'month' | 'year' | 'day-month' | 'month-year' | 'day-month-year' | 'month-day-year' | 'year-month-day';
+export type { DateDrumPickerMonthFormat, DateDrumPickerValue };
+export { clampDateDrumPickerValue, getDaysInMonth, normalizeYearRange, } from './dateDrumPickerLogic';
+export type DateDrumPickerColumnKey = 'day' | 'month' | 'year';
+export type DateDrumPickerProps = {
+    mode?: DateDrumPickerMode;
+    value?: DateDrumPickerValue;
+    onChange?: (value: DateDrumPickerValue) => void;
+    minYear?: number;
+    maxYear?: number;
+    monthFormat?: DateDrumPickerMonthFormat;
+    locale?: string;
+    itemHeight?: number;
+    visibleItemCount?: number;
+    textColor?: string;
+    selectedTextColor?: string;
+    textSize?: number;
+    selectedTextSize?: number;
+    showSelectionIndicator?: boolean;
+    selectionIndicatorColor?: string;
+    selectionIndicatorHeight?: number;
+    backgroundColor?: string;
+    itemBackgroundColor?: string;
+    containerBackgroundColor?: string;
+    style?: StyleProp<ViewStyle>;
+    columnStyle?: StyleProp<ViewStyle>;
+    columnStyles?: Partial<Record<DateDrumPickerColumnKey, StyleProp<ViewStyle>>>;
+};
+export declare function DateDrumPicker({ mode, value, onChange, minYear: minYearProp, maxYear: maxYearProp, monthFormat, locale, itemHeight, visibleItemCount, textColor, selectedTextColor, textSize, selectedTextSize, showSelectionIndicator, selectionIndicatorColor, selectionIndicatorHeight, backgroundColor, itemBackgroundColor, containerBackgroundColor, style, columnStyle, columnStyles, }: DateDrumPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateDrumPicker.d.ts.map

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

@@ -0,0 +1,3 @@
+import type { DrumPickerProps } from './types';
+export declare function DrumPicker(_props: DrumPickerProps): never;
+//# sourceMappingURL=DrumPicker.d.ts.map

package/lib/typescript/src/DrumPicker.native.d.ts

@@ -0,0 +1,3 @@
+import type { DrumPickerProps } from './types';
+export declare function DrumPicker({ items, selectedIndex, itemHeight, visibleItemCount, textColor, selectedTextColor, textSize, selectedTextSize, showSelectionIndicator, selectionIndicatorColor, selectionIndicatorHeight, backgroundColor, itemBackgroundColor, containerBackgroundColor, onChange, style, }: DrumPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrumPicker.native.d.ts.map

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

@@ -0,0 +1,25 @@
+import { type CodegenTypes, type ColorValue, type ViewProps } from 'react-native';
+export type DrumPickerChangeEventPayload = {
+    index: CodegenTypes.Int32;
+    value: string;
+};
+interface NativeProps extends ViewProps {
+    items: ReadonlyArray<string>;
+    selectedIndex?: CodegenTypes.Int32;
+    itemHeight?: CodegenTypes.Float;
+    visibleItemCount?: CodegenTypes.Int32;
+    textColor?: ColorValue;
+    selectedTextColor?: ColorValue;
+    textSize?: CodegenTypes.Float;
+    selectedTextSize?: CodegenTypes.Float;
+    showSelectionIndicator?: CodegenTypes.WithDefault<boolean, true>;
+    selectionIndicatorColor?: ColorValue;
+    selectionIndicatorHeight?: CodegenTypes.Float;
+    backgroundColor?: ColorValue;
+    containerBackgroundColor?: ColorValue;
+    itemBackgroundColor?: ColorValue;
+    onValueChange?: CodegenTypes.DirectEventHandler<DrumPickerChangeEventPayload>;
+}
+declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=DrumPickerViewNativeComponent.d.ts.map

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

@@ -0,0 +1,20 @@
+export type DateDrumPickerValue = {
+    day?: number;
+    month?: number;
+    year?: number;
+};
+export type DateDrumPickerMonthFormat = 'short' | 'long' | 'number';
+export declare function getDaysInMonth(month: number, year: number): number;
+export declare function normalizeYearRange(minYear: number, maxYear: number): {
+    minYear: number;
+    maxYear: number;
+};
+export declare function clampMonth(month: number): number;
+export declare function clampYear(year: number, minYear: number, maxYear: number): number;
+export declare function clampDayForMonth(day: number, month: number, year: number): number;
+export declare function clampDateDrumPickerValue(value: DateDrumPickerValue, minYear: number, maxYear: number): Required<DateDrumPickerValue>;
+export declare function buildDayItems(month: number, year: number): string[];
+export declare function buildMonthItems(monthFormat: DateDrumPickerMonthFormat, locale: string): string[];
+export declare function buildYearItems(minYear: number, maxYear: number): string[];
+export declare function parseMonthFromLabel(label: string, monthFormat: DateDrumPickerMonthFormat, monthItems: string[]): number;
+//# sourceMappingURL=dateDrumPickerLogic.d.ts.map

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

@@ -0,0 +1,5 @@
+export { DrumPicker } from './DrumPicker';
+export { DateDrumPicker, clampDateDrumPickerValue, getDaysInMonth, normalizeYearRange, } from './DateDrumPicker';
+export type { DrumPickerChangeEvent, DrumPickerProps } from './types';
+export type { DateDrumPickerColumnKey, DateDrumPickerMode, DateDrumPickerMonthFormat, DateDrumPickerProps, DateDrumPickerValue, } from './DateDrumPicker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,24 @@
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+export type DrumPickerChangeEvent = {
+    index: number;
+    value: string;
+};
+export type DrumPickerProps = {
+    items: string[];
+    selectedIndex?: number;
+    itemHeight?: number;
+    visibleItemCount?: number;
+    textColor?: string;
+    selectedTextColor?: string;
+    textSize?: number;
+    selectedTextSize?: number;
+    showSelectionIndicator?: boolean;
+    selectionIndicatorColor?: string;
+    selectionIndicatorHeight?: number;
+    backgroundColor?: string;
+    itemBackgroundColor?: string;
+    containerBackgroundColor?: string;
+    onChange?: (event: NativeSyntheticEvent<DrumPickerChangeEvent>) => void;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=types.d.ts.map

package/package.json

@@ -0,0 +1,189 @@
+{
+  "name": "react-native-drum-picker",
+  "version": "0.1.0",
+  "description": "Android-native iOS-style drum/wheel picker for React Native (Fabric)",
+  "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "source": "./src/index.tsx",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "react-native.config.js",
+    "src",
+    "lib",
+    "android",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!example",
+    "!ios",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/*.map",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-drum-picker-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "build": "bob build",
+    "prepublishOnly": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-library",
+    "android",
+    "kotlin",
+    "fabric",
+    "new-architecture",
+    "picker",
+    "wheel-picker",
+    "drum-picker",
+    "date-picker",
+    "ios-style"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scrollDynasty/react-native-drum-picker.git"
+  },
+  "author": "Umar Matyokubov <ymarumar502@gmail.com> (https://github.com/scrollDynasty)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/scrollDynasty/react-native-drum-picker/issues"
+  },
+  "homepage": "https://github.com/scrollDynasty/react-native-drum-picker#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^30.0.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^10.0.6",
+    "@types/react": "^19.2.0",
+    "babel-jest": "^30.3.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jest": "^30.3.0",
+    "prettier": "^3.8.1",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.41.0",
+    "release-it": "^19.2.4",
+    "turbo": "^2.8.21",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "DrumPickerViewSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.drumpicker"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": [
+        "babel-jest",
+        {
+          "presets": [
+            "module:@react-native/babel-preset"
+          ]
+        }
+      ]
+    }
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "release-it"
+    ],
+    "version": "0.62.0"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('@react-native-community/cli-types').Config}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        sourceDir: './android',
+      },
+      ios: null,
+    },
+  },
+};