Skip to content

Wheel Picker for Android, style-able and works inside ScrollView; Uses native picker for iOS

License

Notifications You must be signed in to change notification settings

saravanabalagi/react-native-wheel-picker-simple

 
 

Repository files navigation

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.

screencast

Installation

  1. Install using yarn or npm
npm install react-native-wheel-picker-simple --save
yarn add react-native-wheel-picker-simple
  1. 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

Releases

No releases published

Packages

No packages published

Languages

  • Java 62.7%
  • JavaScript 37.3%