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 |