react-native-curved-wheel-picker

A lightweight, fully controlled 3D curved wheel picker for React Native.
Designed for smooth snapping, accurate momentum handling, and full styling control — ideal for use cases like license plates, OTP digits, dates, or custom pickers.

✅ iOS & Android
✅ TypeScript support
✅ No native code required
✅ Works inside modals & bottom sheets

✨ Features

• 🎡 3D curved wheel effect (configurable or flat)
• 🎯 Fully controlled component (no internal state surprises)
• 🧲 Smooth snapping with momentum handling
• 🧩 Multiple wheels side-by-side
• 🎨 Custom text & selected text styles
• 🧠 Safe handling for empty / placeholder values
• 🧾 Generated TypeScript definitions

📦 Installation

npm install react-native-curved-wheel-picker
# or
yarn add react-native-curved-wheel-picker

No extra linking required.

🚀 Basic Usage

import React, { useState } from "react";
import { View } from "react-native";
import { WheelPickerCurved } from "react-native-curved-wheel-picker";

export default function Example() {
  const [value, setValue] = useState("2");

  return (
    <View>
      <WheelPickerCurved
        data={["0", "1", "2", "3", "4", "5"]}
        value={value}
        onChange={(v) => setValue(v)}
      />
    </View>
  );
}

🧩 Multiple Wheels (e.g. Plate Numbers)

const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

{
  [0, 1, 2, 3].map((i) => (
    <WheelPickerCurved
      key={i}
      data={DIGITS}
      value={plate[i]}
      onChange={(v) => updateDigit(i, v)}
    />
  ));
}

⚙️ Props

type WheelPickerCurvedProps<T = string> = {
  data: T[];
  value: T;
  onChange: (value: T, index: number) => void;

  itemHeight?: number; // height of each row (default: 46)
  visibleItems?: number; // must be odd (default: 5)
  height?: number; // picker height override

  maxDeg?: number; // 3D curve strength (default: 65)
  perspective?: number; // 3D perspective (default: 900)
  depthScale?: number; // scale depth effect

  textStyle?: StyleProp<TextStyle>;
  selectedTextStyle?: StyleProp<TextStyle>;
  containerStyle?: StyleProp<ViewStyle>;

  emptyLabel?: string; // label for empty values (default: "-")
  keyExtractor?: (item: T, index: number) => string;
  renderLabel?: (item: T, index: number) => string;
};

🎨 Flat vs Curved

Flat wheel

<WheelPickerCurved maxDeg={0} perspective={1} />

3D curved wheel

<WheelPickerCurved maxDeg={65} perspective={900} />

📱 Bottom Sheet / Modal Support

The picker works correctly inside:

• Modal
• Custom bottom sheets
• Animated containers

No extra configuration needed.

🧪 Example App

Run the example project:

yarn example android
# or
yarn example ios

The example demonstrates:

• Numbers picker
• Arabic / English letters
• Bottom sheet usage
• Dark mode

🤝 Contributing

Contributions are welcome!

• Development workflow
• Sending a pull request
• Code of conduct

📄 License

MIT © Ahmed Hegazy

Built with ❤️ using react-native-builder-bob