Gathering detailed insights and metrics for react-native-wheel-picker-android-community-base
Gathering detailed insights and metrics for react-native-wheel-picker-android-community-base
Installations
npm install react-native-wheel-picker-android-community-baseDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.18.1
NPM Version
6.14.15
Score
47.8
Supply Chain
60.8
Quality
66
Maintenance
50
Vulnerability
94.1
License
Releases
Unable to fetch releases
Languages
2
Java
JavaScript
Java (96.36%)
JavaScript (3.64%)
Developer
cat4git
Download Statistics
Total Downloads
1,386
Last Day
2
Last Week
2
Last Month
17
Last Year
218
GitHub Statistics
NOASSERTION License
9 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Feb 19, 2023
Maintainers
1
Package Meta Information
Latest Version
0.3.10
Package Id
react-native-wheel-picker-android-community-base@0.3.10
Unpacked Size
2.16 MB
Size
1.20 MB
File Count
217
NPM Version
6.14.15
Node Version
14.18.1
Published on
Feb 23, 2023
Total Downloads
Cumulative downloads
Total Downloads
1,386
Last Day
0%
2
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
183.3%
17
Compared to previous month
Last Year
-4.4%
218
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
base on react-native-wheel-picker-android
React native wheel picker V0.3.10
A simple Wheel Picker for Android (For IOs is used PickerIOS)
Installation
yarn add react-native-wheel-picker-android-community-base
Automatic Installation
react-native link react-native-wheel-picker-android-community-base
Manual Android Installation
In android/settings.gradle
include ':react-native-wheel-picker-android-community-base'
project(':react-native-wheel-picker-android-community-base').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android-community-base/android')
In android/app/build.gradle
dependencies {
...
compile project(':react-native-wheel-picker-android-community-base')
}
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
1import { 2 WheelPicker, 3 TimePicker, 4 DatePicker 5} from "react-native-wheel-picker-android-community-base"; 6import React, { Component } from "react"; 7import { AppRegistry, StyleSheet, Text, View, Button } from "react-native"; 8 9const wheelPickerData = [ 10 "sunday", 11 "monday", 12 "tuesday", 13 "wednesday", 14 "thursday", 15 "friday" 16]; 17 18class MyPicker extends Component { 19 state = { 20 selectedItem: 0 21 }; 22 23 onItemSelected = selectedItem => { 24 this.setState({ selectedItem }); 25 }; 26 27 onPress = () => { 28 this.setState({ selectedItem: 3 }); 29 }; 30 31 render() { 32 return ( 33 <View style={styles.container}> 34 <Button title={"Select third element"} onPress={this.onPress} /> 35 <Text>Selected position: {this.state.selectedItem}</Text> 36 <WheelPicker 37 selectedItem={this.state.selectedItem} 38 data={wheelPickerData} 39 onItemSelected={this.onItemSelected} 40 /> 41 </View> 42 ); 43 } 44} 45 46module.exports = MyPicker;
Props
| Prop | Default | Type | Description |
|---|---|---|---|
| onItemSelected | - | func | Returns selected position |
| data | - | Array<string> | Data array |
| isCyclic | false | bool | Make Wheel Picker cyclic |
| selectedItemTextColor | black | string | Wheel Picker's selected Item text color |
| selectedItemTextSize | 16 | number | Wheel Picker's selected Item text size |
| selectedItemTextFontFamily | - | font-family | Wheel Picker's selected Item font |
| itemTextColor | grey | string | Wheel Picker's Item Text Color |
| itemTextSize | 16 | number | Wheel Picker's Item text size |
| itemTextFontFamily | - | font-family | Wheel Picker's Item font |
| selectedItem | 0 | number | Current item position |
| initPosition | 0 | number | Initial item position |
| indicatorColor | black | string | Indicator color |
| hideIndicator | - | boolean | Hide indicator |
| indicatorWidth | 1 | number | Indicator width |
| backgroundColor | transparent | string | Wheel Picker background color |
Time Picker
1onTimeSelected = date => {} 2... 3<TimePicker onTimeSelected={this.onTimeSelected}/> 4
Props
| Prop | Default | Type | Description |
|---|---|---|---|
| ...WheelPicker props | - | - | All style WheelPicker props |
| initDate | current date | Date | Initial date |
| onTimeSelected | - | func | Callback with selected time |
| hours | [1,2,3,4...] | Array<string> | Custom hours array |
| minutes | [00,05,10,15...] | Array<string> | Custom minutes array |
| format24 | false | boolean | Time format |
Date Picker
For IOs DatePickerIOS is used
1onDateSelected = date => {} 2... 3<DatePicker onDateSelected={this.onDateSelected}/> 4
Props
| Prop | Default | Type | Description |
|---|---|---|---|
| DatePickerIOS props | - | - | All DatePickerIOS props (IOS only) |
| initDate | current date | Date | Initial date |
| onDateSelected | - | func | Callback 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) |
| format24 | false | boolean | Time format (Android only) |
| startDate | current date | Date | Min Date (Android only) |
| daysCount | 365 | number | Days count to display from start date (Android only) |
| hideDate | false | boolean | Hide days picker (Android only) |
| hideHours | false | boolean | Hide hours picker (Android only) |
| hideMinutes | false | boolean | Hide minutes picker (Android only) |
| hideAM | false | boolean | Hide time format picker (Android only) |
Questions or suggestions?
Feel free to open an issue
react-native-wheel-picker-android-community-base
No vulnerabilities found.