React-native-number-vertical-picker NPM

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>
  )
}