React Native Wheel Picker

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

On iOS

On Android

Customization

Features

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

Installation

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

Navigation

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

Usage

🚀 Expo Snack example

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

1git clone git@github.com:quidone/react-native-wheel-picker.git
2cd react-native-wheel-picker
3yarn install
4cd example && yarn install && yarn ios

Simple case

1import React, {useState} from 'react';
2import WheelPicker from '@quidone/react-native-wheel-picker';
3
4const data = [...Array(100).keys()].map((index) => ({
5  value: index,
6  label: index.toString(),
7}))
8
9const App = () => {
10  const [value, setValue] = useState(0);
11  return (
12    <WheelPicker
13      data={data}
14      value={value}
15      onValueChanged={({item: {value}}) => setValue(value)}
16    />
17  );
18};
19
20export default App;

Native Feedback

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

1// ...
2import WheelPickerFeedback from '@quidone/react-native-wheel-picker-feedback';
3
4const App = () => {
5  return (
6    <WheelPicker
7      onValueChanging={() => {
8        WheelPickerFeedback.triggerSoundAndImpact();
9      }}
10    />
11  );
12};

API

WheelPicker

Props

• data [array] - items of picker
• value? [any] - current value of picker item
• itemHeight? [number] - height of picker item in the center.
• visibleItemCount? [number] - number of displayed items: 1, 3, 5... (default = 5). For 5, the WheelPicker height is calculated incorrectly, left for backward compatibility.
• width? [number | string] - width of picker.
• readOnly? [boolean] - read only mode.
• testID? [string] - Used to locate this component in end-to-end tests.
• 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
• contentContainerStyle? [object | array] - style which wraps all of the child views original
• 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

1import WheelPicker, {withVirtualized} from '@quidone/react-native-wheel-picker';
2
3const VirtualizedWheelPicker = withVirtualized(WheelPicker);

Additional props

• initialNumToRender? (default = Math.ceil(visibleItemCount / 2)) - original.
• maxToRenderPerBatch? (default = Math.ceil(visibleItemCount / 2)) - 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