react-native-number-horizontal-picker
v1.0.2
Published
react-native-number-horizontal-picker
Downloads
20
Maintainers
Readme
React Native Horizontal Picker
- This is a performance-optimized numeric horizontal picker.
- It can also be used as a basic design and can be customized.
- There is also a vertical picker library ->
react-native-number-vertical-picker
NPM
Github Page - Docs
https://github.com/hajeonghun/react-native-number-horizontal-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 |
Getting started
Installation
npm i react-native-number-horizontal-picker
or
yarn add react-native-number-horizontal-picker
- Usage - Default
import HorizontalPicker from 'react-native-number-horizontal-picker';
import { Text, View } from 'react-native';
function App() {
return (
<View>
<Text style={{ fontSize: 25 }}>{value} kg</Text>
<HorizontalPicker
minimumValue={0}
maximumValue={200}
focusValue={50}
onChangeValue={handleChangeValue}
/>
</View>
)
}
- Usage - Custom Thumb and Item
import HorizontalPicker from 'react-native-number-horizontal-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',
height: 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="caretdown"
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, borderRightWidth: 0 };
}
// Return the component you want to customize.
return <CustomItem style={overWriteStyle} />;
}
return (
<View>
<Text style={{ fontSize: 25 }}>{value} kg</Text>
<HorizontalPicker
minimumValue={0}
maximumValue={200}
focusValue={50}
onChangeValue={handleChangeValue}
thumbElement={thumbElement} // Custom Thumb Element
customRenderItem={renderItem} // Custom Item Element
/>
</View>
)
}