A simple Wheel Picker, rendered with native components on Android and iOS. For iOS, pickerIOS is used. Forked from react-native-wheel-picker-android.
This picker works inside scrollViews.
- Install using yarn or npm
npm install react-native-wheel-picker-simple --save
yarn add react-native-wheel-picker-simple
- Link and don't forget to reinstall your app
react-native link react-native-wheel-picker-simple
<View style={wheelPickerWrapperStyle}>
<WheelPicker
itemStyle={{
marginTop: -30,
backgroundColor: '#111111',
color: '#EEEEEE',
fontSize: 12,
fontFamily: "YourFontName"
}}
selectedItemTextFontFamily={'YourFontName'}
itemTextFontFamily={'YourFontName'}
selectedItemTextSize={12}
itemTextSize={12}
selectedItemTextColor={'#EEEEEE'}
indicatorColor={'#999999'}
selectedItem={this.state.selectedIndex}
data={items}
onItemSelected={this.onItemSelected} />
</View>
onItemSelected = selectedIndex => { this.setState({selectedIndex}); };
itemStyle
prop is applied only to iOS.
You can add styles conditionally based on OS
let wheelPickerWrapperStyle = [gs.centerChildren, gs.row, gs.centerAlongFlex];
if(Platform.OS === 'android')
wheelPickerWrapperStyle.push(s.wheelPickerWrapperAndroid;
For more info, please refer to the parent repo
-
iOS Date Picker is not customizable i.e. background color, fonts, etc. cannot be changed. No dark theme ๐
-
iOS Picker line color cannot be changed ๐. At least it looks and feels okay in iOS, unlike the date picker.
Issues are welcome. Please add a screenshot, if not screencast, of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.
Pull requests are very welcome.
- Fork the repo
- Create new branch with feature name as branch name
- Check if things work with a jupyter notebook
- Raise a pull request
Please see attached Licence