React Native Wheel Picker Simple

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.

Installation

1. Install using yarn or npm

npm install react-native-wheel-picker-simple --save
yarn add react-native-wheel-picker-simple

2. Link and don't forget to reinstall your app

react-native link react-native-wheel-picker-simple

Usage

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

iOS Specific style

itemStyle prop is applied only to iOS.

Android Specific style

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

Limitations

• 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.

Contribution

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.

1. Fork the repo
2. Create new branch with feature name as branch name
3. Check if things work with a jupyter notebook
4. Raise a pull request

Licence

Please see attached Licence