React Native Wheel Picker

A flexible React Native Wheel Picker for iOS and Android without using the native side.

Features

• Without native side.
• Unified API.
• Only native animations.
• Support native feedback.
• Support virtualization.
• Compatible with Expo.
• Deep customization
• Written TypeScript.

Installation

yarn add @quidone/react-native-wheel-picker

Navigation

• Usage
• Native Feedback
• API
  • WheelPicker
  • usePickerItemHeight
  • useScrollContentOffset
  • withVirtualized
• Footer

Usage

If you want to see more examples and experiment, run the examples locally.

git clone [email protected]:quidone/react-native-wheel-picker.git
cd react-native-wheel-picker
yarn install
cd example && yarn install && yarn ios

Simple case

import React, {useState} from 'react';
import WheelPicker from '@serhiihiba/react-native-wheel-picker';

const data = [...Array(100).keys()].map((index) => ({
  value: index,
  label: index.toString(),
}))

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <WheelPicker
      data={data}
      onValueChanged={({item: {value}}) => setValue(value)}
    />
  );
};

export default App;

Native Feedback

You can trigger native sound and impact with @quidone/react-native-wheel-picker-feedback and onValueChanging event

// ...
import WheelPickerFeedback from '@quidone/react-native-wheel-picker-feedback';

const App = () => {
  return (
    <WheelPicker
      onValueChanging={() => {
        WheelPickerFeedback.triggerSoundAndImpact();
      }}
    />
  );
};

API

WheelPicker

Props

• data [array] - items of picker
• value? [any] - current value of picker item
• itemHeight? [number] - height of picker item in the center.
• width? [number | string] - width of picker.
• onValueChanging? [function] - An event that is triggered when the value is changing.
• onValueChanged? [function] - An event that is triggered when the value is changed (wheel is stopped and no touch).
• keyExtractor? [function] - key extractor from picker item.
• renderItem? [function] - render picker item content.
• renderItemContainer? [function] - render picker item container (there is animated container).
• renderOverlay? [function | null] - render overlay over the picker.
• renderList? [function] - render list (Advanced, It is not recommended to use).
• style? [object | array] - root style.
• itemTextStyle? [object | array] - item text style for picker item.
• overlayItemStyle? [object | array] - style for the overlay element in the center
• scrollEventThrottle? [object | array] - original

usePickerItemHeight

This hook returns the item height which was passed via props.

useScrollContentOffset

This hook returns the animated value of the ScrollView offset.

withVirtualized

This HOC returns virtualized picker

import WheelPicker, {withVirtualized} from '@serhiihiba/react-native-wheel-picker';

const VirtualizedWheelPicker = withVirtualized(WheelPicker);

Additional props

• initialNumToRender? (default = 3) - original.
• maxToRenderPerBatch? (default = 3) - original.
• windowSize? - original.
• updateCellsBatchingPeriod? (default = 10) - original.

👨‍💻 Author

Sergey Rozhkov

🎯 Was it helpful?

Do you like it and find it helpful? You can help this project in the following way:

• ⭐ Put the star.
• 💡 Suggest your ideas.
• 😉 Open a founded issue.

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📄 License

Quidone React Native Wheel Picker is MIT licensed, as found in the LICENSE file.

Made with create-react-native-library