Haptic Wheel Picker

React native wheel picker for Android/IOS with haptic feedback and handles like a flatlist.

Installation

npm install @axenuab/react-native-haptic-wheel-picker

Usage

The component takes a list of data and displays it as a text per default.

import Picker from '@axenuab/react-native-haptic-wheel-picker'

return (
  <View>
    <Picker
      data={['list', 'grid', 'car', 'person', 'cog', 'flower', 'boat']}
    />
  </View>
);

You can send in any generic data and a custom render function to handle the displaying yourself.

import Picker from '@axenuab/react-native-haptic-wheel-picker'

const [image, setImage] = useState(image1);

const renderImage = (imageSource) => {
  return (
    <Image
      source={imageSource}
    />
  );
};

return (
  <View>
    <Picker
      data={[image1, image2, image3, image4, image5]}
      defaultItem={image}
      onItemSelect={setImage}
      renderItem={renderImage}
    />
  </View>
);

Props

Component takes generic type T from items in data.

Prop	Default	Type	Description
data	-	T[]	List of items that are selected
defaultItem	data[0]	T	The currently selected item
onItemSelect	undefined	function	Callback function when an item is selected
textStyle	undefined	TextStyle	Style of text for default rendering
renderItem	undefined	function	Custom render function for item
keyExtractor	undefined	function	Custom key extractor function
itemHeight	40	number	The height of items
itemDistanceMultipier	0.285	number	Multiplier for distance between items
wheelHeightMultiplier	2.6	number	Multiplier for wheel height
selectorStyle	undefined	ViewStyle	Style for view of selecting item