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

• @lalitpatel11