Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-wheel-picker-android

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-wheel-picker-android

Simple Wheel Picker for Android to use with react-native

  • 2.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10K
decreased by-11.39%
Maintainers
1
Weekly downloads
 
Created
Source

React native wheel picker V2

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

Installation

yarn add react-native-wheel-picker-android

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

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

Props

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

Date Picker

For IOs DatePickerIOS is used

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

Props

PropDefaultTypeDescription
DatePickerIOS props--All DatePickerIOS props (IOS only)
initDatecurrent dateDateInitial date
onDateSelected-funcCallback with selected date
days[1,2,3,4...]Array<string>Custom days array (Android only)
hours[1,2,3,4...]Array<string>Custom hours array (Android only)
minutes[00,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

Keywords

FAQs

Package last updated on 25 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc