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

  • 0.1.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.7K
decreased by-16.41%
Maintainers
1
Weekly downloads
 
Created
Source

ReactNativeWheelPicker

npm version npm version

A simple Wheel Picker for Android

Installation Android

  1. npm install react-native-wheel-picker-android --save
  2. react-native link react-native-wheel-picker-android

Usage


import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
...

  render() {
    let arr = [1,2,3];
    return (
      <WheelPicker
          onItemSelected={(event)=>{console.log(event)}}
          isCurved
          isCyclic
          data={arr}
          style={{width:300, height: 300}}/>
    );
  }

Time Picker


...

  render() {
    let minutesArray = ['00', '15', '30', '45'];
    let now = new Date();
    return (
      	<TimePicker
	    minutes={minutesArray}
   	    onDateSelected={(date)=>this.onDateSelected(date))}
	    initDate={now.toISOString()}/>
    );
  }

  onDateSelected(date){
    // do something
  }

Date Picker


...

  render() {
  let now = new Date();
    return (
      	<DatePicker
	    initDate={now.toISOString()}
	    onDateSelected={(date)=> this.onDateSelected(date)}/>
    );
  }

  onDateSelected(date){
    // do something
  }

Props

PropDefaultTypeDescription
onItemSelectednullfuncCallback when user select item {data: 'itemData', position: 'itemPosition'}
datadefault string arrayarrayData array (string or number type)
isCurvedfalseboolMake Wheel Picker curved
isCyclicfalseboolMake Wheel Picker cyclic
isAtmosphericfalseboolDesign Wheel Picker's items
selectedItemTextColorgreystringWheel Picker's selected Item Text Color
itemSpace20numberWheel Picker's items spacing
visibleItemCount7numberWheel Picker's items max visible count
renderIndicatorfalseboolShow Wheel Picker indicator
indicatorColortransparentstringIndicator color
isCurtainfalseboolWheel Picker curtain
curtainColortransparentstringWheel Picker curtain color
itemTextColorgreystringWheel Picker's items color
itemTextSize20numberWheel Picker's items text size
selectedItemPositionnullnumberSelect current item position
backgroundColortransparentstringWheel Picker background color

data

An array of options. This should be provided with an array of strings or array of numbers.

onItemSelected(event)

Callback with event in the form event = { data: 1, position: 0 }

Time Picker Props

PropDefaultTypeDescription
onDateSelectednullfuncCallback when user select time {date: 'selectedDate'}
initDatecurrent dateISOStringInitial selected time
hours[1, 2, 3, .. 12]arrayhours array
minutes['00', '05' ,'10', .. '55']arrayminutes array

Date Picker Props

PropDefaultTypeDescription
onDateSelectednullfuncCallback when user select date {date: 'selectedDate'}
initDatecurrent dateISOStringInitial selected date
days['Today', 'Wed Dec 28', ...]arraydays array
hours[1, 2, 3 .. 12]arrayhours array
minutes['00', '05', '10', .. '55']arrayminutes array
format24falseboolif true hours format is 24 hours
startDatecurrent dateISOStringThe Earlest date
daysCount365numberHow many days included in Date Picker

Questions or suggestions?

Feel free to open an issue

Keywords

FAQs

Package last updated on 27 Dec 2016

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