@wave909/react-native-ios-scroll-picker
Fork of @wowmaking/react-native-ios-scroll-picker published to NPM so as not to wait for pull requests to be accepted
React Native Scroll Picker like IOS UIDatePicker
on iOS and Android.
Installation
Open a Terminal in the project root and run:
yarn add @wave909/react-native-ios-scroll-picker
Or if you use npm:
npm i @wave909/react-native-ios-scroll-picker --save
Now we need to install:
react-native-gesture-handler
;
react-native-reanimated
;
react-native-haptic-feedback
;
Usage
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Picker from '@wave909/react-native-ios-scroll-picker';
const start = 2000;
const years = new Array(new Date().getFullYear() - start + 1)
.fill(0)
.map((_, i) => {
const value = start + i;
return { value, label: value };
})
.reverse();
const App = () => {
const defaultValue = 2010;
const [currentValue, setCurrentValue] = useState(defaultValue);
const handelPickerItemChange = (value) => {
setCurrentValue(value);
};
return (
<View style={styles.pickerContainer}>
<Picker
values={years}
defaultValue={defaultValue}
withTranslateZ={true}
withOpacity={true}
withScale={true}
visibleItems={5}
itemHeight={32}
containerStyle={styles.containerStyle}
dividerStyle={styles.pickerDivider}
labelStyle={styles.pickerItemLabel}
onChange={handelPickerChange}
/>
<Text>{currentValue}</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({
pickerContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
containerStyle: {
width: 120,
},
pickerDivider: {
borderColor: 'rgba(0,0,0,0.1)',
borderTopWidth: 1,
borderBottomWidth: 1,
},
pickerItemLabel: {
color: '#000000',
fontSize: 25,
},
});
Props
name | required | default | description |
---|---|---|---|
values | yes | Items Array | |
containerWidth | yes | Defines width of gesture container | |
visibleItems | yes | Defines how many items will be visible | |
itemHeight | yes | Item height | |
defaultValue | no | 0 | Defines selected item by default |
withTranslateZ | no | false | Enable |
withScale | no | false | |
withOpacity | no | false | |
containerStyle | no | Styles for the outer container | |
dividerStyle | no | Styles for the Divider | |
labelStyle | no | Styles for label Items |