Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-native-wheel-picker-android
Advanced tools
Simple Wheel Picker for Android to use with react-native
A simple Wheel Picker for Android based on https://github.com/AigeStudio/WheelPicker Also you can use multiple pickers, such as DatePicker or TimePicker
For IOS you can use a good Picker for IOS and DatePicker for IOS
yarn add react-native-wheel-picker-android
react-native link react-native-wheel-picker-android
import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
const wheelPickerData = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'];
const now = new Date()
class MyPickers extends Component {
render() {
return (
<View style={styles.container}>
<WheelPicker
onItemSelected={(event)=>this.onItemSelected(event)}
isCurved
data={wheelPickerData}
style={styles.wheelPicker}/>
<DatePicker
initDate={now.toISOString()}
onDateSelected={(date)=>this.onDateSelected(date)}/>
<TimePicker
initDate={now.toISOString()}
onTimeSelected={(date)=>this.onTimeSelected(date)}/>
</View>
);
}
onItemSelected(event){
// do something
}
onDateSelected(date){
// do something
}
onTimeSelected(date){
// do something
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
wheelPicker: {
width: 200,
height: 150
}
});
module.exports = MyPickers;
import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
...
render() {
let arr = [1,2,3];
return (
<WheelPicker
onItemSelected={(event)=>{/* do something */}}
isCurved
isCyclic
data={arr}
style={{width:300, height: 300}}/>
);
}
Prop | Default | Type | Description |
---|---|---|---|
onItemSelected | null | func | Callback when user select item {data: 'itemData', position: 'itemPosition'} |
data | default string array | array | Data array (string or number type) |
isCurved | false | bool | Make Wheel Picker curved |
isCyclic | false | bool | Make Wheel Picker cyclic |
isAtmospheric | false | bool | Design Wheel Picker's items |
selectedItemTextColor | grey | string | Wheel Picker's selected Item Text Color |
itemSpace | 20 | number | Wheel Picker's items spacing |
visibleItemCount | 7 | number | Wheel Picker's items max visible count |
renderIndicator | false | bool | Show Wheel Picker indicator |
indicatorColor | transparent | string | Indicator color |
isCurtain | false | bool | Wheel Picker curtain |
curtainColor | transparent | string | Wheel Picker curtain color |
itemTextColor | grey | string | Wheel Picker's items color |
itemTextSize | 20 | number | Wheel Picker's items text size |
itemTextFontFamily | null | string | Wheel Picker's items text font name |
selectedItemPosition | null | number | Select current item position |
backgroundColor | transparent | string | Wheel Picker background color |
An array of options. This should be provided with an array of strings or array of numbers.
Callback with event in the form event = { data: 1, position: 0 }
...
render() {
const minutesArray = ['00', '15', '30', '45'];
const now = new Date();
return (
<TimePicker
minutes={minutesArray}
onTimeSelected={(date)=>this.onTimeSelected(date))}
initDate={now.toISOString()}/>
);
}
onTimeSelected(date){
// do something
}
Prop | Default | Type | Description |
---|---|---|---|
onTimeSelected | null | func | Callback when user select time {date: 'selectedTime'} |
initDate | current date | ISOString | Initial selected time |
hours | [1, 2, 3, .. 12] | array | hours array |
minutes | ['00', '05' ,'10', .. '55'] | array | minutes array |
itemTextColor | grey | string | Time Picker's items color |
selectedItemTextColor | black | string | Time Picker's selected Item Text Color |
backgroundColor | - | string | Time Picker background color |
...
render() {
let now = new Date();
return (
<DatePicker
initDate={now.toISOString()}
onDateSelected={(date)=> this.onDateSelected(date)}/>
);
}
onDateSelected(date){
// do something
}
Prop | Default | Type | Description |
---|---|---|---|
onDateSelected | null | func | Callback when user select date {date: 'selectedDate'} |
initDate | current date | ISOString | Initial selected date |
days | ['Today', 'Wed Dec 28', ...] | array | days array |
hours | [1, 2, 3 .. 12] | array | hours array |
minutes | ['00', '05', '10', .. '55'] | array | minutes array |
format24 | false | bool | if true hours format is 24 hours |
startDate | current date | ISOString | The Earlest date |
daysCount | 365 | number | How many days included in Date Picker |
itemTextColor | grey | string | Date Picker's items color |
selectedItemTextColor | black | string | Date Picker's selected Item Text Color |
backgroundColor | - | string | Date Picker background color |
hideDate | - | boolean | Hide date wheel picker |
hideHours | - | boolean | Hide hours wheel picker |
hideMinutes | - | boolean | Hide minutes wheel picker |
hideAM | - | boolean | Hide AM wheel picker |
Feel free to open an issue
FAQs
Simple Wheel Picker for Android to use with react-native
The npm package react-native-wheel-picker-android receives a total of 5,585 weekly downloads. As such, react-native-wheel-picker-android popularity was classified as popular.
We found that react-native-wheel-picker-android demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.