A flexible React Native Wheel Picker for iOS and Android without using the native side.
![]() On iOS |
![]() On Android |
![]() Customization |
TypeScript
.yarn add @quidone/react-native-wheel-picker
If you want to see more examples and experiment, run the examples locally.
git clone git@github.com:quidone/react-native-wheel-picker.git
cd react-native-wheel-picker
yarn install
cd example && yarn install && yarn ios
import React, {useState} from 'react';
import WheelPicker from '@quidone/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;
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();
}}
/>
);
};
data
[array] - items of pickervalue?
[any] - current value of picker itemitemHeight?
[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 centerscrollEventThrottle?
[object | array] - originalThis hook returns the item height which was passed via props.
This hook returns the animated value of the ScrollView offset.
This HOC returns virtualized picker
import WheelPicker, {withVirtualized} from '@quidone/react-native-wheel-picker';
const VirtualizedWheelPicker = withVirtualized(WheelPicker);
initialNumToRender?
(default = 3) - original.maxToRenderPerBatch?
(default = 3) - original.windowSize?
- original.updateCellsBatchingPeriod?
(default = 10) - original.Do you like it and find it helpful? You can help this project in the following way:
See the contributing guide to learn how to contribute to the repository and the development workflow.
Quidone React Native Wheel Picker is MIT licensed, as found in the LICENSE file.
Made with create-react-native-library