React Native Vertical Picker

• This is a performance-optimized numeric vertical picker.
• It can also be used as a basic design and can be customized.
• There is also a horizontal picker library -> react-native-number-horizontal-picker

NPM

Github Page - Docs

https://github.com/hajeonghun/react-native-number-vertical-picker

Preview

| Design | iOS | Android | |-------|-----|---------| | Default | | | | Custom Thumb | | |

Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | minimumValue | number | Required | Minimum value of measurement | | maximumValue | number | Required | Maximum value of measurement| | onChangeValue | (value: number) => void; | Required | Measured value during scroll event | | customRenderItem | (element: ListRenderItemInfo<number>, style: ViewStyle) => ReactElement | View | This is a customizable block element, and refer to the attached Default image for the basic element | | thumbElement | ReactElement | View | This is a thumbElement. If you want to change, please provide the element. | | focusValue | number | minimumValue | The number to be focused on during the first rendering | | visibleItemCount | number | 20 | Number of items to be displayed on the screen | | isReverse | boolean | false | Reverse the y-axis |

Getting started

Installation

npm i react-native-number-vertical-picker
or
yarn add react-native-number-vertical-picker

• Usage - Default

import VerticalPicker from 'react-native-number-vertical-picker';
import { Text, View } from 'react-native';

function App() {   
  return (
    <View>
      <Text style={{ fontSize: 25 }}>{value} cm</Text>
        <VerticalPicker
        minimumValue={0}
        maximumValue={200}
        focusValue={50}
        onChangeValue={handleChangeValue}
        />
    </View>
  )
}

• Usage - Custom Thumb and Item

import VerticalPicker from 'react-native-number-vertical-picker';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

// Custom Item Style
const styles = StyleSheet.create({
  block: {
    backgroundColor: 'transparent',
    alignSelf: 'center',
    borderColor: '#979797',
    width: 30,
    borderRightWidth: 1,
  },
});

// Custom Item Component
function CustomItem(style: ViewStyle){
  return (
    <View style={StyleSheet.compose(styles.block, style)} />
  );
}

function App() {
  // The Thumb element you desire.
  const thumbElement = (
    <Icon
      style={styles.thumb}
      name="caretright"
      size={30}
      color="rgba(255,0,0,0.7)" 
    />
  );

  /**
   * Please do not change the 'width' property under any circumstances. 
   * This is related to rendering optimization.
   */
  function renderItem(element: ListRenderItemInfo<number>, style: ViewStyle) {
    const { index } = element;
    let overWriteStyle: ViewStyle = { };

    // example code
    if (index < 9) {
      overWriteStyle = { ...style, borderBottomWidth: 0 };
    }
    // Return the component you want to customize.
    return <CustomItem style={overWriteStyle} />;
  }
  
  return (
    <View>
      <Text style={{ fontSize: 25 }}>{value} kg</Text>
        <VerticalPicker
        minimumValue={0}
        maximumValue={200}
        focusValue={50}
        onChangeValue={handleChangeValue}
        thumbElement={thumbElement} // Custom Thumb Element
        customRenderItem={renderItem} // Custom Item Element
        visibleItemCount={10}
  />
    </View>
  )
}

MIT