2.0.6 • Published 4 years ago

react-native-wheel-picker-android v2.0.6

Weekly downloads
10,426
License
MIT
Repository
github
Last release
4 years ago

React native wheel picker V2

A simple Wheel Picker for Android (For IOs is used PickerIOS)

Installation

yarn add react-native-wheel-picker-android

npm.io npm.io

Automatic Installation

react-native link react-native-wheel-picker-android

Manual Android Installation

In android/settings.gradle

include ':react-native-wheel-picker-android'
project(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')

In android/app/build.gradle

dependencies {
    ...
    compile project(':react-native-wheel-picker-android')
}

In android/app/src/main/java/com/PROJECT_NAME/MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(new MainReactPackage(), new WheelPickerPackage());
}

Usage

import {
  WheelPicker,
  TimePicker,
  DatePicker
} from "react-native-wheel-picker-android";
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Button } from "react-native";

const wheelPickerData = [
  "sunday",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday"
];

class MyPicker extends Component {
  state = {
    selectedItem: 0
  };

  onItemSelected = selectedItem => {
    this.setState({ selectedItem });
  };

  onPress = () => {
    this.setState({ selectedItem: 3 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title={"Select third element"} onPress={this.onPress} />
        <Text>Selected position: {this.state.selectedItem}</Text>
        <WheelPicker
          selectedItem={this.state.selectedItem}
          data={wheelPickerData}
          onItemSelected={this.onItemSelected}
        />
      </View>
    );
  }
}

module.exports = MyPicker;

Props

PropDefaultTypeDescription
onItemSelected-funcReturns selected position
data-Array<string>Data array
isCyclicfalseboolMake Wheel Picker cyclic
selectedItemTextColorblackstringWheel Picker's selected Item text color
selectedItemTextSize16numberWheel Picker's selected Item text size
selectedItemTextFontFamily-font-familyWheel Picker's selected Item font
itemTextColorgreystringWheel Picker's Item Text Color
itemTextSize16numberWheel Picker's Item text size
itemTextFontFamily-font-familyWheel Picker's Item font
selectedItem0numberCurrent item position
initPosition0numberInitial item position
indicatorColorblackstringIndicator color
hideIndicator-booleanHide indicator
indicatorWidth1numberIndicator width
backgroundColortransparentstringWheel Picker background color

Time Picker

npm.io npm.io

onTimeSelected = date => {}
...
<TimePicker onTimeSelected={this.onTimeSelected}/>

Props

PropDefaultTypeDescription
...WheelPicker props--All style WheelPicker props
initDatecurrent dateDateInitial date
onTimeSelected-funcCallback with selected time
hours1,2,3,4...Array<string>Custom hours array
minutes00,05,10,15...Array<string>Custom minutes array
format24falsebooleanTime format

Date Picker

For IOs DatePickerIOS is used

npm.io npm.io

onDateSelected = date => {}
...
<DatePicker onDateSelected={this.onDateSelected}/>

Props

PropDefaultTypeDescription
DatePickerIOS props--All DatePickerIOS props (IOS only)
initDatecurrent dateDateInitial date
onDateSelected-funcCallback with selected date
days1,2,3,4...Array<string>Custom days array (Android only)
hours1,2,3,4...Array<string>Custom hours array (Android only)
minutes00,05,10,15...Array<string>Custom minutes array (Android only)
format24falsebooleanTime format (Android only)
startDatecurrent dateDateMin Date (Android only)
daysCount365numberDays count to display from start date (Android only)
hideDatefalsebooleanHide days picker (Android only)
hideHoursfalsebooleanHide hours picker (Android only)
hideMinutesfalsebooleanHide minutes picker (Android only)
hideAMfalsebooleanHide time format picker (Android only)

Questions or suggestions?

Feel free to open an issue

2.0.6

4 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.1.10

7 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago