Gathering detailed insights and metrics for rn-value-picker
A simple measurement's unit value picker with defined range for React Native.
Installations
npm install rn-value-pickerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
19.1.0
NPM Version
8.3.0
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
TypeScript
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
lalitpatel11
Download Statistics
Total Downloads
740
Last Day
2
Last Week
15
Last Month
35
Last Year
179
GitHub Statistics
1 Stars
10 Commits
1 Watching
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.4
Package Id
rn-value-picker@1.0.4
Unpacked Size
81.16 kB
Size
60.83 kB
File Count
6
NPM Version
8.3.0
Node Version
19.1.0
Publised On
29 May 2023
Total Downloads
Cumulative downloads
Total Downloads
740
Last day
-77.8%
2
Compared to previous day
Last week
36.4%
15
Compared to previous week
Last month
150%
35
Compared to previous month
Last year
-68.1%
179
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
1
Versions
rn-value-picker
React native value picker is a simple measurement's unit value picker with defined range .
Installation
Install rn-value-picker with npm
1 npm install rn-value-picker
Usage
How to use ? :thinking:
1import { View, Text, TouchableOpacity } from "react-native"; 2import React, { useState } from "react"; 3import ValuePicker from "rn-value-picker"; 4 5const App = () => { 6 //states 7 const [showPicker, setShowPicker] = useState(false); 8 const [myHeight, setMyHeight] = useState(""); 9 //UI 10 return ( 11 <View 12 style={{ 13 flex: 1, 14 }} 15 > 16 <View 17 style={{ 18 flex: 1, 19 justifyContent: "center", 20 alignItems: "center", 21 }} 22 > 23 <TouchableOpacity 24 onPress={() => setShowPicker(true)} 25 style={{ 26 height: 50, 27 backgroundColor: "red", 28 justifyContent: "center", 29 alignItems: "center", 30 width: "50%", 31 borderRadius: 10, 32 }} 33 > 34 <Text 35 style={{ 36 color: "white", 37 fontSize: 18, 38 fontWeight: "bold", 39 }} 40 > 41 App {myHeight} 42 </Text> 43 </TouchableOpacity> 44 </View> 45 {/* use here before last view end */} 46 <ValuePicker 47 visible={showPicker} 48 setVisibility={setShowPicker} 49 Title="Your Weight" 50 unit="kg" 51 minValue={20} 52 maxValue={150} 53 setValue={setMyHeight} 54 /> 55 </View> 56 ); 57}; 58 59export default App;
Screenshots
List of props that you can use :-
| # | Props | Description | Required | Example |
|---|---|---|---|---|
| 1 | visible | Modal only: Boolean indicating if modal should be open. | Yes | state value as true or false |
| 2 | setVisibility | for closing modal | Yes | setVisibility={setState} |
| 3 | setValue | setState in which you want to select value | Yes | setValue={yourState} |
| 4 | unit | Unit in which value measure | Optional | "kg","cm","m" whatever just pass as string |
| 5 | Title | Title of your modal | Optional | pass as a String Title="Your Weight" |
| 6 | minValue | minimum value for measurement | Optional | default 100 pass value Integer |
| 7 | maxValue | minimum value for measurement | Optional | default 200 pass value Integer |
| 8 | cancelButtonText | text value if you want to change cancel text | Optional | default "cancel" if you want to change cancelButtonText="Your String" |
| 9 | cancelButtonStyle | style prop of cancel button view | Optional | cancelButtonStyle={{...your custom style}} |
| 10 | cancelButtonTextStyle | style prop of cancel button text | Optional | cancelButtonTextStyle={{...your custom style}} |
| 11 | confirmButtonText | text value if you want to change confirm text | Optional | default "confirm" if you want to change confirmButtonText="Your String" |
| 12 | confirmButtonStyle | style prop of confirm button view | Optional | confirmButtonStyle={{...your custom style}} |
| 13 | confirmButtonTextStyle | style prop of confirm button text | Optional | confirmButtonTextStyle={{...your custom style}} |
| 14 | position | position of modal | Optional | "center" and "bottom" default "center" |
Authors
No vulnerabilities found.
No security vulnerabilities found.